@biggive/components 202511061541.0.0 → 202511061628.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 (14) hide show
  1. package/dist/biggive/biggive-form-field-select.entry.esm.js.map +1 -1
  2. package/dist/biggive/biggive.esm.js +1 -1
  3. package/dist/biggive/{p-475001f5.entry.js → p-0bb89c2f.entry.js} +2 -2
  4. package/dist/cjs/biggive-form-field-select.cjs.entry.js +1 -1
  5. package/dist/cjs/biggive-form-field-select.entry.cjs.js.map +1 -1
  6. package/dist/collection/components/biggive-form-field-select/biggive-form-field-select.css +1 -1
  7. package/dist/components/biggive-form-field-select2.js +1 -1
  8. package/dist/components/biggive-form-field-select2.js.map +1 -1
  9. package/dist/esm/biggive-form-field-select.entry.js +1 -1
  10. package/dist/esm/biggive-form-field-select.entry.js.map +1 -1
  11. package/hydrate/index.js +1 -1
  12. package/hydrate/index.mjs +1 -1
  13. package/package.json +1 -1
  14. /package/dist/biggive/{p-475001f5.entry.js.map → p-0bb89c2f.entry.js.map} +0 -0
package/dist/biggive/biggive-form-field-select.entry.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"biggive-form-field-select.entry.esm.js","sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n display: contents;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nselect {\n appearance: none;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n cursor: inherit;\n line-height: inherit;\n outline: none;\n display: grid;\n background-color: $colour-white;\n align-items: center;\n}\nselect.grey {\n background-color: $colour-grey-background;\n}\n.selectWrapper {\n position: relative;\n}\n.prompt {\n position: absolute;\n z-index: 2;\n font-size: small;\n top: -1em;\n background-color: $colour-white;\n left: 4em;\n padding-left: 1em;\n padding-right: 1em;\n color: $colour-primary-blue;\n}\n.prompt.grey {\n background-color: $colour-grey-background;\n}\n\n.dropdown {\n @include standard-font();\n position: relative;\n text-align: left;\n &.select-style-bordered {\n .sleeve {\n @include font-size-medium();\n padding: 2px;\n position: relative;\n background-color: $colour-primary-blue;\n @include corner-clip-small-top-right();\n select {\n color: $colour-primary-blue;\n display: block;\n position: relative;\n padding: 10px 80px 10px 10px;\n clip-path:\n polygon(\n 0% 0%, /* top left */\n 0% 0%, /* top left */\n calc(100% - 14px) 0%, /* top right */\n 100% 14px, /* top right */\n 100% 100%, /* bottom right */\n 100% 100%, /* bottom right */\n 0 100%, /* bottom left */\n 0 100% /* bottom left */\n );\n span.placeholder.grey {\n background-color: $colour-grey-background;\n }\n }\n div.arrow {\n position: absolute;\n right: 20px;\n top: 18px;\n width: 10px;\n height: 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n z-index: 1;\n pointer-events: none;\n }\n }\n .sleeve:focus-within {\n background-color: $colour-tertiary-coral;\n }\n }\n &.select-style-underlined {\n .sleeve {\n @include dropdown-underlined();\n }\n }\n &.inherit-colour select{\n color: inherit !important;\n }\n\n select {\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: scroll;\n width: 100%;\n z-index: 1;\n left: 0;\n right: 0;\n }\n &.active .options {\n display: block;\n }\n}\n.dropdown.noprompt {\n margin-top: 0;\n}\n.options.grey {\n background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'biggive-form-field-select',\n styleUrl: 'biggive-form-field-select.scss',\n shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n @Prop() selectionChanged: (value: string) => void;\n\n /**\n * Displayed as 'eyebrow' label over the top border of the box.\n */\n @Prop() prompt!: string | null;\n\n @Prop({ mutable: true }) selectedValue: string | null;\n @Prop({ mutable: true }) selectedLabel: string | null;\n\n /**\n * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n */\n @Prop() options!: string | Array<{ label: string; value: string }>;\n @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n /**\n * Must match background of containing element, or unintended shape will appear.\n */\n @Prop() backgroundColour: 'white' | 'grey';\n\n @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n /**\n * ID for the select element, used by a label. If not passed then a random id will be generated.\n */\n @Prop() selectElementId: string | undefined;\n\n private doOptionSelectCompletedHandler = (event: any) => {\n const value = event.target.value;\n this.selectedValue = value;\n this.selectedLabel = event.target.label;\n this.selectionChanged(value);\n };\n\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n\n /**\n * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\n */\n @Prop() placeholder: string | undefined;\n\n render() {\n const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n let options = this.formatOptions(this.options);\n\n if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n }\n\n if (typeof options === 'undefined') {\n console.error('options undefined');\n options = [];\n }\n // Give the select a random id so we can reference it from a label\n const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n return (\n <div class=\"selectWrapper\">\n <label class={greyIfRequired} htmlFor={selectId}>\n <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n </label>\n <div\n class={\n 'dropdown space-below-' +\n this.spaceBelow +\n ' select-style-' +\n this.selectStyle +\n (this.prompt === null ? ' noprompt' : '') +\n (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n }\n >\n <div class=\"sleeve\">\n <select id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\n {options.map(option => (\n <option selected={this.selectedValue === option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n <div class=\"arrow\"></div>\n </div>\n </div>\n </div>\n );\n }\n\n private formatOptions(options: string | Array<{ label: string; value: string }>): {\n label: string;\n value: string;\n }[] {\n if (options === undefined) {\n return [];\n }\n\n if (typeof options === 'string') {\n options = JSON.parse(options);\n }\n\n if (Array.isArray(options)) {\n return options;\n }\n\n return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n }\n\n private getRandomInt(): number {\n const min = 1_000_000;\n const max = 9_999_999;\n return Math.floor(Math.random() * (max - min) + min);\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"biggive-form-field-select.entry.esm.js","sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n display: contents;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nselect {\n appearance: none;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n cursor: inherit;\n line-height: inherit;\n outline: none;\n display: grid;\n background-color: $colour-white;\n align-items: center;\n}\nselect.grey {\n background-color: $colour-grey-background;\n}\n.selectWrapper {\n position: relative;\n}\n.prompt {\n position: absolute;\n z-index: 2;\n font-size: small;\n top: -1em;\n background-color: $colour-white;\n left: 4em;\n padding-left: 1em;\n padding-right: 1em;\n color: $colour-primary-blue;\n}\n.prompt.grey {\n background-color: $colour-grey-background;\n}\n\n.dropdown {\n @include standard-font();\n position: relative;\n text-align: left;\n &.select-style-bordered {\n .sleeve {\n @include font-size-medium();\n padding: 2px;\n position: relative;\n background-color: $colour-primary-blue;\n @include corner-clip-small-top-right();\n select {\n color: $colour-primary-blue;\n display: block;\n position: relative;\n padding: 10px 80px 10px 10px;\n clip-path:\n polygon(\n 0% 0%, /* top left */\n 0% 0%, /* top left */\n calc(100% - 14px) 0%, /* top right */\n 100% 14px, /* top right */\n 100% 100%, /* bottom right */\n 100% 100%, /* bottom right */\n 0 100%, /* bottom left */\n 0 100% /* bottom left */\n );\n span.placeholder.grey {\n background-color: $colour-grey-background;\n }\n }\n div.arrow {\n position: absolute;\n right: 20px;\n top: 18px;\n width: 10px;\n height: 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n z-index: 1;\n pointer-events: none;\n }\n }\n .sleeve:focus-within {\n background-color: $colour-secondary-green;\n }\n }\n &.select-style-underlined {\n .sleeve {\n @include dropdown-underlined();\n }\n }\n &.inherit-colour select{\n color: inherit !important;\n }\n\n select {\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: scroll;\n width: 100%;\n z-index: 1;\n left: 0;\n right: 0;\n }\n &.active .options {\n display: block;\n }\n}\n.dropdown.noprompt {\n margin-top: 0;\n}\n.options.grey {\n background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'biggive-form-field-select',\n styleUrl: 'biggive-form-field-select.scss',\n shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n @Prop() selectionChanged: (value: string) => void;\n\n /**\n * Displayed as 'eyebrow' label over the top border of the box.\n */\n @Prop() prompt!: string | null;\n\n @Prop({ mutable: true }) selectedValue: string | null;\n @Prop({ mutable: true }) selectedLabel: string | null;\n\n /**\n * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n */\n @Prop() options!: string | Array<{ label: string; value: string }>;\n @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n /**\n * Must match background of containing element, or unintended shape will appear.\n */\n @Prop() backgroundColour: 'white' | 'grey';\n\n @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n /**\n * ID for the select element, used by a label. If not passed then a random id will be generated.\n */\n @Prop() selectElementId: string | undefined;\n\n private doOptionSelectCompletedHandler = (event: any) => {\n const value = event.target.value;\n this.selectedValue = value;\n this.selectedLabel = event.target.label;\n this.selectionChanged(value);\n };\n\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n\n /**\n * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\n */\n @Prop() placeholder: string | undefined;\n\n render() {\n const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n let options = this.formatOptions(this.options);\n\n if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n }\n\n if (typeof options === 'undefined') {\n console.error('options undefined');\n options = [];\n }\n // Give the select a random id so we can reference it from a label\n const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n return (\n <div class=\"selectWrapper\">\n <label class={greyIfRequired} htmlFor={selectId}>\n <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n </label>\n <div\n class={\n 'dropdown space-below-' +\n this.spaceBelow +\n ' select-style-' +\n this.selectStyle +\n (this.prompt === null ? ' noprompt' : '') +\n (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n }\n >\n <div class=\"sleeve\">\n <select id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\n {options.map(option => (\n <option selected={this.selectedValue === option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n <div class=\"arrow\"></div>\n </div>\n </div>\n </div>\n );\n }\n\n private formatOptions(options: string | Array<{ label: string; value: string }>): {\n label: string;\n value: string;\n }[] {\n if (options === undefined) {\n return [];\n }\n\n if (typeof options === 'string') {\n options = JSON.parse(options);\n }\n\n if (Array.isArray(options)) {\n return options;\n }\n\n return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n }\n\n private getRandomInt(): number {\n const min = 1_000_000;\n const max = 9_999_999;\n return Math.floor(Math.random() * (max - min) + min);\n }\n}\n"],"names":[],"mappings":"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"}
package/dist/biggive/biggive.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as o,b as t}from"./p-CTC1TIdr.js";export{s as setNonce}from"./p-CTC1TIdr.js";import{g as l}from"./p-DQuL1Twl.js";var r=()=>{{a(o.prototype)}const t=import.meta.url;const l={};if(t!==""){l.resourcesUrl=new URL(".",t).href}return e(l)};var a=e=>{const o=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return o.call(this,e)}const t=o.call(this,false);const l=this.childNodes;if(e){for(let e=0;e<l.length;e++){if(l[e].nodeType!==2){t.appendChild(l[e].cloneNode(true))}}}return t}};r().then((async e=>{await l();return t(JSON.parse('[["p-a75c70c4",[[257,"biggive-campaign-card",{"spaceBelow":[2,"space-below"],"campaignType":[1,"campaign-type"],"banner":[1],"campaignTitle":[1,"campaign-title"],"organisationName":[1,"organisation-name"],"primaryFigureLabel":[1,"primary-figure-label"],"primaryFigureAmount":[1,"primary-figure-amount"],"secondaryFigureLabel":[1,"secondary-figure-label"],"secondaryFigureAmount":[1,"secondary-figure-amount"],"progressBarCounter":[2,"progress-bar-counter"],"donateButtonLabel":[1,"donate-button-label"],"donateButtonUrl":[1,"donate-button-url"],"donateButtonColourScheme":[1,"donate-button-colour-scheme"],"moreInfoButtonLabel":[1,"more-info-button-label"],"moreInfoButtonUrl":[1,"more-info-button-url"],"moreInfoButtonColourScheme":[1,"more-info-button-colour-scheme"],"isFutureCampaign":[4,"is-future-campaign"],"isPastCampaign":[4,"is-past-campaign"],"datetime":[1]}]]],["p-2467dfb9",[[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"],"filtersApplied":[32],"unfocusInputs":[64]}]]],["p-9fafbbd8",[[257,"biggive-campaign-highlights",{"spaceBelow":[2,"space-below"],"banner":[1],"campaignTitle":[1,"campaign-title"],"primaryFigureLabel":[1,"primary-figure-label"],"primaryFigureAmount":[1,"primary-figure-amount"],"secondaryFigureLabel":[1,"secondary-figure-label"],"secondaryFigureAmount":[1,"secondary-figure-amount"],"progressBarCounter":[2,"progress-bar-counter"],"primaryStatIcon":[1,"primary-stat-icon"],"primaryStatText":[1,"primary-stat-text"],"secondaryStatIcon":[1,"secondary-stat-icon"],"secondaryStatText":[1,"secondary-stat-text"],"championName":[1,"champion-name"],"championUrl":[1,"champion-url"]}]]],["p-0a0a6255",[[257,"biggive-cookie-banner",{"autoOpenPreferences":[4,"auto-open-preferences"],"blogUriPrefix":[1,"blog-uri-prefix"],"previouslyAgreedCookiePreferences":[16]},null,{"autoOpenPreferences":["autoOpenPreferencesIfRequested"]}]]],["p-00c0e2ad",[[257,"biggive-footer",{"headingLevel":[2,"heading-level"],"donateUrlPrefix":[1,"donate-url-prefix"],"blogUrlPrefix":[1,"blog-url-prefix"],"experienceUrlPrefix":[1,"experience-url-prefix"],"smallCharityWeekEnabled":[4,"small-charity-week-enabled"],"usePresetFooter":[4,"use-preset-footer"]}]]],["p-bc7d344f",[[257,"biggive-main-menu",{"blogUrlPrefix":[1,"blog-url-prefix"],"donateUrlPrefix":[1,"donate-url-prefix"],"experienceUrlPrefix":[1,"experience-url-prefix"],"smallCharityWeekEnabled":[4,"small-charity-week-enabled"],"someCampaignHasHomePageRedirect":[4,"some-campaign-has-home-page-redirect"],"isLoggedIn":[4,"is-logged-in"],"closeMobileMenuFromOutside":[64]}]]],["p-619a5487",[[257,"philco-main-menu",{"philcoUrlPrefix":[1,"philco-url-prefix"],"closeMobileMenuFromOutside":[64]}]]],["p-bef4ed2f",[[257,"biggive-article-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"slug":[1],"slugColour":[1,"slug-colour"],"date":[1],"dateColour":[1,"date-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"image1Url":[1,"image-1-url"],"image1AltText":[1,"image-1-alt-text"],"image2Url":[1,"image-2-url"],"image2AltText":[1,"image-2-alt-text"],"imageLabel":[1,"image-label"],"imageLabelColour":[1,"image-label-colour"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColour":[1,"button-colour"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"]}]]],["p-7fc271c9",[[257,"biggive-basic-card",{"spaceBelow":[2,"space-below"],"siteDesign":[1,"site-design"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"mainTitle":[1,"main-title"],"subtitle":[1],"author":[1],"date":[1],"teaser":[1],"icon":[4],"iconColour":[1,"icon-colour"],"buttonAlign":[1,"button-align"],"buttonStyle":[1,"button-style"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"headingLevel":[2,"heading-level"],"addAnimation":[4,"add-animation"]}]]],["p-ea5a1595",[[257,"biggive-call-to-action",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"slugSize":[2,"slug-size"],"slugColour":[1,"slug-colour"],"slug":[1],"mainTitleColour":[1,"main-title-colour"],"mainTitleSize":[2,"main-title-size"],"mainTitle":[1,"main-title"],"subtitleSize":[2,"subtitle-size"],"subtitleColour":[1,"subtitle-colour"],"subtitle":[1],"teaserColour":[1,"teaser-colour"],"teaser":[1],"primaryButtonUrl":[1,"primary-button-url"],"primaryButtonLabel":[1,"primary-button-label"],"primaryButtonColourScheme":[1,"primary-button-colour-scheme"],"secondaryButtonUrl":[1,"secondary-button-url"],"secondaryButtonLabel":[1,"secondary-button-label"],"secondaryButtonColourScheme":[1,"secondary-button-colour-scheme"]}]]],["p-f8dc7f28",[[257,"biggive-hero-image",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"slug":[1],"slugColour":[1,"slug-colour"],"logo":[1],"logoHeight":[2,"logo-height"],"logoAltText":[1,"logo-alt-text"],"mainImage":[1,"main-image"],"mainImageShape":[1,"main-image-shape"],"mainImageAlignHorizontal":[1,"main-image-align-horizontal"],"mainImageAlignVertical":[1,"main-image-align-vertical"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-2fc941fe",[[257,"biggive-icon-button",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundPadding":[2,"background-padding"],"text":[1],"textColour":[1,"text-colour"],"icon":[1],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"size":[1],"arrow":[4],"arrowColour":[1,"arrow-colour"],"circle":[4],"shadow":[4],"centered":[4],"rounded":[4],"buttonId":[1,"button-id"]}]]],["p-2892f4cf",[[257,"biggive-image-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"textAlign":[1,"text-align"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonAlign":[1,"button-align"],"buttonStyle":[1,"button-style"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"addAnimation":[4,"add-animation"]}]]],["p-1fa0618a",[[257,"biggive-image-feature",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"imageUrl":[1,"image-url"],"imageAltText":[1,"image-alt-text"],"slug":[1],"slugColour":[1,"slug-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-13c1fef9",[[257,"biggive-video-feature",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"videoUrl":[1,"video-url"],"slug":[1],"slugColour":[1,"slug-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-a190176d",[[257,"biggive-accordion",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"headingColour":[1,"heading-colour"],"children":[32]}]]],["p-9905bea4",[[257,"biggive-accordion-entry",{"heading":[1]}]]],["p-ccf87311",[[257,"biggive-back-to-top"]]],["p-34b6d784",[[257,"biggive-biography-card",{"spaceBelow":[2,"space-below"],"borderWidth":[2,"border-width"],"imageUrl":[1,"image-url"],"imageStyle":[1,"image-style"],"textColour":[1,"text-colour"],"backgroundColour":[1,"background-colour"],"fullName":[1,"full-name"],"jobTitle":[1,"job-title"],"textAlign":[1,"text-align"],"ratio":[1],"circle":[4],"circleColour":[1,"circle-colour"],"rounded":[4],"url":[1]}]]],["p-73c84ebe",[[257,"biggive-boxed-content",{"spaceBelow":[2,"space-below"],"verticalPadding":[2,"vertical-padding"],"horizontalPadding":[2,"horizontal-padding"],"backgroundColour":[1,"background-colour"],"shadow":[4]}]]],["p-5aa70637",[[257,"biggive-branded-image",{"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"imageHeightPercent":[2,"image-height-percent"],"imageAlt":[1,"image-alt"],"logoUrl":[1,"logo-url"],"slug":[1],"charityName":[1,"charity-name"],"charityLocation":[1,"charity-location"],"charityUrl":[1,"charity-url"]}]]],["p-37674669",[[257,"biggive-container-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"headingLevel":[2,"heading-level"]}]]],["p-77e54760",[[257,"biggive-form"]]],["p-df3adeb8",[[257,"biggive-formatted-text",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"maxWidth":[2,"max-width"],"siteDesign":[1,"site-design"]}]]],["p-e8b3a71d",[[257,"biggive-grid",{"spaceBelow":[2,"space-below"],"columnCount":[2,"column-count"],"spaceBetween":[4,"space-between"],"columnGap":[2,"column-gap"]}]]],["p-4d31c426",[[257,"biggive-heading",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"colour":[1],"htmlElement":[1,"html-element"],"size":[2],"align":[1],"text":[1],"icon":[4],"iconColour":[1,"icon-colour"],"siteDesign":[1,"site-design"]}]]],["p-6ecd4ea2",[[257,"biggive-heading-banner",{"logo":[1],"slug":[1],"mainTitle":[1,"main-title"],"mainImageUrl":[1,"main-image-url"],"focalPoint":[1,"focal-point"],"teaser":[1],"backgroundColour":[1,"background-colour"],"textBackgroundColour":[1,"text-background-colour"],"slugColour":[1,"slug-colour"],"mainTitleColour":[1,"main-title-colour"],"teaserColour":[1,"teaser-colour"],"height":[1]}]]],["p-c1e9a453",[[257,"biggive-image",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"imageAltText":[1,"image-alt-text"],"width":[2],"height":[2],"sizeUnit":[1,"size-unit"]}]]],["p-4987e6ea",[[257,"biggive-image-button",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundPadding":[2,"background-padding"],"text":[1],"textColour":[1,"text-colour"],"imageUrl":[1,"image-url"],"imageStyle":[1,"image-style"],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"size":[1],"arrow":[4],"arrowColour":[1,"arrow-colour"],"circle":[4],"shadow":[4],"centered":[4],"rounded":[4],"buttonId":[1,"button-id"]}]]],["p-c9615246",[[257,"biggive-nav-group",{"inline":[4]}]]],["p-5aa41b68",[[257,"biggive-nav-item",{"url":[1],"label":[1],"iconColour":[1,"icon-colour"]}]]],["p-4070bac2",[[257,"biggive-page-column"]]],["p-b4c7f4ee",[[257,"biggive-page-columns",{"spaceBelow":[2,"space-below"]}]]],["p-d71e7f23",[[257,"biggive-page-section",{"spaceBelow":[2,"space-below"],"sectionStyleTop":[1,"section-style-top"],"sectionStyleBottom":[1,"section-style-bottom"],"colourScheme":[1,"colour-scheme"],"maxWidth":[2,"max-width"],"primaryFullBleed":[4,"primary-full-bleed"]}]]],["p-37a49e85",[[257,"biggive-quote",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"quote":[1],"attribution":[1],"quoteIconColour":[1,"quote-icon-colour"],"siteDesign":[1,"site-design"]}]]],["p-5f7207d9",[[257,"biggive-sheet",{"sheetId":[1,"sheet-id"],"backgroundColour":[1,"background-colour"],"textColour":[1,"text-colour"]}]]],["p-1984ccdb",[[257,"biggive-tab",{"tabTitle":[1,"tab-title"]}]]],["p-13e045ea",[[257,"biggive-tabbed-content",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"selectedTextColour":[1,"selected-text-colour"],"navigationHighlightColour":[1,"navigation-highlight-colour"],"selectedNavigationHighlightColour":[1,"selected-navigation-highlight-colour"],"buttonBackgroundColour":[1,"button-background-colour"],"buttonIconColour":[1,"button-icon-colour"]}]]],["p-525a84bf",[[257,"biggive-table",{"spaceBelow":[2,"space-below"],"headerTextColour":[1,"header-text-colour"],"headerBackgroundColour":[1,"header-background-colour"],"bodyTextColour":[1,"body-text-colour"],"bodyBackgroundColour":[1,"body-background-colour"]}]]],["p-587e025a",[[257,"biggive-text-input",{"currency":[1],"spaceBelow":[2,"space-below"],"selectStyle":[1,"select-style"],"siteDesign":[1,"site-design"]}]]],["p-8506012f",[[257,"biggive-timeline",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"selectedTextColour":[1,"selected-text-colour"],"navigationHighlightColour":[1,"navigation-highlight-colour"],"selectedNavigationHighlightColour":[1,"selected-navigation-highlight-colour"],"buttonBackgroundColour":[1,"button-background-colour"],"buttonIconColour":[1,"button-icon-colour"],"entryBackgroundColour":[1,"entry-background-colour"],"entryHighlightColour":[1,"entry-highlight-colour"],"entryDateColour":[1,"entry-date-colour"],"entryTitleColour":[1,"entry-title-colour"],"entryTextColour":[1,"entry-text-colour"]}]]],["p-9bdb2bb8",[[257,"biggive-timeline-entry",{"date":[1],"heading":[1]}]]],["p-e5f3290f",[[257,"biggive-totalizer",{"spaceBelow":[2,"space-below"],"primaryColour":[1,"primary-colour"],"primaryTextColour":[1,"primary-text-colour"],"secondaryColour":[1,"secondary-colour"],"secondaryTextColour":[1,"secondary-text-colour"],"mainMessage":[1,"main-message"]}]]],["p-1a2defec",[[257,"biggive-totalizer-ticker-item",{"figure":[1],"label":[1]}]]],["p-23d36f07",[[257,"biggive-video",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"videoUrl":[1,"video-url"]}]]],["p-37ad5440",[[257,"philco-footer",{"headingLevel":[2,"heading-level"],"philcoUrlPrefix":[1,"philco-url-prefix"]}]]],["p-475001f5",[[257,"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]}]]],["p-95f3e03e",[[257,"biggive-popup",{"modalClosedCallback":[16],"openFromOutside":[64],"closeFromOutside":[64]}]]],["p-4c27058f",[[257,"biggive-progress-bar",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"counter":[2]}]]],["p-b53429c3",[[257,"biggive-social-icon",{"service":[1],"labelPrefix":[1,"label-prefix"],"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"wide":[4],"url":[1]}]]],["p-eee51f82",[[257,"biggive-misc-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"url":[1]}]]],["p-3600d893",[[257,"biggive-button",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"label":[1],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"fullWidth":[4,"full-width"],"size":[1],"rounded":[4],"centered":[4],"buttonId":[1,"button-id"],"siteDesign":[1,"site-design"],"disabled":[4]}]]]]'),e)}));
1
+ import{p as e,H as o,b as t}from"./p-CTC1TIdr.js";export{s as setNonce}from"./p-CTC1TIdr.js";import{g as l}from"./p-DQuL1Twl.js";var r=()=>{{a(o.prototype)}const t=import.meta.url;const l={};if(t!==""){l.resourcesUrl=new URL(".",t).href}return e(l)};var a=e=>{const o=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return o.call(this,e)}const t=o.call(this,false);const l=this.childNodes;if(e){for(let e=0;e<l.length;e++){if(l[e].nodeType!==2){t.appendChild(l[e].cloneNode(true))}}}return t}};r().then((async e=>{await l();return t(JSON.parse('[["p-a75c70c4",[[257,"biggive-campaign-card",{"spaceBelow":[2,"space-below"],"campaignType":[1,"campaign-type"],"banner":[1],"campaignTitle":[1,"campaign-title"],"organisationName":[1,"organisation-name"],"primaryFigureLabel":[1,"primary-figure-label"],"primaryFigureAmount":[1,"primary-figure-amount"],"secondaryFigureLabel":[1,"secondary-figure-label"],"secondaryFigureAmount":[1,"secondary-figure-amount"],"progressBarCounter":[2,"progress-bar-counter"],"donateButtonLabel":[1,"donate-button-label"],"donateButtonUrl":[1,"donate-button-url"],"donateButtonColourScheme":[1,"donate-button-colour-scheme"],"moreInfoButtonLabel":[1,"more-info-button-label"],"moreInfoButtonUrl":[1,"more-info-button-url"],"moreInfoButtonColourScheme":[1,"more-info-button-colour-scheme"],"isFutureCampaign":[4,"is-future-campaign"],"isPastCampaign":[4,"is-past-campaign"],"datetime":[1]}]]],["p-2467dfb9",[[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"],"filtersApplied":[32],"unfocusInputs":[64]}]]],["p-9fafbbd8",[[257,"biggive-campaign-highlights",{"spaceBelow":[2,"space-below"],"banner":[1],"campaignTitle":[1,"campaign-title"],"primaryFigureLabel":[1,"primary-figure-label"],"primaryFigureAmount":[1,"primary-figure-amount"],"secondaryFigureLabel":[1,"secondary-figure-label"],"secondaryFigureAmount":[1,"secondary-figure-amount"],"progressBarCounter":[2,"progress-bar-counter"],"primaryStatIcon":[1,"primary-stat-icon"],"primaryStatText":[1,"primary-stat-text"],"secondaryStatIcon":[1,"secondary-stat-icon"],"secondaryStatText":[1,"secondary-stat-text"],"championName":[1,"champion-name"],"championUrl":[1,"champion-url"]}]]],["p-0a0a6255",[[257,"biggive-cookie-banner",{"autoOpenPreferences":[4,"auto-open-preferences"],"blogUriPrefix":[1,"blog-uri-prefix"],"previouslyAgreedCookiePreferences":[16]},null,{"autoOpenPreferences":["autoOpenPreferencesIfRequested"]}]]],["p-00c0e2ad",[[257,"biggive-footer",{"headingLevel":[2,"heading-level"],"donateUrlPrefix":[1,"donate-url-prefix"],"blogUrlPrefix":[1,"blog-url-prefix"],"experienceUrlPrefix":[1,"experience-url-prefix"],"smallCharityWeekEnabled":[4,"small-charity-week-enabled"],"usePresetFooter":[4,"use-preset-footer"]}]]],["p-bc7d344f",[[257,"biggive-main-menu",{"blogUrlPrefix":[1,"blog-url-prefix"],"donateUrlPrefix":[1,"donate-url-prefix"],"experienceUrlPrefix":[1,"experience-url-prefix"],"smallCharityWeekEnabled":[4,"small-charity-week-enabled"],"someCampaignHasHomePageRedirect":[4,"some-campaign-has-home-page-redirect"],"isLoggedIn":[4,"is-logged-in"],"closeMobileMenuFromOutside":[64]}]]],["p-619a5487",[[257,"philco-main-menu",{"philcoUrlPrefix":[1,"philco-url-prefix"],"closeMobileMenuFromOutside":[64]}]]],["p-bef4ed2f",[[257,"biggive-article-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"slug":[1],"slugColour":[1,"slug-colour"],"date":[1],"dateColour":[1,"date-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"image1Url":[1,"image-1-url"],"image1AltText":[1,"image-1-alt-text"],"image2Url":[1,"image-2-url"],"image2AltText":[1,"image-2-alt-text"],"imageLabel":[1,"image-label"],"imageLabelColour":[1,"image-label-colour"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColour":[1,"button-colour"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"]}]]],["p-7fc271c9",[[257,"biggive-basic-card",{"spaceBelow":[2,"space-below"],"siteDesign":[1,"site-design"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"mainTitle":[1,"main-title"],"subtitle":[1],"author":[1],"date":[1],"teaser":[1],"icon":[4],"iconColour":[1,"icon-colour"],"buttonAlign":[1,"button-align"],"buttonStyle":[1,"button-style"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"headingLevel":[2,"heading-level"],"addAnimation":[4,"add-animation"]}]]],["p-ea5a1595",[[257,"biggive-call-to-action",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"slugSize":[2,"slug-size"],"slugColour":[1,"slug-colour"],"slug":[1],"mainTitleColour":[1,"main-title-colour"],"mainTitleSize":[2,"main-title-size"],"mainTitle":[1,"main-title"],"subtitleSize":[2,"subtitle-size"],"subtitleColour":[1,"subtitle-colour"],"subtitle":[1],"teaserColour":[1,"teaser-colour"],"teaser":[1],"primaryButtonUrl":[1,"primary-button-url"],"primaryButtonLabel":[1,"primary-button-label"],"primaryButtonColourScheme":[1,"primary-button-colour-scheme"],"secondaryButtonUrl":[1,"secondary-button-url"],"secondaryButtonLabel":[1,"secondary-button-label"],"secondaryButtonColourScheme":[1,"secondary-button-colour-scheme"]}]]],["p-f8dc7f28",[[257,"biggive-hero-image",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"slug":[1],"slugColour":[1,"slug-colour"],"logo":[1],"logoHeight":[2,"logo-height"],"logoAltText":[1,"logo-alt-text"],"mainImage":[1,"main-image"],"mainImageShape":[1,"main-image-shape"],"mainImageAlignHorizontal":[1,"main-image-align-horizontal"],"mainImageAlignVertical":[1,"main-image-align-vertical"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-2fc941fe",[[257,"biggive-icon-button",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundPadding":[2,"background-padding"],"text":[1],"textColour":[1,"text-colour"],"icon":[1],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"size":[1],"arrow":[4],"arrowColour":[1,"arrow-colour"],"circle":[4],"shadow":[4],"centered":[4],"rounded":[4],"buttonId":[1,"button-id"]}]]],["p-2892f4cf",[[257,"biggive-image-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"textAlign":[1,"text-align"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonAlign":[1,"button-align"],"buttonStyle":[1,"button-style"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"addAnimation":[4,"add-animation"]}]]],["p-1fa0618a",[[257,"biggive-image-feature",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"imageUrl":[1,"image-url"],"imageAltText":[1,"image-alt-text"],"slug":[1],"slugColour":[1,"slug-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-13c1fef9",[[257,"biggive-video-feature",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"videoUrl":[1,"video-url"],"slug":[1],"slugColour":[1,"slug-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-a190176d",[[257,"biggive-accordion",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"headingColour":[1,"heading-colour"],"children":[32]}]]],["p-9905bea4",[[257,"biggive-accordion-entry",{"heading":[1]}]]],["p-ccf87311",[[257,"biggive-back-to-top"]]],["p-34b6d784",[[257,"biggive-biography-card",{"spaceBelow":[2,"space-below"],"borderWidth":[2,"border-width"],"imageUrl":[1,"image-url"],"imageStyle":[1,"image-style"],"textColour":[1,"text-colour"],"backgroundColour":[1,"background-colour"],"fullName":[1,"full-name"],"jobTitle":[1,"job-title"],"textAlign":[1,"text-align"],"ratio":[1],"circle":[4],"circleColour":[1,"circle-colour"],"rounded":[4],"url":[1]}]]],["p-73c84ebe",[[257,"biggive-boxed-content",{"spaceBelow":[2,"space-below"],"verticalPadding":[2,"vertical-padding"],"horizontalPadding":[2,"horizontal-padding"],"backgroundColour":[1,"background-colour"],"shadow":[4]}]]],["p-5aa70637",[[257,"biggive-branded-image",{"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"imageHeightPercent":[2,"image-height-percent"],"imageAlt":[1,"image-alt"],"logoUrl":[1,"logo-url"],"slug":[1],"charityName":[1,"charity-name"],"charityLocation":[1,"charity-location"],"charityUrl":[1,"charity-url"]}]]],["p-37674669",[[257,"biggive-container-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"headingLevel":[2,"heading-level"]}]]],["p-77e54760",[[257,"biggive-form"]]],["p-df3adeb8",[[257,"biggive-formatted-text",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"maxWidth":[2,"max-width"],"siteDesign":[1,"site-design"]}]]],["p-e8b3a71d",[[257,"biggive-grid",{"spaceBelow":[2,"space-below"],"columnCount":[2,"column-count"],"spaceBetween":[4,"space-between"],"columnGap":[2,"column-gap"]}]]],["p-4d31c426",[[257,"biggive-heading",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"colour":[1],"htmlElement":[1,"html-element"],"size":[2],"align":[1],"text":[1],"icon":[4],"iconColour":[1,"icon-colour"],"siteDesign":[1,"site-design"]}]]],["p-6ecd4ea2",[[257,"biggive-heading-banner",{"logo":[1],"slug":[1],"mainTitle":[1,"main-title"],"mainImageUrl":[1,"main-image-url"],"focalPoint":[1,"focal-point"],"teaser":[1],"backgroundColour":[1,"background-colour"],"textBackgroundColour":[1,"text-background-colour"],"slugColour":[1,"slug-colour"],"mainTitleColour":[1,"main-title-colour"],"teaserColour":[1,"teaser-colour"],"height":[1]}]]],["p-c1e9a453",[[257,"biggive-image",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"imageAltText":[1,"image-alt-text"],"width":[2],"height":[2],"sizeUnit":[1,"size-unit"]}]]],["p-4987e6ea",[[257,"biggive-image-button",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundPadding":[2,"background-padding"],"text":[1],"textColour":[1,"text-colour"],"imageUrl":[1,"image-url"],"imageStyle":[1,"image-style"],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"size":[1],"arrow":[4],"arrowColour":[1,"arrow-colour"],"circle":[4],"shadow":[4],"centered":[4],"rounded":[4],"buttonId":[1,"button-id"]}]]],["p-c9615246",[[257,"biggive-nav-group",{"inline":[4]}]]],["p-5aa41b68",[[257,"biggive-nav-item",{"url":[1],"label":[1],"iconColour":[1,"icon-colour"]}]]],["p-4070bac2",[[257,"biggive-page-column"]]],["p-b4c7f4ee",[[257,"biggive-page-columns",{"spaceBelow":[2,"space-below"]}]]],["p-d71e7f23",[[257,"biggive-page-section",{"spaceBelow":[2,"space-below"],"sectionStyleTop":[1,"section-style-top"],"sectionStyleBottom":[1,"section-style-bottom"],"colourScheme":[1,"colour-scheme"],"maxWidth":[2,"max-width"],"primaryFullBleed":[4,"primary-full-bleed"]}]]],["p-37a49e85",[[257,"biggive-quote",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"quote":[1],"attribution":[1],"quoteIconColour":[1,"quote-icon-colour"],"siteDesign":[1,"site-design"]}]]],["p-5f7207d9",[[257,"biggive-sheet",{"sheetId":[1,"sheet-id"],"backgroundColour":[1,"background-colour"],"textColour":[1,"text-colour"]}]]],["p-1984ccdb",[[257,"biggive-tab",{"tabTitle":[1,"tab-title"]}]]],["p-13e045ea",[[257,"biggive-tabbed-content",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"selectedTextColour":[1,"selected-text-colour"],"navigationHighlightColour":[1,"navigation-highlight-colour"],"selectedNavigationHighlightColour":[1,"selected-navigation-highlight-colour"],"buttonBackgroundColour":[1,"button-background-colour"],"buttonIconColour":[1,"button-icon-colour"]}]]],["p-525a84bf",[[257,"biggive-table",{"spaceBelow":[2,"space-below"],"headerTextColour":[1,"header-text-colour"],"headerBackgroundColour":[1,"header-background-colour"],"bodyTextColour":[1,"body-text-colour"],"bodyBackgroundColour":[1,"body-background-colour"]}]]],["p-587e025a",[[257,"biggive-text-input",{"currency":[1],"spaceBelow":[2,"space-below"],"selectStyle":[1,"select-style"],"siteDesign":[1,"site-design"]}]]],["p-8506012f",[[257,"biggive-timeline",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"selectedTextColour":[1,"selected-text-colour"],"navigationHighlightColour":[1,"navigation-highlight-colour"],"selectedNavigationHighlightColour":[1,"selected-navigation-highlight-colour"],"buttonBackgroundColour":[1,"button-background-colour"],"buttonIconColour":[1,"button-icon-colour"],"entryBackgroundColour":[1,"entry-background-colour"],"entryHighlightColour":[1,"entry-highlight-colour"],"entryDateColour":[1,"entry-date-colour"],"entryTitleColour":[1,"entry-title-colour"],"entryTextColour":[1,"entry-text-colour"]}]]],["p-9bdb2bb8",[[257,"biggive-timeline-entry",{"date":[1],"heading":[1]}]]],["p-e5f3290f",[[257,"biggive-totalizer",{"spaceBelow":[2,"space-below"],"primaryColour":[1,"primary-colour"],"primaryTextColour":[1,"primary-text-colour"],"secondaryColour":[1,"secondary-colour"],"secondaryTextColour":[1,"secondary-text-colour"],"mainMessage":[1,"main-message"]}]]],["p-1a2defec",[[257,"biggive-totalizer-ticker-item",{"figure":[1],"label":[1]}]]],["p-23d36f07",[[257,"biggive-video",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"videoUrl":[1,"video-url"]}]]],["p-37ad5440",[[257,"philco-footer",{"headingLevel":[2,"heading-level"],"philcoUrlPrefix":[1,"philco-url-prefix"]}]]],["p-0bb89c2f",[[257,"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]}]]],["p-95f3e03e",[[257,"biggive-popup",{"modalClosedCallback":[16],"openFromOutside":[64],"closeFromOutside":[64]}]]],["p-4c27058f",[[257,"biggive-progress-bar",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"counter":[2]}]]],["p-b53429c3",[[257,"biggive-social-icon",{"service":[1],"labelPrefix":[1,"label-prefix"],"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"wide":[4],"url":[1]}]]],["p-eee51f82",[[257,"biggive-misc-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"url":[1]}]]],["p-3600d893",[[257,"biggive-button",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"label":[1],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"fullWidth":[4,"full-width"],"size":[1],"rounded":[4],"centered":[4],"buttonId":[1,"button-id"],"siteDesign":[1,"site-design"],"disabled":[4]}]]]]'),e)}));
2
2
  //# sourceMappingURL=biggive.esm.js.map
package/dist/biggive/{p-475001f5.entry.js → p-0bb89c2f.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{r as e,h as o,g as t}from"./p-CTC1TIdr.js";const i='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:#FF7272}.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}';const r=class{constructor(o){e(this,o);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=this.backgroundColour==="grey"?" grey":"";let t=this.formatOptions(this.options);if(typeof this.placeholder==="string"&&typeof this.selectedValue!=="string"){t=[{value:"__placeholder__",label:this.placeholder},...t]}if(typeof t==="undefined"){console.error("options undefined");t=[]}const i=this.selectElementId||"select-"+this.getRandomInt().toString();return o("div",{key:"b0a1d15823be95bf001cf6bee579a95d63aa6e95",class:"selectWrapper"},o("label",{key:"c6f1bc9c1d4ea613d962b49493b3b2c6175955cf",class:e,htmlFor:i},o("div",{key:"7a5f7319f9e0ca4d894868367be7c42cfc706474",class:"prompt"+e},this.prompt)),o("div",{key:"0415588686695208ed35fb49adf1243e50ccc2ea",class:"dropdown space-below-"+this.spaceBelow+" select-style-"+this.selectStyle+(this.prompt===null?" noprompt":"")+(this.selectedOptionColour==="inherit"?" inherit-colour":"")},o("div",{key:"a479c5085a1498d619f7a2eea7ce002650db584c",class:"sleeve"},o("select",{key:"24e7c1f825eeca9672680e800b9a3058294c122f",id:i,class:e,onChange:this.doOptionSelectCompletedHandler,"aria-label":this.prompt===null?this.placeholder:this.prompt},t.map((e=>o("option",{selected:this.selectedValue===e.value,value:e.value},e.label)))),o("div",{key:"fd9553dde63067ac87362a78ff88534bb1a6ee6d",class:"arrow"}))))}formatOptions(e){if(e===undefined){return[]}if(typeof e==="string"){e=JSON.parse(e)}if(Array.isArray(e)){return e}return Object.entries(e).map((e=>({value:e[0],label:e[1]})))}getRandomInt(){const e=1e6;const o=9999999;return Math.floor(Math.random()*(o-e)+e)}get el(){return t(this)}};r.style=i;export{r as biggive_form_field_select};
2
- //# sourceMappingURL=p-475001f5.entry.js.map
1
+ import{r as e,h as o,g as t}from"./p-CTC1TIdr.js";const i='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}';const r=class{constructor(o){e(this,o);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=this.backgroundColour==="grey"?" grey":"";let t=this.formatOptions(this.options);if(typeof this.placeholder==="string"&&typeof this.selectedValue!=="string"){t=[{value:"__placeholder__",label:this.placeholder},...t]}if(typeof t==="undefined"){console.error("options undefined");t=[]}const i=this.selectElementId||"select-"+this.getRandomInt().toString();return o("div",{key:"b0a1d15823be95bf001cf6bee579a95d63aa6e95",class:"selectWrapper"},o("label",{key:"c6f1bc9c1d4ea613d962b49493b3b2c6175955cf",class:e,htmlFor:i},o("div",{key:"7a5f7319f9e0ca4d894868367be7c42cfc706474",class:"prompt"+e},this.prompt)),o("div",{key:"0415588686695208ed35fb49adf1243e50ccc2ea",class:"dropdown space-below-"+this.spaceBelow+" select-style-"+this.selectStyle+(this.prompt===null?" noprompt":"")+(this.selectedOptionColour==="inherit"?" inherit-colour":"")},o("div",{key:"a479c5085a1498d619f7a2eea7ce002650db584c",class:"sleeve"},o("select",{key:"24e7c1f825eeca9672680e800b9a3058294c122f",id:i,class:e,onChange:this.doOptionSelectCompletedHandler,"aria-label":this.prompt===null?this.placeholder:this.prompt},t.map((e=>o("option",{selected:this.selectedValue===e.value,value:e.value},e.label)))),o("div",{key:"fd9553dde63067ac87362a78ff88534bb1a6ee6d",class:"arrow"}))))}formatOptions(e){if(e===undefined){return[]}if(typeof e==="string"){e=JSON.parse(e)}if(Array.isArray(e)){return e}return Object.entries(e).map((e=>({value:e[0],label:e[1]})))}getRandomInt(){const e=1e6;const o=9999999;return Math.floor(Math.random()*(o-e)+e)}get el(){return t(this)}};r.style=i;export{r as biggive_form_field_select};
2
+ //# sourceMappingURL=p-0bb89c2f.entry.js.map
package/dist/cjs/biggive-form-field-select.cjs.entry.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  var index = require('./index-CjbwKJ_Y.js');
4
4
 
5
- const biggiveFormFieldSelectCss = "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:#FF7272}.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}";
5
+ const biggiveFormFieldSelectCss = "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}";
6
6
 
7
7
  const BiggiveFormFieldSelect = class {
8
8
  constructor(hostRef) {
package/dist/cjs/biggive-form-field-select.entry.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"biggive-form-field-select.entry.cjs.js","sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n display: contents;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nselect {\n appearance: none;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n cursor: inherit;\n line-height: inherit;\n outline: none;\n display: grid;\n background-color: $colour-white;\n align-items: center;\n}\nselect.grey {\n background-color: $colour-grey-background;\n}\n.selectWrapper {\n position: relative;\n}\n.prompt {\n position: absolute;\n z-index: 2;\n font-size: small;\n top: -1em;\n background-color: $colour-white;\n left: 4em;\n padding-left: 1em;\n padding-right: 1em;\n color: $colour-primary-blue;\n}\n.prompt.grey {\n background-color: $colour-grey-background;\n}\n\n.dropdown {\n @include standard-font();\n position: relative;\n text-align: left;\n &.select-style-bordered {\n .sleeve {\n @include font-size-medium();\n padding: 2px;\n position: relative;\n background-color: $colour-primary-blue;\n @include corner-clip-small-top-right();\n select {\n color: $colour-primary-blue;\n display: block;\n position: relative;\n padding: 10px 80px 10px 10px;\n clip-path:\n polygon(\n 0% 0%, /* top left */\n 0% 0%, /* top left */\n calc(100% - 14px) 0%, /* top right */\n 100% 14px, /* top right */\n 100% 100%, /* bottom right */\n 100% 100%, /* bottom right */\n 0 100%, /* bottom left */\n 0 100% /* bottom left */\n );\n span.placeholder.grey {\n background-color: $colour-grey-background;\n }\n }\n div.arrow {\n position: absolute;\n right: 20px;\n top: 18px;\n width: 10px;\n height: 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n z-index: 1;\n pointer-events: none;\n }\n }\n .sleeve:focus-within {\n background-color: $colour-tertiary-coral;\n }\n }\n &.select-style-underlined {\n .sleeve {\n @include dropdown-underlined();\n }\n }\n &.inherit-colour select{\n color: inherit !important;\n }\n\n select {\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: scroll;\n width: 100%;\n z-index: 1;\n left: 0;\n right: 0;\n }\n &.active .options {\n display: block;\n }\n}\n.dropdown.noprompt {\n margin-top: 0;\n}\n.options.grey {\n background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'biggive-form-field-select',\n styleUrl: 'biggive-form-field-select.scss',\n shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n @Prop() selectionChanged: (value: string) => void;\n\n /**\n * Displayed as 'eyebrow' label over the top border of the box.\n */\n @Prop() prompt!: string | null;\n\n @Prop({ mutable: true }) selectedValue: string | null;\n @Prop({ mutable: true }) selectedLabel: string | null;\n\n /**\n * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n */\n @Prop() options!: string | Array<{ label: string; value: string }>;\n @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n /**\n * Must match background of containing element, or unintended shape will appear.\n */\n @Prop() backgroundColour: 'white' | 'grey';\n\n @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n /**\n * ID for the select element, used by a label. If not passed then a random id will be generated.\n */\n @Prop() selectElementId: string | undefined;\n\n private doOptionSelectCompletedHandler = (event: any) => {\n const value = event.target.value;\n this.selectedValue = value;\n this.selectedLabel = event.target.label;\n this.selectionChanged(value);\n };\n\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n\n /**\n * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\n */\n @Prop() placeholder: string | undefined;\n\n render() {\n const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n let options = this.formatOptions(this.options);\n\n if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n }\n\n if (typeof options === 'undefined') {\n console.error('options undefined');\n options = [];\n }\n // Give the select a random id so we can reference it from a label\n const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n return (\n <div class=\"selectWrapper\">\n <label class={greyIfRequired} htmlFor={selectId}>\n <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n </label>\n <div\n class={\n 'dropdown space-below-' +\n this.spaceBelow +\n ' select-style-' +\n this.selectStyle +\n (this.prompt === null ? ' noprompt' : '') +\n (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n }\n >\n <div class=\"sleeve\">\n <select id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\n {options.map(option => (\n <option selected={this.selectedValue === option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n <div class=\"arrow\"></div>\n </div>\n </div>\n </div>\n );\n }\n\n private formatOptions(options: string | Array<{ label: string; value: string }>): {\n label: string;\n value: string;\n }[] {\n if (options === undefined) {\n return [];\n }\n\n if (typeof options === 'string') {\n options = JSON.parse(options);\n }\n\n if (Array.isArray(options)) {\n return options;\n }\n\n return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n }\n\n private getRandomInt(): number {\n const min = 1_000_000;\n const max = 9_999_999;\n return Math.floor(Math.random() * (max - min) + min);\n }\n}\n"],"names":["h"],"mappings":"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"}
1
+ {"version":3,"file":"biggive-form-field-select.entry.cjs.js","sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n display: contents;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nselect {\n appearance: none;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n cursor: inherit;\n line-height: inherit;\n outline: none;\n display: grid;\n background-color: $colour-white;\n align-items: center;\n}\nselect.grey {\n background-color: $colour-grey-background;\n}\n.selectWrapper {\n position: relative;\n}\n.prompt {\n position: absolute;\n z-index: 2;\n font-size: small;\n top: -1em;\n background-color: $colour-white;\n left: 4em;\n padding-left: 1em;\n padding-right: 1em;\n color: $colour-primary-blue;\n}\n.prompt.grey {\n background-color: $colour-grey-background;\n}\n\n.dropdown {\n @include standard-font();\n position: relative;\n text-align: left;\n &.select-style-bordered {\n .sleeve {\n @include font-size-medium();\n padding: 2px;\n position: relative;\n background-color: $colour-primary-blue;\n @include corner-clip-small-top-right();\n select {\n color: $colour-primary-blue;\n display: block;\n position: relative;\n padding: 10px 80px 10px 10px;\n clip-path:\n polygon(\n 0% 0%, /* top left */\n 0% 0%, /* top left */\n calc(100% - 14px) 0%, /* top right */\n 100% 14px, /* top right */\n 100% 100%, /* bottom right */\n 100% 100%, /* bottom right */\n 0 100%, /* bottom left */\n 0 100% /* bottom left */\n );\n span.placeholder.grey {\n background-color: $colour-grey-background;\n }\n }\n div.arrow {\n position: absolute;\n right: 20px;\n top: 18px;\n width: 10px;\n height: 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n z-index: 1;\n pointer-events: none;\n }\n }\n .sleeve:focus-within {\n background-color: $colour-secondary-green;\n }\n }\n &.select-style-underlined {\n .sleeve {\n @include dropdown-underlined();\n }\n }\n &.inherit-colour select{\n color: inherit !important;\n }\n\n select {\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: scroll;\n width: 100%;\n z-index: 1;\n left: 0;\n right: 0;\n }\n &.active .options {\n display: block;\n }\n}\n.dropdown.noprompt {\n margin-top: 0;\n}\n.options.grey {\n background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'biggive-form-field-select',\n styleUrl: 'biggive-form-field-select.scss',\n shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n @Prop() selectionChanged: (value: string) => void;\n\n /**\n * Displayed as 'eyebrow' label over the top border of the box.\n */\n @Prop() prompt!: string | null;\n\n @Prop({ mutable: true }) selectedValue: string | null;\n @Prop({ mutable: true }) selectedLabel: string | null;\n\n /**\n * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n */\n @Prop() options!: string | Array<{ label: string; value: string }>;\n @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n /**\n * Must match background of containing element, or unintended shape will appear.\n */\n @Prop() backgroundColour: 'white' | 'grey';\n\n @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n /**\n * ID for the select element, used by a label. If not passed then a random id will be generated.\n */\n @Prop() selectElementId: string | undefined;\n\n private doOptionSelectCompletedHandler = (event: any) => {\n const value = event.target.value;\n this.selectedValue = value;\n this.selectedLabel = event.target.label;\n this.selectionChanged(value);\n };\n\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n\n /**\n * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\n */\n @Prop() placeholder: string | undefined;\n\n render() {\n const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n let options = this.formatOptions(this.options);\n\n if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n }\n\n if (typeof options === 'undefined') {\n console.error('options undefined');\n options = [];\n }\n // Give the select a random id so we can reference it from a label\n const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n return (\n <div class=\"selectWrapper\">\n <label class={greyIfRequired} htmlFor={selectId}>\n <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n </label>\n <div\n class={\n 'dropdown space-below-' +\n this.spaceBelow +\n ' select-style-' +\n this.selectStyle +\n (this.prompt === null ? ' noprompt' : '') +\n (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n }\n >\n <div class=\"sleeve\">\n <select id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\n {options.map(option => (\n <option selected={this.selectedValue === option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n <div class=\"arrow\"></div>\n </div>\n </div>\n </div>\n );\n }\n\n private formatOptions(options: string | Array<{ label: string; value: string }>): {\n label: string;\n value: string;\n }[] {\n if (options === undefined) {\n return [];\n }\n\n if (typeof options === 'string') {\n options = JSON.parse(options);\n }\n\n if (Array.isArray(options)) {\n return options;\n }\n\n return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n }\n\n private getRandomInt(): number {\n const min = 1_000_000;\n const max = 9_999_999;\n return Math.floor(Math.random() * (max - min) + min);\n }\n}\n"],"names":["h"],"mappings":"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"}
package/dist/collection/components/biggive-form-field-select/biggive-form-field-select.css CHANGED
@@ -156,7 +156,7 @@ select.grey {
156
156
  pointer-events: none;
157
157
  }
158
158
  .dropdown.select-style-bordered .sleeve:focus-within {
159
- background-color: #FF7272;
159
+ background-color: #2AF135;
160
160
  }
161
161
  .dropdown.select-style-underlined .sleeve {
162
162
  font-size: 17px;
package/dist/components/biggive-form-field-select2.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
2
 
3
- const biggiveFormFieldSelectCss = "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:#FF7272}.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}";
3
+ const biggiveFormFieldSelectCss = "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}";
4
4
 
5
5
  const BiggiveFormFieldSelect = /*@__PURE__*/ proxyCustomElement(class BiggiveFormFieldSelect extends HTMLElement {
6
6
  constructor(registerHost) {
package/dist/components/biggive-form-field-select2.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"biggive-form-field-select2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n display: contents;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nselect {\n appearance: none;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n cursor: inherit;\n line-height: inherit;\n outline: none;\n display: grid;\n background-color: $colour-white;\n align-items: center;\n}\nselect.grey {\n background-color: $colour-grey-background;\n}\n.selectWrapper {\n position: relative;\n}\n.prompt {\n position: absolute;\n z-index: 2;\n font-size: small;\n top: -1em;\n background-color: $colour-white;\n left: 4em;\n padding-left: 1em;\n padding-right: 1em;\n color: $colour-primary-blue;\n}\n.prompt.grey {\n background-color: $colour-grey-background;\n}\n\n.dropdown {\n @include standard-font();\n position: relative;\n text-align: left;\n &.select-style-bordered {\n .sleeve {\n @include font-size-medium();\n padding: 2px;\n position: relative;\n background-color: $colour-primary-blue;\n @include corner-clip-small-top-right();\n select {\n color: $colour-primary-blue;\n display: block;\n position: relative;\n padding: 10px 80px 10px 10px;\n clip-path:\n polygon(\n 0% 0%, /* top left */\n 0% 0%, /* top left */\n calc(100% - 14px) 0%, /* top right */\n 100% 14px, /* top right */\n 100% 100%, /* bottom right */\n 100% 100%, /* bottom right */\n 0 100%, /* bottom left */\n 0 100% /* bottom left */\n );\n span.placeholder.grey {\n background-color: $colour-grey-background;\n }\n }\n div.arrow {\n position: absolute;\n right: 20px;\n top: 18px;\n width: 10px;\n height: 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n z-index: 1;\n pointer-events: none;\n }\n }\n .sleeve:focus-within {\n background-color: $colour-tertiary-coral;\n }\n }\n &.select-style-underlined {\n .sleeve {\n @include dropdown-underlined();\n }\n }\n &.inherit-colour select{\n color: inherit !important;\n }\n\n select {\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: scroll;\n width: 100%;\n z-index: 1;\n left: 0;\n right: 0;\n }\n &.active .options {\n display: block;\n }\n}\n.dropdown.noprompt {\n margin-top: 0;\n}\n.options.grey {\n background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'biggive-form-field-select',\n styleUrl: 'biggive-form-field-select.scss',\n shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n @Prop() selectionChanged: (value: string) => void;\n\n /**\n * Displayed as 'eyebrow' label over the top border of the box.\n */\n @Prop() prompt!: string | null;\n\n @Prop({ mutable: true }) selectedValue: string | null;\n @Prop({ mutable: true }) selectedLabel: string | null;\n\n /**\n * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n */\n @Prop() options!: string | Array<{ label: string; value: string }>;\n @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n /**\n * Must match background of containing element, or unintended shape will appear.\n */\n @Prop() backgroundColour: 'white' | 'grey';\n\n @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n /**\n * ID for the select element, used by a label. If not passed then a random id will be generated.\n */\n @Prop() selectElementId: string | undefined;\n\n private doOptionSelectCompletedHandler = (event: any) => {\n const value = event.target.value;\n this.selectedValue = value;\n this.selectedLabel = event.target.label;\n this.selectionChanged(value);\n };\n\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n\n /**\n * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\n */\n @Prop() placeholder: string | undefined;\n\n render() {\n const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n let options = this.formatOptions(this.options);\n\n if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n }\n\n if (typeof options === 'undefined') {\n console.error('options undefined');\n options = [];\n }\n // Give the select a random id so we can reference it from a label\n const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n return (\n <div class=\"selectWrapper\">\n <label class={greyIfRequired} htmlFor={selectId}>\n <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n </label>\n <div\n class={\n 'dropdown space-below-' +\n this.spaceBelow +\n ' select-style-' +\n this.selectStyle +\n (this.prompt === null ? ' noprompt' : '') +\n (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n }\n >\n <div class=\"sleeve\">\n <select id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\n {options.map(option => (\n <option selected={this.selectedValue === option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n <div class=\"arrow\"></div>\n </div>\n </div>\n </div>\n );\n }\n\n private formatOptions(options: string | Array<{ label: string; value: string }>): {\n label: string;\n value: string;\n }[] {\n if (options === undefined) {\n return [];\n }\n\n if (typeof options === 'string') {\n options = JSON.parse(options);\n }\n\n if (Array.isArray(options)) {\n return options;\n }\n\n return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n }\n\n private getRandomInt(): number {\n const min = 1_000_000;\n const max = 9_999_999;\n return Math.floor(Math.random() * (max - min) + min);\n }\n}\n"],"version":3}
1
+ {"file":"biggive-form-field-select2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n display: contents;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nselect {\n appearance: none;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n cursor: inherit;\n line-height: inherit;\n outline: none;\n display: grid;\n background-color: $colour-white;\n align-items: center;\n}\nselect.grey {\n background-color: $colour-grey-background;\n}\n.selectWrapper {\n position: relative;\n}\n.prompt {\n position: absolute;\n z-index: 2;\n font-size: small;\n top: -1em;\n background-color: $colour-white;\n left: 4em;\n padding-left: 1em;\n padding-right: 1em;\n color: $colour-primary-blue;\n}\n.prompt.grey {\n background-color: $colour-grey-background;\n}\n\n.dropdown {\n @include standard-font();\n position: relative;\n text-align: left;\n &.select-style-bordered {\n .sleeve {\n @include font-size-medium();\n padding: 2px;\n position: relative;\n background-color: $colour-primary-blue;\n @include corner-clip-small-top-right();\n select {\n color: $colour-primary-blue;\n display: block;\n position: relative;\n padding: 10px 80px 10px 10px;\n clip-path:\n polygon(\n 0% 0%, /* top left */\n 0% 0%, /* top left */\n calc(100% - 14px) 0%, /* top right */\n 100% 14px, /* top right */\n 100% 100%, /* bottom right */\n 100% 100%, /* bottom right */\n 0 100%, /* bottom left */\n 0 100% /* bottom left */\n );\n span.placeholder.grey {\n background-color: $colour-grey-background;\n }\n }\n div.arrow {\n position: absolute;\n right: 20px;\n top: 18px;\n width: 10px;\n height: 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n z-index: 1;\n pointer-events: none;\n }\n }\n .sleeve:focus-within {\n background-color: $colour-secondary-green;\n }\n }\n &.select-style-underlined {\n .sleeve {\n @include dropdown-underlined();\n }\n }\n &.inherit-colour select{\n color: inherit !important;\n }\n\n select {\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: scroll;\n width: 100%;\n z-index: 1;\n left: 0;\n right: 0;\n }\n &.active .options {\n display: block;\n }\n}\n.dropdown.noprompt {\n margin-top: 0;\n}\n.options.grey {\n background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'biggive-form-field-select',\n styleUrl: 'biggive-form-field-select.scss',\n shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n @Prop() selectionChanged: (value: string) => void;\n\n /**\n * Displayed as 'eyebrow' label over the top border of the box.\n */\n @Prop() prompt!: string | null;\n\n @Prop({ mutable: true }) selectedValue: string | null;\n @Prop({ mutable: true }) selectedLabel: string | null;\n\n /**\n * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n */\n @Prop() options!: string | Array<{ label: string; value: string }>;\n @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n /**\n * Must match background of containing element, or unintended shape will appear.\n */\n @Prop() backgroundColour: 'white' | 'grey';\n\n @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n /**\n * ID for the select element, used by a label. If not passed then a random id will be generated.\n */\n @Prop() selectElementId: string | undefined;\n\n private doOptionSelectCompletedHandler = (event: any) => {\n const value = event.target.value;\n this.selectedValue = value;\n this.selectedLabel = event.target.label;\n this.selectionChanged(value);\n };\n\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n\n /**\n * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\n */\n @Prop() placeholder: string | undefined;\n\n render() {\n const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n let options = this.formatOptions(this.options);\n\n if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n }\n\n if (typeof options === 'undefined') {\n console.error('options undefined');\n options = [];\n }\n // Give the select a random id so we can reference it from a label\n const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n return (\n <div class=\"selectWrapper\">\n <label class={greyIfRequired} htmlFor={selectId}>\n <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n </label>\n <div\n class={\n 'dropdown space-below-' +\n this.spaceBelow +\n ' select-style-' +\n this.selectStyle +\n (this.prompt === null ? ' noprompt' : '') +\n (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n }\n >\n <div class=\"sleeve\">\n <select id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\n {options.map(option => (\n <option selected={this.selectedValue === option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n <div class=\"arrow\"></div>\n </div>\n </div>\n </div>\n );\n }\n\n private formatOptions(options: string | Array<{ label: string; value: string }>): {\n label: string;\n value: string;\n }[] {\n if (options === undefined) {\n return [];\n }\n\n if (typeof options === 'string') {\n options = JSON.parse(options);\n }\n\n if (Array.isArray(options)) {\n return options;\n }\n\n return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n }\n\n private getRandomInt(): number {\n const min = 1_000_000;\n const max = 9_999_999;\n return Math.floor(Math.random() * (max - min) + min);\n }\n}\n"],"version":3}
package/dist/esm/biggive-form-field-select.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, h, g as getElement } from './index-CTC1TIdr.js';
2
2
 
3
- const biggiveFormFieldSelectCss = "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:#FF7272}.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}";
3
+ const biggiveFormFieldSelectCss = "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}";
4
4
 
5
5
  const BiggiveFormFieldSelect = class {
6
6
  constructor(hostRef) {
package/dist/esm/biggive-form-field-select.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"biggive-form-field-select.entry.js","sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n display: contents;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nselect {\n appearance: none;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n cursor: inherit;\n line-height: inherit;\n outline: none;\n display: grid;\n background-color: $colour-white;\n align-items: center;\n}\nselect.grey {\n background-color: $colour-grey-background;\n}\n.selectWrapper {\n position: relative;\n}\n.prompt {\n position: absolute;\n z-index: 2;\n font-size: small;\n top: -1em;\n background-color: $colour-white;\n left: 4em;\n padding-left: 1em;\n padding-right: 1em;\n color: $colour-primary-blue;\n}\n.prompt.grey {\n background-color: $colour-grey-background;\n}\n\n.dropdown {\n @include standard-font();\n position: relative;\n text-align: left;\n &.select-style-bordered {\n .sleeve {\n @include font-size-medium();\n padding: 2px;\n position: relative;\n background-color: $colour-primary-blue;\n @include corner-clip-small-top-right();\n select {\n color: $colour-primary-blue;\n display: block;\n position: relative;\n padding: 10px 80px 10px 10px;\n clip-path:\n polygon(\n 0% 0%, /* top left */\n 0% 0%, /* top left */\n calc(100% - 14px) 0%, /* top right */\n 100% 14px, /* top right */\n 100% 100%, /* bottom right */\n 100% 100%, /* bottom right */\n 0 100%, /* bottom left */\n 0 100% /* bottom left */\n );\n span.placeholder.grey {\n background-color: $colour-grey-background;\n }\n }\n div.arrow {\n position: absolute;\n right: 20px;\n top: 18px;\n width: 10px;\n height: 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n z-index: 1;\n pointer-events: none;\n }\n }\n .sleeve:focus-within {\n background-color: $colour-tertiary-coral;\n }\n }\n &.select-style-underlined {\n .sleeve {\n @include dropdown-underlined();\n }\n }\n &.inherit-colour select{\n color: inherit !important;\n }\n\n select {\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: scroll;\n width: 100%;\n z-index: 1;\n left: 0;\n right: 0;\n }\n &.active .options {\n display: block;\n }\n}\n.dropdown.noprompt {\n margin-top: 0;\n}\n.options.grey {\n background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'biggive-form-field-select',\n styleUrl: 'biggive-form-field-select.scss',\n shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n @Prop() selectionChanged: (value: string) => void;\n\n /**\n * Displayed as 'eyebrow' label over the top border of the box.\n */\n @Prop() prompt!: string | null;\n\n @Prop({ mutable: true }) selectedValue: string | null;\n @Prop({ mutable: true }) selectedLabel: string | null;\n\n /**\n * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n */\n @Prop() options!: string | Array<{ label: string; value: string }>;\n @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n /**\n * Must match background of containing element, or unintended shape will appear.\n */\n @Prop() backgroundColour: 'white' | 'grey';\n\n @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n /**\n * ID for the select element, used by a label. If not passed then a random id will be generated.\n */\n @Prop() selectElementId: string | undefined;\n\n private doOptionSelectCompletedHandler = (event: any) => {\n const value = event.target.value;\n this.selectedValue = value;\n this.selectedLabel = event.target.label;\n this.selectionChanged(value);\n };\n\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n\n /**\n * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\n */\n @Prop() placeholder: string | undefined;\n\n render() {\n const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n let options = this.formatOptions(this.options);\n\n if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n }\n\n if (typeof options === 'undefined') {\n console.error('options undefined');\n options = [];\n }\n // Give the select a random id so we can reference it from a label\n const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n return (\n <div class=\"selectWrapper\">\n <label class={greyIfRequired} htmlFor={selectId}>\n <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n </label>\n <div\n class={\n 'dropdown space-below-' +\n this.spaceBelow +\n ' select-style-' +\n this.selectStyle +\n (this.prompt === null ? ' noprompt' : '') +\n (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n }\n >\n <div class=\"sleeve\">\n <select id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\n {options.map(option => (\n <option selected={this.selectedValue === option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n <div class=\"arrow\"></div>\n </div>\n </div>\n </div>\n );\n }\n\n private formatOptions(options: string | Array<{ label: string; value: string }>): {\n label: string;\n value: string;\n }[] {\n if (options === undefined) {\n return [];\n }\n\n if (typeof options === 'string') {\n options = JSON.parse(options);\n }\n\n if (Array.isArray(options)) {\n return options;\n }\n\n return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n }\n\n private getRandomInt(): number {\n const min = 1_000_000;\n const max = 9_999_999;\n return Math.floor(Math.random() * (max - min) + min);\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"biggive-form-field-select.entry.js","sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n display: contents;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nselect {\n appearance: none;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n cursor: inherit;\n line-height: inherit;\n outline: none;\n display: grid;\n background-color: $colour-white;\n align-items: center;\n}\nselect.grey {\n background-color: $colour-grey-background;\n}\n.selectWrapper {\n position: relative;\n}\n.prompt {\n position: absolute;\n z-index: 2;\n font-size: small;\n top: -1em;\n background-color: $colour-white;\n left: 4em;\n padding-left: 1em;\n padding-right: 1em;\n color: $colour-primary-blue;\n}\n.prompt.grey {\n background-color: $colour-grey-background;\n}\n\n.dropdown {\n @include standard-font();\n position: relative;\n text-align: left;\n &.select-style-bordered {\n .sleeve {\n @include font-size-medium();\n padding: 2px;\n position: relative;\n background-color: $colour-primary-blue;\n @include corner-clip-small-top-right();\n select {\n color: $colour-primary-blue;\n display: block;\n position: relative;\n padding: 10px 80px 10px 10px;\n clip-path:\n polygon(\n 0% 0%, /* top left */\n 0% 0%, /* top left */\n calc(100% - 14px) 0%, /* top right */\n 100% 14px, /* top right */\n 100% 100%, /* bottom right */\n 100% 100%, /* bottom right */\n 0 100%, /* bottom left */\n 0 100% /* bottom left */\n );\n span.placeholder.grey {\n background-color: $colour-grey-background;\n }\n }\n div.arrow {\n position: absolute;\n right: 20px;\n top: 18px;\n width: 10px;\n height: 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n z-index: 1;\n pointer-events: none;\n }\n }\n .sleeve:focus-within {\n background-color: $colour-secondary-green;\n }\n }\n &.select-style-underlined {\n .sleeve {\n @include dropdown-underlined();\n }\n }\n &.inherit-colour select{\n color: inherit !important;\n }\n\n select {\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: scroll;\n width: 100%;\n z-index: 1;\n left: 0;\n right: 0;\n }\n &.active .options {\n display: block;\n }\n}\n.dropdown.noprompt {\n margin-top: 0;\n}\n.options.grey {\n background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'biggive-form-field-select',\n styleUrl: 'biggive-form-field-select.scss',\n shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n @Prop() selectionChanged: (value: string) => void;\n\n /**\n * Displayed as 'eyebrow' label over the top border of the box.\n */\n @Prop() prompt!: string | null;\n\n @Prop({ mutable: true }) selectedValue: string | null;\n @Prop({ mutable: true }) selectedLabel: string | null;\n\n /**\n * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n */\n @Prop() options!: string | Array<{ label: string; value: string }>;\n @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n /**\n * Must match background of containing element, or unintended shape will appear.\n */\n @Prop() backgroundColour: 'white' | 'grey';\n\n @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n /**\n * ID for the select element, used by a label. If not passed then a random id will be generated.\n */\n @Prop() selectElementId: string | undefined;\n\n private doOptionSelectCompletedHandler = (event: any) => {\n const value = event.target.value;\n this.selectedValue = value;\n this.selectedLabel = event.target.label;\n this.selectionChanged(value);\n };\n\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n\n /**\n * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\n */\n @Prop() placeholder: string | undefined;\n\n render() {\n const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n let options = this.formatOptions(this.options);\n\n if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n }\n\n if (typeof options === 'undefined') {\n console.error('options undefined');\n options = [];\n }\n // Give the select a random id so we can reference it from a label\n const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n return (\n <div class=\"selectWrapper\">\n <label class={greyIfRequired} htmlFor={selectId}>\n <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n </label>\n <div\n class={\n 'dropdown space-below-' +\n this.spaceBelow +\n ' select-style-' +\n this.selectStyle +\n (this.prompt === null ? ' noprompt' : '') +\n (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n }\n >\n <div class=\"sleeve\">\n <select id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\n {options.map(option => (\n <option selected={this.selectedValue === option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n <div class=\"arrow\"></div>\n </div>\n </div>\n </div>\n );\n }\n\n private formatOptions(options: string | Array<{ label: string; value: string }>): {\n label: string;\n value: string;\n }[] {\n if (options === undefined) {\n return [];\n }\n\n if (typeof options === 'string') {\n options = JSON.parse(options);\n }\n\n if (Array.isArray(options)) {\n return options;\n }\n\n return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n }\n\n private getRandomInt(): number {\n const min = 1_000_000;\n const max = 9_999_999;\n return Math.floor(Math.random() * (max - min) + min);\n }\n}\n"],"names":[],"mappings":"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"}
package/hydrate/index.js CHANGED
@@ -4522,7 +4522,7 @@ class BiggiveForm {
4522
4522
  }; }
4523
4523
  }
4524
4524
 
4525
- const biggiveFormFieldSelectCss = "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:#FF7272}.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}";
4525
+ const biggiveFormFieldSelectCss = "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}";
4526
4526
 
4527
4527
  class BiggiveFormFieldSelect {
4528
4528
  constructor(hostRef) {
package/hydrate/index.mjs CHANGED
@@ -4520,7 +4520,7 @@ class BiggiveForm {
4520
4520
  }; }
4521
4521
  }
4522
4522
 
4523
- const biggiveFormFieldSelectCss = "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:#FF7272}.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}";
4523
+ const biggiveFormFieldSelectCss = "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}";
4524
4524
 
4525
4525
  class BiggiveFormFieldSelect {
4526
4526
  constructor(hostRef) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@biggive/components",
3
3
  "_comment": "Version number below is automatically replaced during CircleCI build.",
4
- "version": "202511061541.0.0",
4
+ "version": "202511061628.0.0",
5
5
  "description": "Big Give Components",
6
6
  "main": "dist/index.cjs.js",
7
7
  "module": "dist/index.js",