@biggive/components 202505090941.0.0 → 202505091548.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.
- package/dist/biggive/biggive.esm.js +1 -1
- package/dist/biggive/{p-9478552c.entry.js → p-1848da97.entry.js} +2 -2
- package/dist/biggive/{p-9478552c.entry.js.map → p-1848da97.entry.js.map} +1 -1
- package/dist/cjs/biggive-form-field-select.cjs.entry.js +2 -2
- package/dist/cjs/biggive-form-field-select.cjs.entry.js.map +1 -1
- package/dist/collection/components/biggive-form-field-select/biggive-form-field-select.js +3 -3
- package/dist/collection/components/biggive-form-field-select/biggive-form-field-select.js.map +1 -1
- package/dist/components/biggive-form-field-select2.js +2 -2
- package/dist/components/biggive-form-field-select2.js.map +1 -1
- package/dist/esm/biggive-form-field-select.entry.js +2 -2
- package/dist/esm/biggive-form-field-select.entry.js.map +1 -1
- package/dist/types/components/biggive-form-field-select/biggive-form-field-select.d.ts +1 -1
- package/dist/types/components.d.ts +2 -2
- package/hydrate/index.js +2 -2
- package/hydrate/index.mjs +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as o,b as t}from"./p-0cedd560.js";export{s as setNonce}from"./p-0cedd560.js";import{g as l}from"./p-e1255160.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-df065ff2",[[1,"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-f08e0727",[[1,"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-aab8f046",[[1,"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-2da84e16",[[1,"biggive-cookie-banner",{"autoOpenPreferences":[4,"auto-open-preferences"],"blogUriPrefix":[1,"blog-uri-prefix"],"previouslyAgreedCookiePreferences":[16]},null,{"autoOpenPreferences":["autoOpenPreferencesIfRequested"]}]]],["p-d98b6c81",[[1,"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-68b98a75",[[1,"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-c43aea6d",[[1,"philco-main-menu",{"philcoUrlPrefix":[1,"philco-url-prefix"],"closeMobileMenuFromOutside":[64]}]]],["p-883d3a3c",[[1,"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-a6618470",[[1,"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-ba0197ba",[[1,"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-dedeb4ae",[[1,"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-cfebc5f1",[[1,"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-2b97a6f0",[[1,"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-6a039368",[[1,"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-7c70d1a6",[[1,"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-72ea7015",[[1,"biggive-accordion",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"headingColour":[1,"heading-colour"],"children":[32]}]]],["p-6b3f32c3",[[1,"biggive-accordion-entry",{"heading":[1]}]]],["p-7cd24c41",[[1,"biggive-back-to-top"]]],["p-4473537b",[[1,"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-a043051c",[[1,"biggive-boxed-content",{"spaceBelow":[2,"space-below"],"verticalPadding":[2,"vertical-padding"],"horizontalPadding":[2,"horizontal-padding"],"backgroundColour":[1,"background-colour"],"shadow":[4]}]]],["p-5b017f33",[[1,"biggive-branded-image",{"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"logoUrl":[1,"logo-url"],"slug":[1],"charityName":[1,"charity-name"],"charityLocation":[1,"charity-location"],"charityUrl":[1,"charity-url"]}]]],["p-a1e95602",[[1,"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-38677249",[[1,"biggive-form"]]],["p-40733744",[[1,"biggive-formatted-text",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"maxWidth":[2,"max-width"],"siteDesign":[1,"site-design"]}]]],["p-1fcfd985",[[1,"biggive-grid",{"spaceBelow":[2,"space-below"],"columnCount":[2,"column-count"],"spaceBetween":[4,"space-between"],"columnGap":[2,"column-gap"]}]]],["p-04faad55",[[1,"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-6982fdc0",[[1,"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-f427dabd",[[1,"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-d0c80568",[[1,"biggive-nav-group",{"inline":[4]}]]],["p-e547c90c",[[1,"biggive-nav-item",{"url":[1],"label":[1],"iconColour":[1,"icon-colour"]}]]],["p-090da850",[[1,"biggive-page-column"]]],["p-e8b85033",[[1,"biggive-page-columns",{"spaceBelow":[2,"space-below"]}]]],["p-6ba62ccb",[[1,"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-d51d056a",[[1,"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-6c7d1090",[[1,"biggive-sheet",{"sheetId":[1,"sheet-id"],"backgroundColour":[1,"background-colour"],"textColour":[1,"text-colour"]}]]],["p-2df44aa5",[[1,"biggive-tab",{"tabTitle":[1,"tab-title"]}]]],["p-f5074301",[[1,"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-48d7e762",[[1,"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-c14c3d1e",[[1,"biggive-text-input",{"value":[1],"currency":[1],"spaceBelow":[2,"space-below"],"selectStyle":[1,"select-style"],"siteDesign":[1,"site-design"]}]]],["p-71fe5573",[[1,"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-2a46a00c",[[1,"biggive-timeline-entry",{"date":[1],"heading":[1]}]]],["p-671ff619",[[1,"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-3d817748",[[1,"biggive-totalizer-ticker-item",{"figure":[1],"label":[1]}]]],["p-41621756",[[1,"biggive-video",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"videoUrl":[1,"video-url"]}]]],["p-5ffdc6e2",[[1,"philco-footer",{"headingLevel":[2,"heading-level"],"philcoUrlPrefix":[1,"philco-url-prefix"]}]]],["p-9478552c",[[1,"biggive-form-field-select",{"selectionChanged":[16],"prompt":[1],"selectedValue":[1025,"selected-value"],"selectedLabel":[1025,"selected-label"],"options":[1],"selectStyle":[1,"select-style"],"backgroundColour":[1,"background-colour"],"selectedOptionColour":[1,"selected-option-colour"],"spaceBelow":[2,"space-below"],"placeholder":[1]}]]],["p-6dd1dfc1",[[1,"biggive-popup",{"modalClosedCallback":[16],"openFromOutside":[64],"closeFromOutside":[64]}]]],["p-2ac73719",[[1,"biggive-progress-bar",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"counter":[2]}]]],["p-bf6c495e",[[1,"biggive-social-icon",{"service":[1],"labelPrefix":[1,"label-prefix"],"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"wide":[4],"url":[1]}]]],["p-60e5f77e",[[1,"biggive-misc-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"url":[1]}]]],["p-44e3c2f9",[[1,"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-0cedd560.js";export{s as setNonce}from"./p-0cedd560.js";import{g as l}from"./p-e1255160.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-df065ff2",[[1,"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-f08e0727",[[1,"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-aab8f046",[[1,"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-2da84e16",[[1,"biggive-cookie-banner",{"autoOpenPreferences":[4,"auto-open-preferences"],"blogUriPrefix":[1,"blog-uri-prefix"],"previouslyAgreedCookiePreferences":[16]},null,{"autoOpenPreferences":["autoOpenPreferencesIfRequested"]}]]],["p-d98b6c81",[[1,"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-68b98a75",[[1,"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-c43aea6d",[[1,"philco-main-menu",{"philcoUrlPrefix":[1,"philco-url-prefix"],"closeMobileMenuFromOutside":[64]}]]],["p-883d3a3c",[[1,"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-a6618470",[[1,"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-ba0197ba",[[1,"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-dedeb4ae",[[1,"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-cfebc5f1",[[1,"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-2b97a6f0",[[1,"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-6a039368",[[1,"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-7c70d1a6",[[1,"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-72ea7015",[[1,"biggive-accordion",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"headingColour":[1,"heading-colour"],"children":[32]}]]],["p-6b3f32c3",[[1,"biggive-accordion-entry",{"heading":[1]}]]],["p-7cd24c41",[[1,"biggive-back-to-top"]]],["p-4473537b",[[1,"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-a043051c",[[1,"biggive-boxed-content",{"spaceBelow":[2,"space-below"],"verticalPadding":[2,"vertical-padding"],"horizontalPadding":[2,"horizontal-padding"],"backgroundColour":[1,"background-colour"],"shadow":[4]}]]],["p-5b017f33",[[1,"biggive-branded-image",{"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"logoUrl":[1,"logo-url"],"slug":[1],"charityName":[1,"charity-name"],"charityLocation":[1,"charity-location"],"charityUrl":[1,"charity-url"]}]]],["p-a1e95602",[[1,"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-38677249",[[1,"biggive-form"]]],["p-40733744",[[1,"biggive-formatted-text",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"maxWidth":[2,"max-width"],"siteDesign":[1,"site-design"]}]]],["p-1fcfd985",[[1,"biggive-grid",{"spaceBelow":[2,"space-below"],"columnCount":[2,"column-count"],"spaceBetween":[4,"space-between"],"columnGap":[2,"column-gap"]}]]],["p-04faad55",[[1,"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-6982fdc0",[[1,"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-f427dabd",[[1,"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-d0c80568",[[1,"biggive-nav-group",{"inline":[4]}]]],["p-e547c90c",[[1,"biggive-nav-item",{"url":[1],"label":[1],"iconColour":[1,"icon-colour"]}]]],["p-090da850",[[1,"biggive-page-column"]]],["p-e8b85033",[[1,"biggive-page-columns",{"spaceBelow":[2,"space-below"]}]]],["p-6ba62ccb",[[1,"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-d51d056a",[[1,"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-6c7d1090",[[1,"biggive-sheet",{"sheetId":[1,"sheet-id"],"backgroundColour":[1,"background-colour"],"textColour":[1,"text-colour"]}]]],["p-2df44aa5",[[1,"biggive-tab",{"tabTitle":[1,"tab-title"]}]]],["p-f5074301",[[1,"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-48d7e762",[[1,"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-c14c3d1e",[[1,"biggive-text-input",{"value":[1],"currency":[1],"spaceBelow":[2,"space-below"],"selectStyle":[1,"select-style"],"siteDesign":[1,"site-design"]}]]],["p-71fe5573",[[1,"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-2a46a00c",[[1,"biggive-timeline-entry",{"date":[1],"heading":[1]}]]],["p-671ff619",[[1,"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-3d817748",[[1,"biggive-totalizer-ticker-item",{"figure":[1],"label":[1]}]]],["p-41621756",[[1,"biggive-video",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"videoUrl":[1,"video-url"]}]]],["p-5ffdc6e2",[[1,"philco-footer",{"headingLevel":[2,"heading-level"],"philcoUrlPrefix":[1,"philco-url-prefix"]}]]],["p-1848da97",[[1,"biggive-form-field-select",{"selectionChanged":[16],"prompt":[1],"selectedValue":[1025,"selected-value"],"selectedLabel":[1025,"selected-label"],"options":[1],"selectStyle":[1,"select-style"],"backgroundColour":[1,"background-colour"],"selectedOptionColour":[1,"selected-option-colour"],"spaceBelow":[2,"space-below"],"placeholder":[1]}]]],["p-6dd1dfc1",[[1,"biggive-popup",{"modalClosedCallback":[16],"openFromOutside":[64],"closeFromOutside":[64]}]]],["p-2ac73719",[[1,"biggive-progress-bar",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"counter":[2]}]]],["p-bf6c495e",[[1,"biggive-social-icon",{"service":[1],"labelPrefix":[1,"label-prefix"],"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"wide":[4],"url":[1]}]]],["p-60e5f77e",[[1,"biggive-misc-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"url":[1]}]]],["p-44e3c2f9",[[1,"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
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as o,g as i}from"./p-0cedd560.js";const t='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=t;const
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,h as o,g as i}from"./p-0cedd560.js";const t='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=t;const a=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 i=this.formatOptions(this.options);if(typeof this.placeholder==="string"&&typeof this.selectedValue!=="string"){i=[{value:"__placeholder__",label:this.placeholder},...i]}if(typeof i==="undefined"){console.error("options undefined");i=[]}return o("div",{key:"f086887b9e99a2a52f7f28fa6921e33a6da33093",class:"selectWrapper"},o("label",{key:"293828d55f4f7567b1bbe57c5c83c7c6ee90ce9d",class:e},o("div",{key:"ee67ad84b193866bdef6abf809a0783250627d52",class:"prompt"+e},this.prompt),o("div",{key:"2776d094ecfcd7e15431e448b23304c9aaa5f81d",class:"dropdown space-below-"+this.spaceBelow+" select-style-"+this.selectStyle+(this.prompt===null?" noprompt":"")+(this.selectedOptionColour==="inherit"?" inherit-colour":"")},o("div",{key:"c8a3571315514524d548faa48e261c04388cbb87",class:"sleeve"},o("select",{key:"6ef9d65d7297970b9c92d4066bf2b56c21fefc58",class:e,onChange:this.doOptionSelectCompletedHandler,"aria-label":this.prompt===null?this.placeholder:this.prompt},i.map((e=>o("option",{selected:this.selectedValue===e.value,value:e.value},e.label)))),o("div",{key:"485754c03676c10e71f6b0ec1575ec18cfa262c8",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]})))}get el(){return i(this)}};a.style=r;export{a as biggive_form_field_select};
|
|
2
|
+
//# sourceMappingURL=p-1848da97.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["biggiveFormFieldSelectCss","BiggiveFormFieldSelectStyle0","BiggiveFormFieldSelect","constructor","hostRef","this","selectStyle","selectedOptionColour","doOptionSelectCompletedHandler","event","value","target","selectedValue","selectedLabel","label","selectionChanged","spaceBelow","render","greyIfRequired","backgroundColour","options","formatOptions","placeholder","console","error","h","key","class","prompt","onChange","map","option","selected","undefined","JSON","parse","Array","isArray","Object","entries","entry"],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n display: contents;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nselect {\n appearance: none;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n cursor: inherit;\n line-height: inherit;\n outline: none;\n display: grid;\n background-color: $colour-white;\n align-items: center;\n}\nselect.grey {\n background-color: $colour-grey-background;\n}\n.selectWrapper {\n position: relative;\n}\n.prompt {\n position: absolute;\n z-index: 2;\n font-size: small;\n top: -1em;\n background-color: $colour-white;\n left: 4em;\n padding-left: 1em;\n padding-right: 1em;\n color: $colour-primary-blue;\n}\n.prompt.grey {\n background-color: $colour-grey-background;\n}\n\n.dropdown {\n @include standard-font();\n position: relative;\n text-align: left;\n &.select-style-bordered {\n .sleeve {\n @include font-size-medium();\n padding: 2px;\n position: relative;\n background-color: $colour-primary-blue;\n @include corner-clip-small-top-right();\n select {\n color: $colour-primary-blue;\n display: block;\n position: relative;\n padding: 10px 80px 10px 10px;\n clip-path:\n polygon(\n 0% 0%, /* top left */\n 0% 0%, /* top left */\n calc(100% - 14px) 0%, /* top right */\n 100% 14px, /* top right */\n 100% 100%, /* bottom right */\n 100% 100%, /* bottom right */\n 0 100%, /* bottom left */\n 0 100% /* bottom left */\n );\n span.placeholder.grey {\n background-color: $colour-grey-background;\n }\n }\n div.arrow {\n position: absolute;\n right: 20px;\n top: 18px;\n width: 10px;\n height: 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n z-index: 1;\n pointer-events: none;\n }\n }\n .sleeve:focus-within {\n background-color: $colour-tertiary-coral;\n }\n }\n &.select-style-underlined {\n .sleeve {\n @include dropdown-underlined();\n }\n }\n &.inherit-colour select{\n color: inherit !important;\n }\n\n select {\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: scroll;\n width: 100%;\n z-index: 1;\n left: 0;\n right: 0;\n }\n &.active .options {\n display: block;\n }\n}\n.dropdown.noprompt {\n margin-top: 0;\n}\n.options.grey {\n background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'biggive-form-field-select',\n styleUrl: 'biggive-form-field-select.scss',\n shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n @Prop() selectionChanged: (value: string) => void;\n\n /**\n * Displayed as 'eyebrow' label over the top border of the box.\n */\n @Prop() prompt!: string | null;\n\n @Prop({ mutable: true }) selectedValue: string | null;\n @Prop({ mutable: true }) selectedLabel: string | null;\n\n /**\n * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n */\n @Prop() options!: string | Array<{ label: string; value: string }>;\n @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n /**\n * Must match background of containing element, or unintended shape will appear.\n */\n @Prop() backgroundColour: 'white' | 'grey';\n\n @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n private doOptionSelectCompletedHandler = (event: any) => {\n const value = event.target.value;\n this.selectedValue = value;\n this.selectedLabel = event.target.label;\n this.selectionChanged(value);\n };\n\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n /**\n * Placeholder
|
|
1
|
+
{"version":3,"names":["biggiveFormFieldSelectCss","BiggiveFormFieldSelectStyle0","BiggiveFormFieldSelect","constructor","hostRef","this","selectStyle","selectedOptionColour","doOptionSelectCompletedHandler","event","value","target","selectedValue","selectedLabel","label","selectionChanged","spaceBelow","render","greyIfRequired","backgroundColour","options","formatOptions","placeholder","console","error","h","key","class","prompt","onChange","map","option","selected","undefined","JSON","parse","Array","isArray","Object","entries","entry"],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n display: contents;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nselect {\n appearance: none;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n cursor: inherit;\n line-height: inherit;\n outline: none;\n display: grid;\n background-color: $colour-white;\n align-items: center;\n}\nselect.grey {\n background-color: $colour-grey-background;\n}\n.selectWrapper {\n position: relative;\n}\n.prompt {\n position: absolute;\n z-index: 2;\n font-size: small;\n top: -1em;\n background-color: $colour-white;\n left: 4em;\n padding-left: 1em;\n padding-right: 1em;\n color: $colour-primary-blue;\n}\n.prompt.grey {\n background-color: $colour-grey-background;\n}\n\n.dropdown {\n @include standard-font();\n position: relative;\n text-align: left;\n &.select-style-bordered {\n .sleeve {\n @include font-size-medium();\n padding: 2px;\n position: relative;\n background-color: $colour-primary-blue;\n @include corner-clip-small-top-right();\n select {\n color: $colour-primary-blue;\n display: block;\n position: relative;\n padding: 10px 80px 10px 10px;\n clip-path:\n polygon(\n 0% 0%, /* top left */\n 0% 0%, /* top left */\n calc(100% - 14px) 0%, /* top right */\n 100% 14px, /* top right */\n 100% 100%, /* bottom right */\n 100% 100%, /* bottom right */\n 0 100%, /* bottom left */\n 0 100% /* bottom left */\n );\n span.placeholder.grey {\n background-color: $colour-grey-background;\n }\n }\n div.arrow {\n position: absolute;\n right: 20px;\n top: 18px;\n width: 10px;\n height: 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n z-index: 1;\n pointer-events: none;\n }\n }\n .sleeve:focus-within {\n background-color: $colour-tertiary-coral;\n }\n }\n &.select-style-underlined {\n .sleeve {\n @include dropdown-underlined();\n }\n }\n &.inherit-colour select{\n color: inherit !important;\n }\n\n select {\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: scroll;\n width: 100%;\n z-index: 1;\n left: 0;\n right: 0;\n }\n &.active .options {\n display: block;\n }\n}\n.dropdown.noprompt {\n margin-top: 0;\n}\n.options.grey {\n background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'biggive-form-field-select',\n styleUrl: 'biggive-form-field-select.scss',\n shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n @Prop() selectionChanged: (value: string) => void;\n\n /**\n * Displayed as 'eyebrow' label over the top border of the box.\n */\n @Prop() prompt!: string | null;\n\n @Prop({ mutable: true }) selectedValue: string | null;\n @Prop({ mutable: true }) selectedLabel: string | null;\n\n /**\n * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n */\n @Prop() options!: string | Array<{ label: string; value: string }>;\n @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n /**\n * Must match background of containing element, or unintended shape will appear.\n */\n @Prop() backgroundColour: 'white' | 'grey';\n\n @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n private doOptionSelectCompletedHandler = (event: any) => {\n const value = event.target.value;\n this.selectedValue = value;\n this.selectedLabel = event.target.label;\n this.selectionChanged(value);\n };\n\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n\n /**\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\n return (\n <div class=\"selectWrapper\">\n <label class={greyIfRequired}>\n <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n <div\n class={\n 'dropdown space-below-' +\n this.spaceBelow +\n ' select-style-' +\n this.selectStyle +\n (this.prompt === null ? ' noprompt' : '') +\n (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n }\n >\n <div class=\"sleeve\">\n <select class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} 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 </label>\n </div>\n );\n }\n\n private formatOptions(options: string | Array<{ label: string; value: string }>): {\n label: string;\n value: string;\n }[] {\n if (options === undefined) {\n return [];\n }\n\n if (typeof options === 'string') {\n options = JSON.parse(options);\n }\n\n if (Array.isArray(options)) {\n return options;\n }\n\n return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAA4B,0vHAClC,MAAAC,EAAeD,E,MCMFE,EAAsB,MALnC,WAAAC,CAAAC,G,UAsBUC,KAAAC,YAAyC,WAOzCD,KAAAE,qBAA2C,OAE3CF,KAAAG,+BAAkCC,IACxC,MAAMC,EAAQD,EAAME,OAAOD,MAC3BL,KAAKO,cAAgBF,EACrBL,KAAKQ,cAAgBJ,EAAME,OAAOG,MAClCT,KAAKU,iBAAiBL,EAAM,EAMtBL,KAAAW,WAAqB,C,CAO7B,MAAAC,GACE,MAAMC,EAAiBb,KAAKc,mBAAqB,OAAS,QAAU,GAEpE,IAAIC,EAAUf,KAAKgB,cAAchB,KAAKe,SAEtC,UAAWf,KAAKiB,cAAgB,iBAAmBjB,KAAKO,gBAAkB,SAAU,CAClFQ,EAAU,CAAC,CAAEV,MAAO,kBAAmBI,MAAOT,KAAKiB,gBAAkBF,E,CAGvE,UAAWA,IAAY,YAAa,CAClCG,QAAQC,MAAM,qBACdJ,EAAU,E,CAGZ,OACEK,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACTF,EAAA,SAAAC,IAAA,2CAAOC,MAAOT,GACZO,EAAA,OAAAC,IAAA,2CAAKC,MAAO,SAAWT,GAAiBb,KAAKuB,QAC7CH,EAAA,OAAAC,IAAA,2CACEC,MACE,wBACAtB,KAAKW,WACL,iBACAX,KAAKC,aACJD,KAAKuB,SAAW,KAAO,aAAe,KACtCvB,KAAKE,uBAAyB,UAAY,kBAAoB,KAGjEkB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,UACTF,EAAA,UAAAC,IAAA,2CAAQC,MAAOT,EAAgBW,SAAUxB,KAAKG,+BAA8B,aAAcH,KAAKuB,SAAW,KAAOvB,KAAKiB,YAAcjB,KAAKuB,QACtIR,EAAQU,KAAIC,GACXN,EAAA,UAAQO,SAAU3B,KAAKO,gBAAkBmB,EAAOrB,MAAOA,MAAOqB,EAAOrB,OAClEqB,EAAOjB,UAIdW,EAAA,OAAAC,IAAA,2CAAKC,MAAM,a,CAQf,aAAAN,CAAcD,GAIpB,GAAIA,IAAYa,UAAW,CACzB,MAAO,E,CAGT,UAAWb,IAAY,SAAU,CAC/BA,EAAUc,KAAKC,MAAMf,E,CAGvB,GAAIgB,MAAMC,QAAQjB,GAAU,CAC1B,OAAOA,C,CAGT,OAAOkB,OAAOC,QAAQnB,GAASU,KAAIU,IAAK,CAAO9B,MAAO8B,EAAM,GAAI1B,MAAO0B,EAAM,M","ignoreList":[]}
|
|
@@ -33,12 +33,12 @@ const BiggiveFormFieldSelect = class {
|
|
|
33
33
|
console.error('options undefined');
|
|
34
34
|
options = [];
|
|
35
35
|
}
|
|
36
|
-
return (index.h("div", { key: '
|
|
36
|
+
return (index.h("div", { key: 'f086887b9e99a2a52f7f28fa6921e33a6da33093', class: "selectWrapper" }, index.h("label", { key: '293828d55f4f7567b1bbe57c5c83c7c6ee90ce9d', class: greyIfRequired }, index.h("div", { key: 'ee67ad84b193866bdef6abf809a0783250627d52', class: 'prompt' + greyIfRequired }, this.prompt), index.h("div", { key: '2776d094ecfcd7e15431e448b23304c9aaa5f81d', class: 'dropdown space-below-' +
|
|
37
37
|
this.spaceBelow +
|
|
38
38
|
' select-style-' +
|
|
39
39
|
this.selectStyle +
|
|
40
40
|
(this.prompt === null ? ' noprompt' : '') +
|
|
41
|
-
(this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, index.h("div", { key: '
|
|
41
|
+
(this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, index.h("div", { key: 'c8a3571315514524d548faa48e261c04388cbb87', class: "sleeve" }, index.h("select", { key: '6ef9d65d7297970b9c92d4066bf2b56c21fefc58', class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler, "aria-label": this.prompt === null ? this.placeholder : this.prompt }, options.map(option => (index.h("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), index.h("div", { key: '485754c03676c10e71f6b0ec1575ec18cfa262c8', class: "arrow" }))))));
|
|
42
42
|
}
|
|
43
43
|
formatOptions(options) {
|
|
44
44
|
if (options === undefined) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"biggive-form-field-select.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,yBAAyB,GAAG,+vHAA+vH,CAAC;AAClyH,qCAAe,yBAAyB;;MCM3B,sBAAsB;IALnC;;QAsBU,gBAAW,GAA8B,UAAU,CAAC;QAOpD,yBAAoB,GAAuB,MAAM,CAAC;QAElD,mCAA8B,GAAG,CAAC,KAAU;YAClD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC;;;;QAKM,eAAU,GAAW,CAAC,CAAC;
|
|
1
|
+
{"file":"biggive-form-field-select.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,yBAAyB,GAAG,+vHAA+vH,CAAC;AAClyH,qCAAe,yBAAyB;;MCM3B,sBAAsB;IALnC;;QAsBU,gBAAW,GAA8B,UAAU,CAAC;QAOpD,yBAAoB,GAAuB,MAAM,CAAC;QAElD,mCAA8B,GAAG,CAAC,KAAU;YAClD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC;;;;QAKM,eAAU,GAAW,CAAC,CAAC;KAqEhC;IA9DC,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,KAAK,MAAM,GAAG,OAAO,GAAG,EAAE,CAAC;QAEvE,IAAI,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE/C,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;YAClF,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,OAAO,CAAC,CAAC;SAC/E;QAED,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE;YAClC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE,CAAC;SACd;QAED,QACEA,kEAAK,KAAK,EAAC,eAAe,IACxBA,oEAAO,KAAK,EAAE,cAAc,IAC1BA,kEAAK,KAAK,EAAE,QAAQ,GAAG,cAAc,IAAG,IAAI,CAAC,MAAM,CAAO,EAC1DA,kEACE,KAAK,EACH,uBAAuB;gBACvB,IAAI,CAAC,UAAU;gBACf,gBAAgB;gBAChB,IAAI,CAAC,WAAW;iBACf,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,YAAY,GAAG,EAAE,CAAC;iBACzC,IAAI,CAAC,oBAAoB,KAAK,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAC,IAGpEA,kEAAK,KAAK,EAAC,QAAQ,IACjBA,qEAAQ,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,8BAA8B,gBAAc,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,IAC5I,OAAO,CAAC,GAAG,CAAC,MAAM,KACjBA,oBAAQ,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IACvE,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,EACTA,kEAAK,KAAK,EAAC,OAAO,GAAO,CACrB,CACF,CACA,CACJ,EACN;KACH;IAEO,aAAa,CAAC,OAAyD;QAI7E,IAAI,OAAO,KAAK,SAAS,EAAE;YACzB,OAAO,EAAE,CAAC;SACX;QAED,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAC/B;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC1B,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KACrF;;;;;;;","names":["h"],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n display: contents;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nselect {\n appearance: none;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n cursor: inherit;\n line-height: inherit;\n outline: none;\n display: grid;\n background-color: $colour-white;\n align-items: center;\n}\nselect.grey {\n background-color: $colour-grey-background;\n}\n.selectWrapper {\n position: relative;\n}\n.prompt {\n position: absolute;\n z-index: 2;\n font-size: small;\n top: -1em;\n background-color: $colour-white;\n left: 4em;\n padding-left: 1em;\n padding-right: 1em;\n color: $colour-primary-blue;\n}\n.prompt.grey {\n background-color: $colour-grey-background;\n}\n\n.dropdown {\n @include standard-font();\n position: relative;\n text-align: left;\n &.select-style-bordered {\n .sleeve {\n @include font-size-medium();\n padding: 2px;\n position: relative;\n background-color: $colour-primary-blue;\n @include corner-clip-small-top-right();\n select {\n color: $colour-primary-blue;\n display: block;\n position: relative;\n padding: 10px 80px 10px 10px;\n clip-path:\n polygon(\n 0% 0%, /* top left */\n 0% 0%, /* top left */\n calc(100% - 14px) 0%, /* top right */\n 100% 14px, /* top right */\n 100% 100%, /* bottom right */\n 100% 100%, /* bottom right */\n 0 100%, /* bottom left */\n 0 100% /* bottom left */\n );\n span.placeholder.grey {\n background-color: $colour-grey-background;\n }\n }\n div.arrow {\n position: absolute;\n right: 20px;\n top: 18px;\n width: 10px;\n height: 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n z-index: 1;\n pointer-events: none;\n }\n }\n .sleeve:focus-within {\n background-color: $colour-tertiary-coral;\n }\n }\n &.select-style-underlined {\n .sleeve {\n @include dropdown-underlined();\n }\n }\n &.inherit-colour select{\n color: inherit !important;\n }\n\n select {\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: scroll;\n width: 100%;\n z-index: 1;\n left: 0;\n right: 0;\n }\n &.active .options {\n display: block;\n }\n}\n.dropdown.noprompt {\n margin-top: 0;\n}\n.options.grey {\n background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'biggive-form-field-select',\n styleUrl: 'biggive-form-field-select.scss',\n shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n @Prop() selectionChanged: (value: string) => void;\n\n /**\n * Displayed as 'eyebrow' label over the top border of the box.\n */\n @Prop() prompt!: string | null;\n\n @Prop({ mutable: true }) selectedValue: string | null;\n @Prop({ mutable: true }) selectedLabel: string | null;\n\n /**\n * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n */\n @Prop() options!: string | Array<{ label: string; value: string }>;\n @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n /**\n * Must match background of containing element, or unintended shape will appear.\n */\n @Prop() backgroundColour: 'white' | 'grey';\n\n @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n private doOptionSelectCompletedHandler = (event: any) => {\n const value = event.target.value;\n this.selectedValue = value;\n this.selectedLabel = event.target.label;\n this.selectionChanged(value);\n };\n\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n\n /**\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\n return (\n <div class=\"selectWrapper\">\n <label class={greyIfRequired}>\n <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n <div\n class={\n 'dropdown space-below-' +\n this.spaceBelow +\n ' select-style-' +\n this.selectStyle +\n (this.prompt === null ? ' noprompt' : '') +\n (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n }\n >\n <div class=\"sleeve\">\n <select class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} 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 </label>\n </div>\n );\n }\n\n private formatOptions(options: string | Array<{ label: string; value: string }>): {\n label: string;\n value: string;\n }[] {\n if (options === undefined) {\n return [];\n }\n\n if (typeof options === 'string') {\n options = JSON.parse(options);\n }\n\n if (Array.isArray(options)) {\n return options;\n }\n\n return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n }\n}\n"],"version":3}
|
|
@@ -24,12 +24,12 @@ export class BiggiveFormFieldSelect {
|
|
|
24
24
|
console.error('options undefined');
|
|
25
25
|
options = [];
|
|
26
26
|
}
|
|
27
|
-
return (h("div", { key: '
|
|
27
|
+
return (h("div", { key: 'f086887b9e99a2a52f7f28fa6921e33a6da33093', class: "selectWrapper" }, h("label", { key: '293828d55f4f7567b1bbe57c5c83c7c6ee90ce9d', class: greyIfRequired }, h("div", { key: 'ee67ad84b193866bdef6abf809a0783250627d52', class: 'prompt' + greyIfRequired }, this.prompt), h("div", { key: '2776d094ecfcd7e15431e448b23304c9aaa5f81d', class: 'dropdown space-below-' +
|
|
28
28
|
this.spaceBelow +
|
|
29
29
|
' select-style-' +
|
|
30
30
|
this.selectStyle +
|
|
31
31
|
(this.prompt === null ? ' noprompt' : '') +
|
|
32
|
-
(this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { key: '
|
|
32
|
+
(this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { key: 'c8a3571315514524d548faa48e261c04388cbb87', class: "sleeve" }, h("select", { key: '6ef9d65d7297970b9c92d4066bf2b56c21fefc58', class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler, "aria-label": this.prompt === null ? this.placeholder : this.prompt }, options.map(option => (h("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), h("div", { key: '485754c03676c10e71f6b0ec1575ec18cfa262c8', class: "arrow" }))))));
|
|
33
33
|
}
|
|
34
34
|
formatOptions(options) {
|
|
35
35
|
if (options === undefined) {
|
|
@@ -246,7 +246,7 @@ export class BiggiveFormFieldSelect {
|
|
|
246
246
|
"optional": false,
|
|
247
247
|
"docs": {
|
|
248
248
|
"tags": [],
|
|
249
|
-
"text": "Placeholder"
|
|
249
|
+
"text": "Placeholder. If there is no `prompt`, this should be a suitable ARIA label."
|
|
250
250
|
},
|
|
251
251
|
"getter": false,
|
|
252
252
|
"setter": false,
|
package/dist/collection/components/biggive-form-field-select/biggive-form-field-select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"biggive-form-field-select.js","sourceRoot":"","sources":["../../../src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAO5D,MAAM,OAAO,sBAAsB;IALnC;QAsBU,gBAAW,GAA8B,UAAU,CAAC;QAOpD,yBAAoB,GAAuB,MAAM,CAAC;QAElD,mCAA8B,GAAG,CAAC,KAAU,EAAE,EAAE;YACtD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEF;;WAEG;QACK,eAAU,GAAW,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"biggive-form-field-select.js","sourceRoot":"","sources":["../../../src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAO5D,MAAM,OAAO,sBAAsB;IALnC;QAsBU,gBAAW,GAA8B,UAAU,CAAC;QAOpD,yBAAoB,GAAuB,MAAM,CAAC;QAElD,mCAA8B,GAAG,CAAC,KAAU,EAAE,EAAE;YACtD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEF;;WAEG;QACK,eAAU,GAAW,CAAC,CAAC;KAqEhC;IA9DC,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;QAEvE,IAAI,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE/C,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE,CAAC;YACnF,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,OAAO,CAAC,CAAC;QAChF,CAAC;QAED,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE,CAAC;YACnC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE,CAAC;QACf,CAAC;QAED,OAAO,CACL,4DAAK,KAAK,EAAC,eAAe;YACxB,8DAAO,KAAK,EAAE,cAAc;gBAC1B,4DAAK,KAAK,EAAE,QAAQ,GAAG,cAAc,IAAG,IAAI,CAAC,MAAM,CAAO;gBAC1D,4DACE,KAAK,EACH,uBAAuB;wBACvB,IAAI,CAAC,UAAU;wBACf,gBAAgB;wBAChB,IAAI,CAAC,WAAW;wBAChB,CAAC,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;wBAC1C,CAAC,IAAI,CAAC,oBAAoB,KAAK,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;oBAGpE,4DAAK,KAAK,EAAC,QAAQ;wBACjB,+DAAQ,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,8BAA8B,gBAAc,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,IAC5I,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CACrB,cAAQ,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IACvE,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK;wBACT,4DAAK,KAAK,EAAC,OAAO,GAAO,CACrB,CACF,CACA,CACJ,CACP,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,OAAyD;QAI7E,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;YAC1B,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;YAChC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;YAC3B,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACtF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'biggive-form-field-select',\n styleUrl: 'biggive-form-field-select.scss',\n shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n @Prop() selectionChanged: (value: string) => void;\n\n /**\n * Displayed as 'eyebrow' label over the top border of the box.\n */\n @Prop() prompt!: string | null;\n\n @Prop({ mutable: true }) selectedValue: string | null;\n @Prop({ mutable: true }) selectedLabel: string | null;\n\n /**\n * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n */\n @Prop() options!: string | Array<{ label: string; value: string }>;\n @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n /**\n * Must match background of containing element, or unintended shape will appear.\n */\n @Prop() backgroundColour: 'white' | 'grey';\n\n @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n private doOptionSelectCompletedHandler = (event: any) => {\n const value = event.target.value;\n this.selectedValue = value;\n this.selectedLabel = event.target.label;\n this.selectionChanged(value);\n };\n\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n\n /**\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\n return (\n <div class=\"selectWrapper\">\n <label class={greyIfRequired}>\n <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n <div\n class={\n 'dropdown space-below-' +\n this.spaceBelow +\n ' select-style-' +\n this.selectStyle +\n (this.prompt === null ? ' noprompt' : '') +\n (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n }\n >\n <div class=\"sleeve\">\n <select class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} 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 </label>\n </div>\n );\n }\n\n private formatOptions(options: string | Array<{ label: string; value: string }>): {\n label: string;\n value: string;\n }[] {\n if (options === undefined) {\n return [];\n }\n\n if (typeof options === 'string') {\n options = JSON.parse(options);\n }\n\n if (Array.isArray(options)) {\n return options;\n }\n\n return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n }\n}\n"]}
|
|
@@ -31,12 +31,12 @@ const BiggiveFormFieldSelect = /*@__PURE__*/ proxyCustomElement(class BiggiveFor
|
|
|
31
31
|
console.error('options undefined');
|
|
32
32
|
options = [];
|
|
33
33
|
}
|
|
34
|
-
return (h("div", { key: '
|
|
34
|
+
return (h("div", { key: 'f086887b9e99a2a52f7f28fa6921e33a6da33093', class: "selectWrapper" }, h("label", { key: '293828d55f4f7567b1bbe57c5c83c7c6ee90ce9d', class: greyIfRequired }, h("div", { key: 'ee67ad84b193866bdef6abf809a0783250627d52', class: 'prompt' + greyIfRequired }, this.prompt), h("div", { key: '2776d094ecfcd7e15431e448b23304c9aaa5f81d', class: 'dropdown space-below-' +
|
|
35
35
|
this.spaceBelow +
|
|
36
36
|
' select-style-' +
|
|
37
37
|
this.selectStyle +
|
|
38
38
|
(this.prompt === null ? ' noprompt' : '') +
|
|
39
|
-
(this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { key: '
|
|
39
|
+
(this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { key: 'c8a3571315514524d548faa48e261c04388cbb87', class: "sleeve" }, h("select", { key: '6ef9d65d7297970b9c92d4066bf2b56c21fefc58', class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler, "aria-label": this.prompt === null ? this.placeholder : this.prompt }, options.map(option => (h("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), h("div", { key: '485754c03676c10e71f6b0ec1575ec18cfa262c8', class: "arrow" }))))));
|
|
40
40
|
}
|
|
41
41
|
formatOptions(options) {
|
|
42
42
|
if (options === undefined) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"biggive-form-field-select2.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,+vHAA+vH,CAAC;AAClyH,qCAAe,yBAAyB;;MCM3B,sBAAsB;IALnC;;;;QAsBU,gBAAW,GAA8B,UAAU,CAAC;QAOpD,yBAAoB,GAAuB,MAAM,CAAC;QAElD,mCAA8B,GAAG,CAAC,KAAU;YAClD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC;;;;QAKM,eAAU,GAAW,CAAC,CAAC;
|
|
1
|
+
{"file":"biggive-form-field-select2.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,+vHAA+vH,CAAC;AAClyH,qCAAe,yBAAyB;;MCM3B,sBAAsB;IALnC;;;;QAsBU,gBAAW,GAA8B,UAAU,CAAC;QAOpD,yBAAoB,GAAuB,MAAM,CAAC;QAElD,mCAA8B,GAAG,CAAC,KAAU;YAClD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC;;;;QAKM,eAAU,GAAW,CAAC,CAAC;KAqEhC;IA9DC,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,KAAK,MAAM,GAAG,OAAO,GAAG,EAAE,CAAC;QAEvE,IAAI,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE/C,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;YAClF,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,OAAO,CAAC,CAAC;SAC/E;QAED,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE;YAClC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE,CAAC;SACd;QAED,QACE,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAO,KAAK,EAAE,cAAc,IAC1B,4DAAK,KAAK,EAAE,QAAQ,GAAG,cAAc,IAAG,IAAI,CAAC,MAAM,CAAO,EAC1D,4DACE,KAAK,EACH,uBAAuB;gBACvB,IAAI,CAAC,UAAU;gBACf,gBAAgB;gBAChB,IAAI,CAAC,WAAW;iBACf,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,YAAY,GAAG,EAAE,CAAC;iBACzC,IAAI,CAAC,oBAAoB,KAAK,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAC,IAGpE,4DAAK,KAAK,EAAC,QAAQ,IACjB,+DAAQ,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,8BAA8B,gBAAc,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,IAC5I,OAAO,CAAC,GAAG,CAAC,MAAM,KACjB,cAAQ,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IACvE,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,EACT,4DAAK,KAAK,EAAC,OAAO,GAAO,CACrB,CACF,CACA,CACJ,EACN;KACH;IAEO,aAAa,CAAC,OAAyD;QAI7E,IAAI,OAAO,KAAK,SAAS,EAAE;YACzB,OAAO,EAAE,CAAC;SACX;QAED,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAC/B;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC1B,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KACrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n display: contents;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nselect {\n appearance: none;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n cursor: inherit;\n line-height: inherit;\n outline: none;\n display: grid;\n background-color: $colour-white;\n align-items: center;\n}\nselect.grey {\n background-color: $colour-grey-background;\n}\n.selectWrapper {\n position: relative;\n}\n.prompt {\n position: absolute;\n z-index: 2;\n font-size: small;\n top: -1em;\n background-color: $colour-white;\n left: 4em;\n padding-left: 1em;\n padding-right: 1em;\n color: $colour-primary-blue;\n}\n.prompt.grey {\n background-color: $colour-grey-background;\n}\n\n.dropdown {\n @include standard-font();\n position: relative;\n text-align: left;\n &.select-style-bordered {\n .sleeve {\n @include font-size-medium();\n padding: 2px;\n position: relative;\n background-color: $colour-primary-blue;\n @include corner-clip-small-top-right();\n select {\n color: $colour-primary-blue;\n display: block;\n position: relative;\n padding: 10px 80px 10px 10px;\n clip-path:\n polygon(\n 0% 0%, /* top left */\n 0% 0%, /* top left */\n calc(100% - 14px) 0%, /* top right */\n 100% 14px, /* top right */\n 100% 100%, /* bottom right */\n 100% 100%, /* bottom right */\n 0 100%, /* bottom left */\n 0 100% /* bottom left */\n );\n span.placeholder.grey {\n background-color: $colour-grey-background;\n }\n }\n div.arrow {\n position: absolute;\n right: 20px;\n top: 18px;\n width: 10px;\n height: 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n z-index: 1;\n pointer-events: none;\n }\n }\n .sleeve:focus-within {\n background-color: $colour-tertiary-coral;\n }\n }\n &.select-style-underlined {\n .sleeve {\n @include dropdown-underlined();\n }\n }\n &.inherit-colour select{\n color: inherit !important;\n }\n\n select {\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: scroll;\n width: 100%;\n z-index: 1;\n left: 0;\n right: 0;\n }\n &.active .options {\n display: block;\n }\n}\n.dropdown.noprompt {\n margin-top: 0;\n}\n.options.grey {\n background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'biggive-form-field-select',\n styleUrl: 'biggive-form-field-select.scss',\n shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n @Prop() selectionChanged: (value: string) => void;\n\n /**\n * Displayed as 'eyebrow' label over the top border of the box.\n */\n @Prop() prompt!: string | null;\n\n @Prop({ mutable: true }) selectedValue: string | null;\n @Prop({ mutable: true }) selectedLabel: string | null;\n\n /**\n * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n */\n @Prop() options!: string | Array<{ label: string; value: string }>;\n @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n /**\n * Must match background of containing element, or unintended shape will appear.\n */\n @Prop() backgroundColour: 'white' | 'grey';\n\n @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n private doOptionSelectCompletedHandler = (event: any) => {\n const value = event.target.value;\n this.selectedValue = value;\n this.selectedLabel = event.target.label;\n this.selectionChanged(value);\n };\n\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n\n /**\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\n return (\n <div class=\"selectWrapper\">\n <label class={greyIfRequired}>\n <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n <div\n class={\n 'dropdown space-below-' +\n this.spaceBelow +\n ' select-style-' +\n this.selectStyle +\n (this.prompt === null ? ' noprompt' : '') +\n (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n }\n >\n <div class=\"sleeve\">\n <select class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} 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 </label>\n </div>\n );\n }\n\n private formatOptions(options: string | Array<{ label: string; value: string }>): {\n label: string;\n value: string;\n }[] {\n if (options === undefined) {\n return [];\n }\n\n if (typeof options === 'string') {\n options = JSON.parse(options);\n }\n\n if (Array.isArray(options)) {\n return options;\n }\n\n return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n }\n}\n"],"version":3}
|
|
@@ -29,12 +29,12 @@ const BiggiveFormFieldSelect = class {
|
|
|
29
29
|
console.error('options undefined');
|
|
30
30
|
options = [];
|
|
31
31
|
}
|
|
32
|
-
return (h("div", { key: '
|
|
32
|
+
return (h("div", { key: 'f086887b9e99a2a52f7f28fa6921e33a6da33093', class: "selectWrapper" }, h("label", { key: '293828d55f4f7567b1bbe57c5c83c7c6ee90ce9d', class: greyIfRequired }, h("div", { key: 'ee67ad84b193866bdef6abf809a0783250627d52', class: 'prompt' + greyIfRequired }, this.prompt), h("div", { key: '2776d094ecfcd7e15431e448b23304c9aaa5f81d', class: 'dropdown space-below-' +
|
|
33
33
|
this.spaceBelow +
|
|
34
34
|
' select-style-' +
|
|
35
35
|
this.selectStyle +
|
|
36
36
|
(this.prompt === null ? ' noprompt' : '') +
|
|
37
|
-
(this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { key: '
|
|
37
|
+
(this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { key: 'c8a3571315514524d548faa48e261c04388cbb87', class: "sleeve" }, h("select", { key: '6ef9d65d7297970b9c92d4066bf2b56c21fefc58', class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler, "aria-label": this.prompt === null ? this.placeholder : this.prompt }, options.map(option => (h("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), h("div", { key: '485754c03676c10e71f6b0ec1575ec18cfa262c8', class: "arrow" }))))));
|
|
38
38
|
}
|
|
39
39
|
formatOptions(options) {
|
|
40
40
|
if (options === undefined) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"biggive-form-field-select.entry.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,+vHAA+vH,CAAC;AAClyH,qCAAe,yBAAyB;;MCM3B,sBAAsB;IALnC;;QAsBU,gBAAW,GAA8B,UAAU,CAAC;QAOpD,yBAAoB,GAAuB,MAAM,CAAC;QAElD,mCAA8B,GAAG,CAAC,KAAU;YAClD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC;;;;QAKM,eAAU,GAAW,CAAC,CAAC;
|
|
1
|
+
{"file":"biggive-form-field-select.entry.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,+vHAA+vH,CAAC;AAClyH,qCAAe,yBAAyB;;MCM3B,sBAAsB;IALnC;;QAsBU,gBAAW,GAA8B,UAAU,CAAC;QAOpD,yBAAoB,GAAuB,MAAM,CAAC;QAElD,mCAA8B,GAAG,CAAC,KAAU;YAClD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC;;;;QAKM,eAAU,GAAW,CAAC,CAAC;KAqEhC;IA9DC,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,KAAK,MAAM,GAAG,OAAO,GAAG,EAAE,CAAC;QAEvE,IAAI,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE/C,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;YAClF,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,OAAO,CAAC,CAAC;SAC/E;QAED,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE;YAClC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE,CAAC;SACd;QAED,QACE,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAO,KAAK,EAAE,cAAc,IAC1B,4DAAK,KAAK,EAAE,QAAQ,GAAG,cAAc,IAAG,IAAI,CAAC,MAAM,CAAO,EAC1D,4DACE,KAAK,EACH,uBAAuB;gBACvB,IAAI,CAAC,UAAU;gBACf,gBAAgB;gBAChB,IAAI,CAAC,WAAW;iBACf,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,YAAY,GAAG,EAAE,CAAC;iBACzC,IAAI,CAAC,oBAAoB,KAAK,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAC,IAGpE,4DAAK,KAAK,EAAC,QAAQ,IACjB,+DAAQ,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,8BAA8B,gBAAc,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,IAC5I,OAAO,CAAC,GAAG,CAAC,MAAM,KACjB,cAAQ,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IACvE,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,EACT,4DAAK,KAAK,EAAC,OAAO,GAAO,CACrB,CACF,CACA,CACJ,EACN;KACH;IAEO,aAAa,CAAC,OAAyD;QAI7E,IAAI,OAAO,KAAK,SAAS,EAAE;YACzB,OAAO,EAAE,CAAC;SACX;QAED,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAC/B;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC1B,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KACrF;;;;;;;","names":[],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n display: contents;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nselect {\n appearance: none;\n border: none;\n padding: 0 1em 0 0;\n margin: 0;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n cursor: inherit;\n line-height: inherit;\n outline: none;\n display: grid;\n background-color: $colour-white;\n align-items: center;\n}\nselect.grey {\n background-color: $colour-grey-background;\n}\n.selectWrapper {\n position: relative;\n}\n.prompt {\n position: absolute;\n z-index: 2;\n font-size: small;\n top: -1em;\n background-color: $colour-white;\n left: 4em;\n padding-left: 1em;\n padding-right: 1em;\n color: $colour-primary-blue;\n}\n.prompt.grey {\n background-color: $colour-grey-background;\n}\n\n.dropdown {\n @include standard-font();\n position: relative;\n text-align: left;\n &.select-style-bordered {\n .sleeve {\n @include font-size-medium();\n padding: 2px;\n position: relative;\n background-color: $colour-primary-blue;\n @include corner-clip-small-top-right();\n select {\n color: $colour-primary-blue;\n display: block;\n position: relative;\n padding: 10px 80px 10px 10px;\n clip-path:\n polygon(\n 0% 0%, /* top left */\n 0% 0%, /* top left */\n calc(100% - 14px) 0%, /* top right */\n 100% 14px, /* top right */\n 100% 100%, /* bottom right */\n 100% 100%, /* bottom right */\n 0 100%, /* bottom left */\n 0 100% /* bottom left */\n );\n span.placeholder.grey {\n background-color: $colour-grey-background;\n }\n }\n div.arrow {\n position: absolute;\n right: 20px;\n top: 18px;\n width: 10px;\n height: 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n z-index: 1;\n pointer-events: none;\n }\n }\n .sleeve:focus-within {\n background-color: $colour-tertiary-coral;\n }\n }\n &.select-style-underlined {\n .sleeve {\n @include dropdown-underlined();\n }\n }\n &.inherit-colour select{\n color: inherit !important;\n }\n\n select {\n max-height: 200px;\n overflow-x: hidden;\n overflow-y: scroll;\n width: 100%;\n z-index: 1;\n left: 0;\n right: 0;\n }\n &.active .options {\n display: block;\n }\n}\n.dropdown.noprompt {\n margin-top: 0;\n}\n.options.grey {\n background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'biggive-form-field-select',\n styleUrl: 'biggive-form-field-select.scss',\n shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n @Prop() selectionChanged: (value: string) => void;\n\n /**\n * Displayed as 'eyebrow' label over the top border of the box.\n */\n @Prop() prompt!: string | null;\n\n @Prop({ mutable: true }) selectedValue: string | null;\n @Prop({ mutable: true }) selectedLabel: string | null;\n\n /**\n * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n */\n @Prop() options!: string | Array<{ label: string; value: string }>;\n @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n /**\n * Must match background of containing element, or unintended shape will appear.\n */\n @Prop() backgroundColour: 'white' | 'grey';\n\n @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n private doOptionSelectCompletedHandler = (event: any) => {\n const value = event.target.value;\n this.selectedValue = value;\n this.selectedLabel = event.target.label;\n this.selectionChanged(value);\n };\n\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n\n /**\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\n return (\n <div class=\"selectWrapper\">\n <label class={greyIfRequired}>\n <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n <div\n class={\n 'dropdown space-below-' +\n this.spaceBelow +\n ' select-style-' +\n this.selectStyle +\n (this.prompt === null ? ' noprompt' : '') +\n (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n }\n >\n <div class=\"sleeve\">\n <select class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} 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 </label>\n </div>\n );\n }\n\n private formatOptions(options: string | Array<{ label: string; value: string }>): {\n label: string;\n value: string;\n }[] {\n if (options === undefined) {\n return [];\n }\n\n if (typeof options === 'string') {\n options = JSON.parse(options);\n }\n\n if (Array.isArray(options)) {\n return options;\n }\n\n return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n }\n}\n"],"version":3}
|
|
@@ -514,7 +514,7 @@ export namespace Components {
|
|
|
514
514
|
*/
|
|
515
515
|
"options": string | Array<{ label: string; value: string }>;
|
|
516
516
|
/**
|
|
517
|
-
* Placeholder
|
|
517
|
+
* Placeholder. If there is no `prompt`, this should be a suitable ARIA label.
|
|
518
518
|
*/
|
|
519
519
|
"placeholder": string | undefined;
|
|
520
520
|
/**
|
|
@@ -2109,7 +2109,7 @@ declare namespace LocalJSX {
|
|
|
2109
2109
|
*/
|
|
2110
2110
|
"options": string | Array<{ label: string; value: string }>;
|
|
2111
2111
|
/**
|
|
2112
|
-
* Placeholder
|
|
2112
|
+
* Placeholder. If there is no `prompt`, this should be a suitable ARIA label.
|
|
2113
2113
|
*/
|
|
2114
2114
|
"placeholder"?: string | undefined;
|
|
2115
2115
|
/**
|
package/hydrate/index.js
CHANGED
|
@@ -3822,12 +3822,12 @@ class BiggiveFormFieldSelect {
|
|
|
3822
3822
|
console.error('options undefined');
|
|
3823
3823
|
options = [];
|
|
3824
3824
|
}
|
|
3825
|
-
return (hAsync("div", { key: '
|
|
3825
|
+
return (hAsync("div", { key: 'f086887b9e99a2a52f7f28fa6921e33a6da33093', class: "selectWrapper" }, hAsync("label", { key: '293828d55f4f7567b1bbe57c5c83c7c6ee90ce9d', class: greyIfRequired }, hAsync("div", { key: 'ee67ad84b193866bdef6abf809a0783250627d52', class: 'prompt' + greyIfRequired }, this.prompt), hAsync("div", { key: '2776d094ecfcd7e15431e448b23304c9aaa5f81d', class: 'dropdown space-below-' +
|
|
3826
3826
|
this.spaceBelow +
|
|
3827
3827
|
' select-style-' +
|
|
3828
3828
|
this.selectStyle +
|
|
3829
3829
|
(this.prompt === null ? ' noprompt' : '') +
|
|
3830
|
-
(this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, hAsync("div", { key: '
|
|
3830
|
+
(this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, hAsync("div", { key: 'c8a3571315514524d548faa48e261c04388cbb87', class: "sleeve" }, hAsync("select", { key: '6ef9d65d7297970b9c92d4066bf2b56c21fefc58', class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler, "aria-label": this.prompt === null ? this.placeholder : this.prompt }, options.map(option => (hAsync("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), hAsync("div", { key: '485754c03676c10e71f6b0ec1575ec18cfa262c8', class: "arrow" }))))));
|
|
3831
3831
|
}
|
|
3832
3832
|
formatOptions(options) {
|
|
3833
3833
|
if (options === undefined) {
|
package/hydrate/index.mjs
CHANGED
|
@@ -3818,12 +3818,12 @@ class BiggiveFormFieldSelect {
|
|
|
3818
3818
|
console.error('options undefined');
|
|
3819
3819
|
options = [];
|
|
3820
3820
|
}
|
|
3821
|
-
return (hAsync("div", { key: '
|
|
3821
|
+
return (hAsync("div", { key: 'f086887b9e99a2a52f7f28fa6921e33a6da33093', class: "selectWrapper" }, hAsync("label", { key: '293828d55f4f7567b1bbe57c5c83c7c6ee90ce9d', class: greyIfRequired }, hAsync("div", { key: 'ee67ad84b193866bdef6abf809a0783250627d52', class: 'prompt' + greyIfRequired }, this.prompt), hAsync("div", { key: '2776d094ecfcd7e15431e448b23304c9aaa5f81d', class: 'dropdown space-below-' +
|
|
3822
3822
|
this.spaceBelow +
|
|
3823
3823
|
' select-style-' +
|
|
3824
3824
|
this.selectStyle +
|
|
3825
3825
|
(this.prompt === null ? ' noprompt' : '') +
|
|
3826
|
-
(this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, hAsync("div", { key: '
|
|
3826
|
+
(this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, hAsync("div", { key: 'c8a3571315514524d548faa48e261c04388cbb87', class: "sleeve" }, hAsync("select", { key: '6ef9d65d7297970b9c92d4066bf2b56c21fefc58', class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler, "aria-label": this.prompt === null ? this.placeholder : this.prompt }, options.map(option => (hAsync("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), hAsync("div", { key: '485754c03676c10e71f6b0ec1575ec18cfa262c8', class: "arrow" }))))));
|
|
3827
3827
|
}
|
|
3828
3828
|
formatOptions(options) {
|
|
3829
3829
|
if (options === undefined) {
|
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": "
|
|
4
|
+
"version": "202505091548.0.0",
|
|
5
5
|
"description": "Big Give Components",
|
|
6
6
|
"main": "dist/index.cjs.js",
|
|
7
7
|
"module": "dist/index.js",
|