@biggive/components 202511051249.0.0 → 202511061628.0.0

package/dist/biggive/biggive-form-field-select.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"biggive-form-field-select.entry.esm.js","sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n  display: contents;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nselect {\n  appearance: none;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n  outline: none;\n  display: grid;\n  background-color: $colour-white;\n  align-items: center;\n}\nselect.grey {\n  background-color: $colour-grey-background;\n}\n.selectWrapper {\n  position: relative;\n}\n.prompt {\n  position: absolute;\n  z-index: 2;\n  font-size: small;\n  top: -1em;\n  background-color: $colour-white;\n  left: 4em;\n  padding-left: 1em;\n  padding-right: 1em;\n  color: $colour-primary-blue;\n}\n.prompt.grey {\n  background-color: $colour-grey-background;\n}\n\n.dropdown {\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include font-size-medium();\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      select {\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 80px 10px 10px;\n        clip-path:\n          polygon(\n              0% 0%,     /* top left */\n              0% 0%,     /* top left */\n              calc(100% - 14px) 0%,    /* top right */\n              100% 14px,   /* top right */\n              100% 100%,  /* bottom right */\n              100% 100%,  /* bottom right */\n              0 100%,   /* bottom left */\n              0 100%      /* bottom left */\n          );\n        span.placeholder.grey {\n          background-color: $colour-grey-background;\n        }\n      }\n      div.arrow {\n        position: absolute;\n        right: 20px;\n        top: 18px;\n        width: 10px;\n        height: 10px;\n        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        z-index: 1;\n        pointer-events: none;\n      }\n    }\n    .sleeve:focus-within {\n      background-color: $colour-tertiary-coral;\n    }\n  }\n  &.select-style-underlined {\n    .sleeve {\n      @include dropdown-underlined();\n    }\n  }\n  &.inherit-colour select{\n   color: inherit !important;\n  }\n\n  select {\n    max-height: 200px;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    width: 100%;\n    z-index: 1;\n    left: 0;\n    right: 0;\n  }\n  &.active .options {\n      display: block;\n  }\n}\n.dropdown.noprompt {\n  margin-top: 0;\n}\n.options.grey {\n  background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form-field-select',\n  styleUrl: 'biggive-form-field-select.scss',\n  shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n  @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n  @Prop() selectionChanged: (value: string) => void;\n\n  /**\n   * Displayed as 'eyebrow' label over the top border of the box.\n   */\n  @Prop() prompt!: string | null;\n\n  @Prop({ mutable: true }) selectedValue: string | null;\n  @Prop({ mutable: true }) selectedLabel: string | null;\n\n  /**\n   * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() options!: string | Array<{ label: string; value: string }>;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  /**\n   * Must match background of containing element, or unintended shape will appear.\n   */\n  @Prop() backgroundColour: 'white' | 'grey';\n\n  @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n  /**\n   * ID for the select element, used by a label. If not passed then a random id will be generated.\n   */\n  @Prop() selectElementId: string | undefined;\n\n  private doOptionSelectCompletedHandler = (event: any) => {\n    const value = event.target.value;\n    this.selectedValue = value;\n    this.selectedLabel = event.target.label;\n    this.selectionChanged(value);\n  };\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\n   */\n  @Prop() placeholder: string | undefined;\n\n  render() {\n    const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n    let options = this.formatOptions(this.options);\n\n    if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n    }\n\n    if (typeof options === 'undefined') {\n      console.error('options undefined');\n      options = [];\n    }\n    // Give the select a random id so we can reference it from a label\n    const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired} htmlFor={selectId}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n        </label>\n        <div\n          class={\n            'dropdown space-below-' +\n            this.spaceBelow +\n            ' select-style-' +\n            this.selectStyle +\n            (this.prompt === null ? '  noprompt' : '') +\n            (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n          }\n        >\n          <div class=\"sleeve\">\n            <select id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\n              {options.map(option => (\n                <option selected={this.selectedValue === option.value} value={option.value}>\n                  {option.label}\n                </option>\n              ))}\n            </select>\n            <div class=\"arrow\"></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private formatOptions(options: string | Array<{ label: string; value: string }>): {\n    label: string;\n    value: string;\n  }[] {\n    if (options === undefined) {\n      return [];\n    }\n\n    if (typeof options === 'string') {\n      options = JSON.parse(options);\n    }\n\n    if (Array.isArray(options)) {\n      return options;\n    }\n\n    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n  }\n\n  private getRandomInt(): number {\n    const min = 1_000_000;\n    const max = 9_999_999;\n    return Math.floor(Math.random() * (max - min) + min);\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"biggive-form-field-select.entry.esm.js","sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n  display: contents;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nselect {\n  appearance: none;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n  outline: none;\n  display: grid;\n  background-color: $colour-white;\n  align-items: center;\n}\nselect.grey {\n  background-color: $colour-grey-background;\n}\n.selectWrapper {\n  position: relative;\n}\n.prompt {\n  position: absolute;\n  z-index: 2;\n  font-size: small;\n  top: -1em;\n  background-color: $colour-white;\n  left: 4em;\n  padding-left: 1em;\n  padding-right: 1em;\n  color: $colour-primary-blue;\n}\n.prompt.grey {\n  background-color: $colour-grey-background;\n}\n\n.dropdown {\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include font-size-medium();\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      select {\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 80px 10px 10px;\n        clip-path:\n          polygon(\n              0% 0%,     /* top left */\n              0% 0%,     /* top left */\n              calc(100% - 14px) 0%,    /* top right */\n              100% 14px,   /* top right */\n              100% 100%,  /* bottom right */\n              100% 100%,  /* bottom right */\n              0 100%,   /* bottom left */\n              0 100%      /* bottom left */\n          );\n        span.placeholder.grey {\n          background-color: $colour-grey-background;\n        }\n      }\n      div.arrow {\n        position: absolute;\n        right: 20px;\n        top: 18px;\n        width: 10px;\n        height: 10px;\n        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        z-index: 1;\n        pointer-events: none;\n      }\n    }\n    .sleeve:focus-within {\n      background-color: $colour-secondary-green;\n    }\n  }\n  &.select-style-underlined {\n    .sleeve {\n      @include dropdown-underlined();\n    }\n  }\n  &.inherit-colour select{\n   color: inherit !important;\n  }\n\n  select {\n    max-height: 200px;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    width: 100%;\n    z-index: 1;\n    left: 0;\n    right: 0;\n  }\n  &.active .options {\n      display: block;\n  }\n}\n.dropdown.noprompt {\n  margin-top: 0;\n}\n.options.grey {\n  background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form-field-select',\n  styleUrl: 'biggive-form-field-select.scss',\n  shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n  @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n  @Prop() selectionChanged: (value: string) => void;\n\n  /**\n   * Displayed as 'eyebrow' label over the top border of the box.\n   */\n  @Prop() prompt!: string | null;\n\n  @Prop({ mutable: true }) selectedValue: string | null;\n  @Prop({ mutable: true }) selectedLabel: string | null;\n\n  /**\n   * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() options!: string | Array<{ label: string; value: string }>;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  /**\n   * Must match background of containing element, or unintended shape will appear.\n   */\n  @Prop() backgroundColour: 'white' | 'grey';\n\n  @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n  /**\n   * ID for the select element, used by a label. If not passed then a random id will be generated.\n   */\n  @Prop() selectElementId: string | undefined;\n\n  private doOptionSelectCompletedHandler = (event: any) => {\n    const value = event.target.value;\n    this.selectedValue = value;\n    this.selectedLabel = event.target.label;\n    this.selectionChanged(value);\n  };\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\n   */\n  @Prop() placeholder: string | undefined;\n\n  render() {\n    const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n    let options = this.formatOptions(this.options);\n\n    if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n    }\n\n    if (typeof options === 'undefined') {\n      console.error('options undefined');\n      options = [];\n    }\n    // Give the select a random id so we can reference it from a label\n    const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired} htmlFor={selectId}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n        </label>\n        <div\n          class={\n            'dropdown space-below-' +\n            this.spaceBelow +\n            ' select-style-' +\n            this.selectStyle +\n            (this.prompt === null ? '  noprompt' : '') +\n            (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n          }\n        >\n          <div class=\"sleeve\">\n            <select id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\n              {options.map(option => (\n                <option selected={this.selectedValue === option.value} value={option.value}>\n                  {option.label}\n                </option>\n              ))}\n            </select>\n            <div class=\"arrow\"></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private formatOptions(options: string | Array<{ label: string; value: string }>): {\n    label: string;\n    value: string;\n  }[] {\n    if (options === undefined) {\n      return [];\n    }\n\n    if (typeof options === 'string') {\n      options = JSON.parse(options);\n    }\n\n    if (Array.isArray(options)) {\n      return options;\n    }\n\n    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n  }\n\n  private getRandomInt(): number {\n    const min = 1_000_000;\n    const max = 9_999_999;\n    return Math.floor(Math.random() * (max - min) + min);\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/biggive/biggive-text-input.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"biggive-text-input.entry.esm.js","sources":["src/components/biggive-text-input/biggive-text-input.scss?tag=biggive-text-input&encapsulation=shadow","src/components/biggive-text-input/biggive-text-input.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n::slotted([slot=label]) {\n  display: inline-block;\n  line-height: 1.2; // Slightly less than other text to help with long charity names.\n}\n\n.text-input {\n  .currency-symbol {\n    position: absolute;\n  }\n  position: relative;\n  .prompt {\n    position: relative;\n    z-index: 2;\n    font-size: small;\n    top: 1em;\n    left: 4em;\n    color: $colour-primary-blue;\n    max-width: calc(100% - 10em);\n    display: inline-block;\n\n    > span {\n      padding-left: 1em;\n      padding-right: 1em;\n      background-color: $colour-grey-background;\n    }\n  }\n\n\n  &.philco .prompt {\n    color: $colour-philco-gray-90;\n\n    > span {\n      background-color: $colour-philco-white;\n    }\n  }\n\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered.biggive{\n    .sleeve {\n      @include font-size-large();\n      font-weight: bolder;\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      .inner-sleeve {\n        background-color: $colour-grey-background;\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 30px 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          &:after {\n            content: '';\n            display: block;\n            position: absolute;\n            right: 20px;\n            top: 18px;\n            width: 10px;\n            height: 10px;\n            background-size: contain;\n            background-repeat: no-repeat;\n            background-position: center center;\n          }\n      }\n      &.focused {\n        background-color: $colour-tertiary-coral;\n      }\n    }\n  }\n  &.select-style-bordered.philco {\n    .inner-sleeve {\n      border: 2px solid $colour-philco-gray-90;\n      border-radius: 6px;\n      padding: 12px;\n    }\n  }\n}\n\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * Initially developed for use within the new donate stepper design. Currently has a hard-coded background\n * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.\n *\n * Please ensure input is styled as width: 100%.\n *\n * Requires slots `label` and `input`.\n */\n@Component({\n  tag: 'biggive-text-input',\n  styleUrl: 'biggive-text-input.scss',\n  shadow: true,\n})\nexport class BiggiveTextInput {\n  @Element() host: HTMLBiggiveTextInputElement;\n\n  /**\n   * ISO-4217 currency code if input is for a money value\n   */\n  @Prop() currency: 'GBP' | 'USD' | undefined;\n  @Prop() spaceBelow: number = 0;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n  @Prop() siteDesign: 'biggive' | 'philco' = 'biggive';\n\n  render() {\n    const currencySymbol = this.currency === 'GBP' ? '£' : this.currency === 'USD' ? '$' : undefined;\n    return (\n      <div class={'text-input space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle + ' ' + this.siteDesign}>\n        <div class=\"prompt\">\n          <span>\n            <slot name=\"label\" />\n          </span>\n        </div>\n        <div class=\"sleeve\">\n          <div class=\"inner-sleeve\">\n            {currencySymbol && <span class=\"currency-symbol\">{currencySymbol}</span>}\n            <slot name=\"input\" />\n            <div style={{ clear: 'both' }}></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  componentDidLoad() {\n    const nativeInput: HTMLElement | null = this.host.querySelector(`[slot=\"input\"]`);\n    const sleave = this.host.shadowRoot!.querySelector('.sleeve')!;\n\n    if (!nativeInput) {\n      throw new Error('Input slot element required for biggive-text-input');\n    }\n\n    nativeInput.addEventListener('focusin', () => sleave.classList.add('focused'));\n    nativeInput.addEventListener('focusout', () => sleave.classList.remove('focused'));\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,mBAAmB,GAAG,iiEAAiiE;;MCehjE,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYU,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AACtB,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AACnD,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAiCrD;IA/BC,MAAM,GAAA;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,SAAS;AAChG,QAAA,QACE,4DAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,WAAW,GAAG,GAAG,GAAG,IAAI,CAAC,UAAU,EAAA,EACnH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CAChB,CACH,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,cAAc,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAAE,cAAc,CAAQ,EACxE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,CAAQ,CACjC,CACF,CACF;;IAIV,gBAAgB,GAAA;QACd,MAAM,WAAW,GAAuB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAgB,cAAA,CAAA,CAAC;AACjF,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,SAAS,CAAE;QAE9D,IAAI,CAAC,WAAW,EAAE;AAChB,YAAA,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC;;AAGvE,QAAA,WAAW,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;AAC9E,QAAA,WAAW,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;;;;;;;;"}
+{"version":3,"file":"biggive-text-input.entry.esm.js","sources":["src/components/biggive-text-input/biggive-text-input.scss?tag=biggive-text-input&encapsulation=shadow","src/components/biggive-text-input/biggive-text-input.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n::slotted([slot=label]) {\n  display: inline-block;\n  line-height: 1.2; // Slightly less than other text to help with long charity names.\n}\n\n.text-input {\n  .currency-symbol {\n    position: absolute;\n  }\n  position: relative;\n  .prompt {\n    position: relative;\n    z-index: 2;\n    font-size: small;\n    top: 1em;\n    left: 4em;\n    color: $colour-primary-blue;\n    max-width: calc(100% - 10em);\n    display: inline-block;\n\n    > span {\n      padding-left: 1em;\n      padding-right: 1em;\n      background-color: $colour-grey-background;\n    }\n  }\n\n\n  &.philco .prompt {\n    color: $colour-philco-gray-90;\n\n    > span {\n      background-color: $colour-philco-white;\n    }\n  }\n\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered.biggive{\n    .sleeve {\n      @include font-size-large();\n      font-weight: bolder;\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      .inner-sleeve {\n        background-color: $colour-grey-background;\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 30px 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          &:after {\n            content: '';\n            display: block;\n            position: absolute;\n            right: 20px;\n            top: 18px;\n            width: 10px;\n            height: 10px;\n            background-size: contain;\n            background-repeat: no-repeat;\n            background-position: center center;\n          }\n      }\n      &.focused {\n        background-color: $colour-secondary-green;\n      }\n    }\n  }\n  &.select-style-bordered.philco {\n    .inner-sleeve {\n      border: 2px solid $colour-philco-gray-90;\n      border-radius: 6px;\n      padding: 12px;\n    }\n  }\n}\n\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * Initially developed for use within the new donate stepper design. Currently has a hard-coded background\n * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.\n *\n * Please ensure input is styled as width: 100%.\n *\n * Requires slots `label` and `input`.\n */\n@Component({\n  tag: 'biggive-text-input',\n  styleUrl: 'biggive-text-input.scss',\n  shadow: true,\n})\nexport class BiggiveTextInput {\n  @Element() host: HTMLBiggiveTextInputElement;\n\n  /**\n   * ISO-4217 currency code if input is for a money value\n   */\n  @Prop() currency: 'GBP' | 'USD' | undefined;\n  @Prop() spaceBelow: number = 0;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n  @Prop() siteDesign: 'biggive' | 'philco' = 'biggive';\n\n  render() {\n    const currencySymbol = this.currency === 'GBP' ? '£' : this.currency === 'USD' ? '$' : undefined;\n    return (\n      <div class={'text-input space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle + ' ' + this.siteDesign}>\n        <div class=\"prompt\">\n          <span>\n            <slot name=\"label\" />\n          </span>\n        </div>\n        <div class=\"sleeve\">\n          <div class=\"inner-sleeve\">\n            {currencySymbol && <span class=\"currency-symbol\">{currencySymbol}</span>}\n            <slot name=\"input\" />\n            <div style={{ clear: 'both' }}></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  componentDidLoad() {\n    const nativeInput: HTMLElement | null = this.host.querySelector(`[slot=\"input\"]`);\n    const sleave = this.host.shadowRoot!.querySelector('.sleeve')!;\n\n    if (!nativeInput) {\n      throw new Error('Input slot element required for biggive-text-input');\n    }\n\n    nativeInput.addEventListener('focusin', () => sleave.classList.add('focused'));\n    nativeInput.addEventListener('focusout', () => sleave.classList.remove('focused'));\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,mBAAmB,GAAG,iiEAAiiE;;MCehjE,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYU,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AACtB,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AACnD,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAiCrD;IA/BC,MAAM,GAAA;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,SAAS;AAChG,QAAA,QACE,4DAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,WAAW,GAAG,GAAG,GAAG,IAAI,CAAC,UAAU,EAAA,EACnH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CAChB,CACH,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,cAAc,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAAE,cAAc,CAAQ,EACxE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,CAAQ,CACjC,CACF,CACF;;IAIV,gBAAgB,GAAA;QACd,MAAM,WAAW,GAAuB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAgB,cAAA,CAAA,CAAC;AACjF,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,SAAS,CAAE;QAE9D,IAAI,CAAC,WAAW,EAAE;AAChB,YAAA,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC;;AAGvE,QAAA,WAAW,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;AAC9E,QAAA,WAAW,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;;;;;;;;"}

package/dist/biggive/biggive.esm.js

@@ -1,2 +1,2 @@
-import{p as e,H as o,b as t}from"./p-CTC1TIdr.js";export{s as setNonce}from"./p-CTC1TIdr.js";import{g as l}from"./p-DQuL1Twl.js";var r=()=>{{a(o.prototype)}const t=import.meta.url;const l={};if(t!==""){l.resourcesUrl=new URL(".",t).href}return e(l)};var a=e=>{const o=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return o.call(this,e)}const t=o.call(this,false);const l=this.childNodes;if(e){for(let e=0;e<l.length;e++){if(l[e].nodeType!==2){t.appendChild(l[e].cloneNode(true))}}}return t}};r().then((async e=>{await l();return t(JSON.parse('[["p-a75c70c4",[[257,"biggive-campaign-card",{"spaceBelow":[2,"space-below"],"campaignType":[1,"campaign-type"],"banner":[1],"campaignTitle":[1,"campaign-title"],"organisationName":[1,"organisation-name"],"primaryFigureLabel":[1,"primary-figure-label"],"primaryFigureAmount":[1,"primary-figure-amount"],"secondaryFigureLabel":[1,"secondary-figure-label"],"secondaryFigureAmount":[1,"secondary-figure-amount"],"progressBarCounter":[2,"progress-bar-counter"],"donateButtonLabel":[1,"donate-button-label"],"donateButtonUrl":[1,"donate-button-url"],"donateButtonColourScheme":[1,"donate-button-colour-scheme"],"moreInfoButtonLabel":[1,"more-info-button-label"],"moreInfoButtonUrl":[1,"more-info-button-url"],"moreInfoButtonColourScheme":[1,"more-info-button-colour-scheme"],"isFutureCampaign":[4,"is-future-campaign"],"isPastCampaign":[4,"is-past-campaign"],"datetime":[1]}]]],["p-2467dfb9",[[257,"biggive-campaign-card-filter-grid",{"spaceBelow":[2,"space-below"],"intro":[1],"searchText":[1,"search-text"],"placeholderText":[1,"placeholder-text"],"buttonText":[1,"button-text"],"categoryOptions":[1,"category-options"],"beneficiaryOptions":[1,"beneficiary-options"],"locationOptions":[1,"location-options"],"selectedSortByOption":[1025,"selected-sort-by-option"],"selectedFilterCategory":[1025,"selected-filter-category"],"selectedFilterBeneficiary":[1025,"selected-filter-beneficiary"],"selectedFilterLocation":[1025,"selected-filter-location"],"filtersApplied":[32],"unfocusInputs":[64]}]]],["p-9fafbbd8",[[257,"biggive-campaign-highlights",{"spaceBelow":[2,"space-below"],"banner":[1],"campaignTitle":[1,"campaign-title"],"primaryFigureLabel":[1,"primary-figure-label"],"primaryFigureAmount":[1,"primary-figure-amount"],"secondaryFigureLabel":[1,"secondary-figure-label"],"secondaryFigureAmount":[1,"secondary-figure-amount"],"progressBarCounter":[2,"progress-bar-counter"],"primaryStatIcon":[1,"primary-stat-icon"],"primaryStatText":[1,"primary-stat-text"],"secondaryStatIcon":[1,"secondary-stat-icon"],"secondaryStatText":[1,"secondary-stat-text"],"championName":[1,"champion-name"],"championUrl":[1,"champion-url"]}]]],["p-0a0a6255",[[257,"biggive-cookie-banner",{"autoOpenPreferences":[4,"auto-open-preferences"],"blogUriPrefix":[1,"blog-uri-prefix"],"previouslyAgreedCookiePreferences":[16]},null,{"autoOpenPreferences":["autoOpenPreferencesIfRequested"]}]]],["p-00c0e2ad",[[257,"biggive-footer",{"headingLevel":[2,"heading-level"],"donateUrlPrefix":[1,"donate-url-prefix"],"blogUrlPrefix":[1,"blog-url-prefix"],"experienceUrlPrefix":[1,"experience-url-prefix"],"smallCharityWeekEnabled":[4,"small-charity-week-enabled"],"usePresetFooter":[4,"use-preset-footer"]}]]],["p-bc7d344f",[[257,"biggive-main-menu",{"blogUrlPrefix":[1,"blog-url-prefix"],"donateUrlPrefix":[1,"donate-url-prefix"],"experienceUrlPrefix":[1,"experience-url-prefix"],"smallCharityWeekEnabled":[4,"small-charity-week-enabled"],"someCampaignHasHomePageRedirect":[4,"some-campaign-has-home-page-redirect"],"isLoggedIn":[4,"is-logged-in"],"closeMobileMenuFromOutside":[64]}]]],["p-619a5487",[[257,"philco-main-menu",{"philcoUrlPrefix":[1,"philco-url-prefix"],"closeMobileMenuFromOutside":[64]}]]],["p-bef4ed2f",[[257,"biggive-article-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"slug":[1],"slugColour":[1,"slug-colour"],"date":[1],"dateColour":[1,"date-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"image1Url":[1,"image-1-url"],"image1AltText":[1,"image-1-alt-text"],"image2Url":[1,"image-2-url"],"image2AltText":[1,"image-2-alt-text"],"imageLabel":[1,"image-label"],"imageLabelColour":[1,"image-label-colour"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColour":[1,"button-colour"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"]}]]],["p-7fc271c9",[[257,"biggive-basic-card",{"spaceBelow":[2,"space-below"],"siteDesign":[1,"site-design"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"mainTitle":[1,"main-title"],"subtitle":[1],"author":[1],"date":[1],"teaser":[1],"icon":[4],"iconColour":[1,"icon-colour"],"buttonAlign":[1,"button-align"],"buttonStyle":[1,"button-style"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"headingLevel":[2,"heading-level"],"addAnimation":[4,"add-animation"]}]]],["p-ea5a1595",[[257,"biggive-call-to-action",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"slugSize":[2,"slug-size"],"slugColour":[1,"slug-colour"],"slug":[1],"mainTitleColour":[1,"main-title-colour"],"mainTitleSize":[2,"main-title-size"],"mainTitle":[1,"main-title"],"subtitleSize":[2,"subtitle-size"],"subtitleColour":[1,"subtitle-colour"],"subtitle":[1],"teaserColour":[1,"teaser-colour"],"teaser":[1],"primaryButtonUrl":[1,"primary-button-url"],"primaryButtonLabel":[1,"primary-button-label"],"primaryButtonColourScheme":[1,"primary-button-colour-scheme"],"secondaryButtonUrl":[1,"secondary-button-url"],"secondaryButtonLabel":[1,"secondary-button-label"],"secondaryButtonColourScheme":[1,"secondary-button-colour-scheme"]}]]],["p-f8dc7f28",[[257,"biggive-hero-image",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"slug":[1],"slugColour":[1,"slug-colour"],"logo":[1],"logoHeight":[2,"logo-height"],"logoAltText":[1,"logo-alt-text"],"mainImage":[1,"main-image"],"mainImageShape":[1,"main-image-shape"],"mainImageAlignHorizontal":[1,"main-image-align-horizontal"],"mainImageAlignVertical":[1,"main-image-align-vertical"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-2fc941fe",[[257,"biggive-icon-button",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundPadding":[2,"background-padding"],"text":[1],"textColour":[1,"text-colour"],"icon":[1],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"size":[1],"arrow":[4],"arrowColour":[1,"arrow-colour"],"circle":[4],"shadow":[4],"centered":[4],"rounded":[4],"buttonId":[1,"button-id"]}]]],["p-2892f4cf",[[257,"biggive-image-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"textAlign":[1,"text-align"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonAlign":[1,"button-align"],"buttonStyle":[1,"button-style"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"addAnimation":[4,"add-animation"]}]]],["p-1fa0618a",[[257,"biggive-image-feature",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"imageUrl":[1,"image-url"],"imageAltText":[1,"image-alt-text"],"slug":[1],"slugColour":[1,"slug-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-13c1fef9",[[257,"biggive-video-feature",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"videoUrl":[1,"video-url"],"slug":[1],"slugColour":[1,"slug-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-a190176d",[[257,"biggive-accordion",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"headingColour":[1,"heading-colour"],"children":[32]}]]],["p-9905bea4",[[257,"biggive-accordion-entry",{"heading":[1]}]]],["p-ccf87311",[[257,"biggive-back-to-top"]]],["p-34b6d784",[[257,"biggive-biography-card",{"spaceBelow":[2,"space-below"],"borderWidth":[2,"border-width"],"imageUrl":[1,"image-url"],"imageStyle":[1,"image-style"],"textColour":[1,"text-colour"],"backgroundColour":[1,"background-colour"],"fullName":[1,"full-name"],"jobTitle":[1,"job-title"],"textAlign":[1,"text-align"],"ratio":[1],"circle":[4],"circleColour":[1,"circle-colour"],"rounded":[4],"url":[1]}]]],["p-73c84ebe",[[257,"biggive-boxed-content",{"spaceBelow":[2,"space-below"],"verticalPadding":[2,"vertical-padding"],"horizontalPadding":[2,"horizontal-padding"],"backgroundColour":[1,"background-colour"],"shadow":[4]}]]],["p-5aa70637",[[257,"biggive-branded-image",{"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"imageHeightPercent":[2,"image-height-percent"],"imageAlt":[1,"image-alt"],"logoUrl":[1,"logo-url"],"slug":[1],"charityName":[1,"charity-name"],"charityLocation":[1,"charity-location"],"charityUrl":[1,"charity-url"]}]]],["p-37674669",[[257,"biggive-container-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"headingLevel":[2,"heading-level"]}]]],["p-77e54760",[[257,"biggive-form"]]],["p-df3adeb8",[[257,"biggive-formatted-text",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"maxWidth":[2,"max-width"],"siteDesign":[1,"site-design"]}]]],["p-e8b3a71d",[[257,"biggive-grid",{"spaceBelow":[2,"space-below"],"columnCount":[2,"column-count"],"spaceBetween":[4,"space-between"],"columnGap":[2,"column-gap"]}]]],["p-4d31c426",[[257,"biggive-heading",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"colour":[1],"htmlElement":[1,"html-element"],"size":[2],"align":[1],"text":[1],"icon":[4],"iconColour":[1,"icon-colour"],"siteDesign":[1,"site-design"]}]]],["p-6ecd4ea2",[[257,"biggive-heading-banner",{"logo":[1],"slug":[1],"mainTitle":[1,"main-title"],"mainImageUrl":[1,"main-image-url"],"focalPoint":[1,"focal-point"],"teaser":[1],"backgroundColour":[1,"background-colour"],"textBackgroundColour":[1,"text-background-colour"],"slugColour":[1,"slug-colour"],"mainTitleColour":[1,"main-title-colour"],"teaserColour":[1,"teaser-colour"],"height":[1]}]]],["p-c1e9a453",[[257,"biggive-image",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"imageAltText":[1,"image-alt-text"],"width":[2],"height":[2],"sizeUnit":[1,"size-unit"]}]]],["p-4987e6ea",[[257,"biggive-image-button",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundPadding":[2,"background-padding"],"text":[1],"textColour":[1,"text-colour"],"imageUrl":[1,"image-url"],"imageStyle":[1,"image-style"],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"size":[1],"arrow":[4],"arrowColour":[1,"arrow-colour"],"circle":[4],"shadow":[4],"centered":[4],"rounded":[4],"buttonId":[1,"button-id"]}]]],["p-c9615246",[[257,"biggive-nav-group",{"inline":[4]}]]],["p-5aa41b68",[[257,"biggive-nav-item",{"url":[1],"label":[1],"iconColour":[1,"icon-colour"]}]]],["p-4070bac2",[[257,"biggive-page-column"]]],["p-b4c7f4ee",[[257,"biggive-page-columns",{"spaceBelow":[2,"space-below"]}]]],["p-d71e7f23",[[257,"biggive-page-section",{"spaceBelow":[2,"space-below"],"sectionStyleTop":[1,"section-style-top"],"sectionStyleBottom":[1,"section-style-bottom"],"colourScheme":[1,"colour-scheme"],"maxWidth":[2,"max-width"],"primaryFullBleed":[4,"primary-full-bleed"]}]]],["p-37a49e85",[[257,"biggive-quote",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"quote":[1],"attribution":[1],"quoteIconColour":[1,"quote-icon-colour"],"siteDesign":[1,"site-design"]}]]],["p-5f7207d9",[[257,"biggive-sheet",{"sheetId":[1,"sheet-id"],"backgroundColour":[1,"background-colour"],"textColour":[1,"text-colour"]}]]],["p-1984ccdb",[[257,"biggive-tab",{"tabTitle":[1,"tab-title"]}]]],["p-13e045ea",[[257,"biggive-tabbed-content",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"selectedTextColour":[1,"selected-text-colour"],"navigationHighlightColour":[1,"navigation-highlight-colour"],"selectedNavigationHighlightColour":[1,"selected-navigation-highlight-colour"],"buttonBackgroundColour":[1,"button-background-colour"],"buttonIconColour":[1,"button-icon-colour"]}]]],["p-525a84bf",[[257,"biggive-table",{"spaceBelow":[2,"space-below"],"headerTextColour":[1,"header-text-colour"],"headerBackgroundColour":[1,"header-background-colour"],"bodyTextColour":[1,"body-text-colour"],"bodyBackgroundColour":[1,"body-background-colour"]}]]],["p-9e949feb",[[257,"biggive-text-input",{"currency":[1],"spaceBelow":[2,"space-below"],"selectStyle":[1,"select-style"],"siteDesign":[1,"site-design"]}]]],["p-8506012f",[[257,"biggive-timeline",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"selectedTextColour":[1,"selected-text-colour"],"navigationHighlightColour":[1,"navigation-highlight-colour"],"selectedNavigationHighlightColour":[1,"selected-navigation-highlight-colour"],"buttonBackgroundColour":[1,"button-background-colour"],"buttonIconColour":[1,"button-icon-colour"],"entryBackgroundColour":[1,"entry-background-colour"],"entryHighlightColour":[1,"entry-highlight-colour"],"entryDateColour":[1,"entry-date-colour"],"entryTitleColour":[1,"entry-title-colour"],"entryTextColour":[1,"entry-text-colour"]}]]],["p-9bdb2bb8",[[257,"biggive-timeline-entry",{"date":[1],"heading":[1]}]]],["p-e5f3290f",[[257,"biggive-totalizer",{"spaceBelow":[2,"space-below"],"primaryColour":[1,"primary-colour"],"primaryTextColour":[1,"primary-text-colour"],"secondaryColour":[1,"secondary-colour"],"secondaryTextColour":[1,"secondary-text-colour"],"mainMessage":[1,"main-message"]}]]],["p-1a2defec",[[257,"biggive-totalizer-ticker-item",{"figure":[1],"label":[1]}]]],["p-23d36f07",[[257,"biggive-video",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"videoUrl":[1,"video-url"]}]]],["p-37ad5440",[[257,"philco-footer",{"headingLevel":[2,"heading-level"],"philcoUrlPrefix":[1,"philco-url-prefix"]}]]],["p-475001f5",[[257,"biggive-form-field-select",{"selectionChanged":[16],"prompt":[1],"selectedValue":[1025,"selected-value"],"selectedLabel":[1025,"selected-label"],"options":[1],"selectStyle":[1,"select-style"],"backgroundColour":[1,"background-colour"],"selectedOptionColour":[1,"selected-option-colour"],"selectElementId":[1,"select-element-id"],"spaceBelow":[2,"space-below"],"placeholder":[1]}]]],["p-95f3e03e",[[257,"biggive-popup",{"modalClosedCallback":[16],"openFromOutside":[64],"closeFromOutside":[64]}]]],["p-4c27058f",[[257,"biggive-progress-bar",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"counter":[2]}]]],["p-b53429c3",[[257,"biggive-social-icon",{"service":[1],"labelPrefix":[1,"label-prefix"],"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"wide":[4],"url":[1]}]]],["p-eee51f82",[[257,"biggive-misc-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"url":[1]}]]],["p-3600d893",[[257,"biggive-button",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"label":[1],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"fullWidth":[4,"full-width"],"size":[1],"rounded":[4],"centered":[4],"buttonId":[1,"button-id"],"siteDesign":[1,"site-design"],"disabled":[4]}]]]]'),e)}));
+import{p as e,H as o,b as t}from"./p-CTC1TIdr.js";export{s as setNonce}from"./p-CTC1TIdr.js";import{g as l}from"./p-DQuL1Twl.js";var r=()=>{{a(o.prototype)}const t=import.meta.url;const l={};if(t!==""){l.resourcesUrl=new URL(".",t).href}return e(l)};var a=e=>{const o=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return o.call(this,e)}const t=o.call(this,false);const l=this.childNodes;if(e){for(let e=0;e<l.length;e++){if(l[e].nodeType!==2){t.appendChild(l[e].cloneNode(true))}}}return t}};r().then((async e=>{await l();return t(JSON.parse('[["p-a75c70c4",[[257,"biggive-campaign-card",{"spaceBelow":[2,"space-below"],"campaignType":[1,"campaign-type"],"banner":[1],"campaignTitle":[1,"campaign-title"],"organisationName":[1,"organisation-name"],"primaryFigureLabel":[1,"primary-figure-label"],"primaryFigureAmount":[1,"primary-figure-amount"],"secondaryFigureLabel":[1,"secondary-figure-label"],"secondaryFigureAmount":[1,"secondary-figure-amount"],"progressBarCounter":[2,"progress-bar-counter"],"donateButtonLabel":[1,"donate-button-label"],"donateButtonUrl":[1,"donate-button-url"],"donateButtonColourScheme":[1,"donate-button-colour-scheme"],"moreInfoButtonLabel":[1,"more-info-button-label"],"moreInfoButtonUrl":[1,"more-info-button-url"],"moreInfoButtonColourScheme":[1,"more-info-button-colour-scheme"],"isFutureCampaign":[4,"is-future-campaign"],"isPastCampaign":[4,"is-past-campaign"],"datetime":[1]}]]],["p-2467dfb9",[[257,"biggive-campaign-card-filter-grid",{"spaceBelow":[2,"space-below"],"intro":[1],"searchText":[1,"search-text"],"placeholderText":[1,"placeholder-text"],"buttonText":[1,"button-text"],"categoryOptions":[1,"category-options"],"beneficiaryOptions":[1,"beneficiary-options"],"locationOptions":[1,"location-options"],"selectedSortByOption":[1025,"selected-sort-by-option"],"selectedFilterCategory":[1025,"selected-filter-category"],"selectedFilterBeneficiary":[1025,"selected-filter-beneficiary"],"selectedFilterLocation":[1025,"selected-filter-location"],"filtersApplied":[32],"unfocusInputs":[64]}]]],["p-9fafbbd8",[[257,"biggive-campaign-highlights",{"spaceBelow":[2,"space-below"],"banner":[1],"campaignTitle":[1,"campaign-title"],"primaryFigureLabel":[1,"primary-figure-label"],"primaryFigureAmount":[1,"primary-figure-amount"],"secondaryFigureLabel":[1,"secondary-figure-label"],"secondaryFigureAmount":[1,"secondary-figure-amount"],"progressBarCounter":[2,"progress-bar-counter"],"primaryStatIcon":[1,"primary-stat-icon"],"primaryStatText":[1,"primary-stat-text"],"secondaryStatIcon":[1,"secondary-stat-icon"],"secondaryStatText":[1,"secondary-stat-text"],"championName":[1,"champion-name"],"championUrl":[1,"champion-url"]}]]],["p-0a0a6255",[[257,"biggive-cookie-banner",{"autoOpenPreferences":[4,"auto-open-preferences"],"blogUriPrefix":[1,"blog-uri-prefix"],"previouslyAgreedCookiePreferences":[16]},null,{"autoOpenPreferences":["autoOpenPreferencesIfRequested"]}]]],["p-00c0e2ad",[[257,"biggive-footer",{"headingLevel":[2,"heading-level"],"donateUrlPrefix":[1,"donate-url-prefix"],"blogUrlPrefix":[1,"blog-url-prefix"],"experienceUrlPrefix":[1,"experience-url-prefix"],"smallCharityWeekEnabled":[4,"small-charity-week-enabled"],"usePresetFooter":[4,"use-preset-footer"]}]]],["p-bc7d344f",[[257,"biggive-main-menu",{"blogUrlPrefix":[1,"blog-url-prefix"],"donateUrlPrefix":[1,"donate-url-prefix"],"experienceUrlPrefix":[1,"experience-url-prefix"],"smallCharityWeekEnabled":[4,"small-charity-week-enabled"],"someCampaignHasHomePageRedirect":[4,"some-campaign-has-home-page-redirect"],"isLoggedIn":[4,"is-logged-in"],"closeMobileMenuFromOutside":[64]}]]],["p-619a5487",[[257,"philco-main-menu",{"philcoUrlPrefix":[1,"philco-url-prefix"],"closeMobileMenuFromOutside":[64]}]]],["p-bef4ed2f",[[257,"biggive-article-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"slug":[1],"slugColour":[1,"slug-colour"],"date":[1],"dateColour":[1,"date-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"image1Url":[1,"image-1-url"],"image1AltText":[1,"image-1-alt-text"],"image2Url":[1,"image-2-url"],"image2AltText":[1,"image-2-alt-text"],"imageLabel":[1,"image-label"],"imageLabelColour":[1,"image-label-colour"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColour":[1,"button-colour"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"]}]]],["p-7fc271c9",[[257,"biggive-basic-card",{"spaceBelow":[2,"space-below"],"siteDesign":[1,"site-design"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"mainTitle":[1,"main-title"],"subtitle":[1],"author":[1],"date":[1],"teaser":[1],"icon":[4],"iconColour":[1,"icon-colour"],"buttonAlign":[1,"button-align"],"buttonStyle":[1,"button-style"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"headingLevel":[2,"heading-level"],"addAnimation":[4,"add-animation"]}]]],["p-ea5a1595",[[257,"biggive-call-to-action",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"slugSize":[2,"slug-size"],"slugColour":[1,"slug-colour"],"slug":[1],"mainTitleColour":[1,"main-title-colour"],"mainTitleSize":[2,"main-title-size"],"mainTitle":[1,"main-title"],"subtitleSize":[2,"subtitle-size"],"subtitleColour":[1,"subtitle-colour"],"subtitle":[1],"teaserColour":[1,"teaser-colour"],"teaser":[1],"primaryButtonUrl":[1,"primary-button-url"],"primaryButtonLabel":[1,"primary-button-label"],"primaryButtonColourScheme":[1,"primary-button-colour-scheme"],"secondaryButtonUrl":[1,"secondary-button-url"],"secondaryButtonLabel":[1,"secondary-button-label"],"secondaryButtonColourScheme":[1,"secondary-button-colour-scheme"]}]]],["p-f8dc7f28",[[257,"biggive-hero-image",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"slug":[1],"slugColour":[1,"slug-colour"],"logo":[1],"logoHeight":[2,"logo-height"],"logoAltText":[1,"logo-alt-text"],"mainImage":[1,"main-image"],"mainImageShape":[1,"main-image-shape"],"mainImageAlignHorizontal":[1,"main-image-align-horizontal"],"mainImageAlignVertical":[1,"main-image-align-vertical"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-2fc941fe",[[257,"biggive-icon-button",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundPadding":[2,"background-padding"],"text":[1],"textColour":[1,"text-colour"],"icon":[1],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"size":[1],"arrow":[4],"arrowColour":[1,"arrow-colour"],"circle":[4],"shadow":[4],"centered":[4],"rounded":[4],"buttonId":[1,"button-id"]}]]],["p-2892f4cf",[[257,"biggive-image-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"mainImageUrl":[1,"main-image-url"],"mainImageAltText":[1,"main-image-alt-text"],"textAlign":[1,"text-align"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonAlign":[1,"button-align"],"buttonStyle":[1,"button-style"],"buttonLabel":[1,"button-label"],"buttonUrl":[1,"button-url"],"buttonColourScheme":[1,"button-colour-scheme"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"addAnimation":[4,"add-animation"]}]]],["p-1fa0618a",[[257,"biggive-image-feature",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"imageUrl":[1,"image-url"],"imageAltText":[1,"image-alt-text"],"slug":[1],"slugColour":[1,"slug-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-13c1fef9",[[257,"biggive-video-feature",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"videoUrl":[1,"video-url"],"slug":[1],"slugColour":[1,"slug-colour"],"mainTitle":[1,"main-title"],"mainTitleColour":[1,"main-title-colour"],"teaser":[1],"teaserColour":[1,"teaser-colour"],"buttonUrl":[1,"button-url"],"buttonLabel":[1,"button-label"],"buttonColourScheme":[1,"button-colour-scheme"]}]]],["p-a190176d",[[257,"biggive-accordion",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"headingColour":[1,"heading-colour"],"children":[32]}]]],["p-9905bea4",[[257,"biggive-accordion-entry",{"heading":[1]}]]],["p-ccf87311",[[257,"biggive-back-to-top"]]],["p-34b6d784",[[257,"biggive-biography-card",{"spaceBelow":[2,"space-below"],"borderWidth":[2,"border-width"],"imageUrl":[1,"image-url"],"imageStyle":[1,"image-style"],"textColour":[1,"text-colour"],"backgroundColour":[1,"background-colour"],"fullName":[1,"full-name"],"jobTitle":[1,"job-title"],"textAlign":[1,"text-align"],"ratio":[1],"circle":[4],"circleColour":[1,"circle-colour"],"rounded":[4],"url":[1]}]]],["p-73c84ebe",[[257,"biggive-boxed-content",{"spaceBelow":[2,"space-below"],"verticalPadding":[2,"vertical-padding"],"horizontalPadding":[2,"horizontal-padding"],"backgroundColour":[1,"background-colour"],"shadow":[4]}]]],["p-5aa70637",[[257,"biggive-branded-image",{"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"imageHeightPercent":[2,"image-height-percent"],"imageAlt":[1,"image-alt"],"logoUrl":[1,"logo-url"],"slug":[1],"charityName":[1,"charity-name"],"charityLocation":[1,"charity-location"],"charityUrl":[1,"charity-url"]}]]],["p-37674669",[[257,"biggive-container-card",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundImageUrl":[1,"background-image-url"],"cardColour":[1,"card-colour"],"textColour":[1,"text-colour"],"clipBottomLeftCorner":[4,"clip-bottom-left-corner"],"clipTopRightCorner":[4,"clip-top-right-corner"],"headingLevel":[2,"heading-level"]}]]],["p-77e54760",[[257,"biggive-form"]]],["p-df3adeb8",[[257,"biggive-formatted-text",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"maxWidth":[2,"max-width"],"siteDesign":[1,"site-design"]}]]],["p-e8b3a71d",[[257,"biggive-grid",{"spaceBelow":[2,"space-below"],"columnCount":[2,"column-count"],"spaceBetween":[4,"space-between"],"columnGap":[2,"column-gap"]}]]],["p-4d31c426",[[257,"biggive-heading",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"colour":[1],"htmlElement":[1,"html-element"],"size":[2],"align":[1],"text":[1],"icon":[4],"iconColour":[1,"icon-colour"],"siteDesign":[1,"site-design"]}]]],["p-6ecd4ea2",[[257,"biggive-heading-banner",{"logo":[1],"slug":[1],"mainTitle":[1,"main-title"],"mainImageUrl":[1,"main-image-url"],"focalPoint":[1,"focal-point"],"teaser":[1],"backgroundColour":[1,"background-colour"],"textBackgroundColour":[1,"text-background-colour"],"slugColour":[1,"slug-colour"],"mainTitleColour":[1,"main-title-colour"],"teaserColour":[1,"teaser-colour"],"height":[1]}]]],["p-c1e9a453",[[257,"biggive-image",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"imageUrl":[1,"image-url"],"imageAltText":[1,"image-alt-text"],"width":[2],"height":[2],"sizeUnit":[1,"size-unit"]}]]],["p-4987e6ea",[[257,"biggive-image-button",{"spaceBelow":[2,"space-below"],"backgroundColour":[1,"background-colour"],"backgroundPadding":[2,"background-padding"],"text":[1],"textColour":[1,"text-colour"],"imageUrl":[1,"image-url"],"imageStyle":[1,"image-style"],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"size":[1],"arrow":[4],"arrowColour":[1,"arrow-colour"],"circle":[4],"shadow":[4],"centered":[4],"rounded":[4],"buttonId":[1,"button-id"]}]]],["p-c9615246",[[257,"biggive-nav-group",{"inline":[4]}]]],["p-5aa41b68",[[257,"biggive-nav-item",{"url":[1],"label":[1],"iconColour":[1,"icon-colour"]}]]],["p-4070bac2",[[257,"biggive-page-column"]]],["p-b4c7f4ee",[[257,"biggive-page-columns",{"spaceBelow":[2,"space-below"]}]]],["p-d71e7f23",[[257,"biggive-page-section",{"spaceBelow":[2,"space-below"],"sectionStyleTop":[1,"section-style-top"],"sectionStyleBottom":[1,"section-style-bottom"],"colourScheme":[1,"colour-scheme"],"maxWidth":[2,"max-width"],"primaryFullBleed":[4,"primary-full-bleed"]}]]],["p-37a49e85",[[257,"biggive-quote",{"spaceBelow":[2,"space-below"],"defaultTextColour":[1,"default-text-colour"],"quote":[1],"attribution":[1],"quoteIconColour":[1,"quote-icon-colour"],"siteDesign":[1,"site-design"]}]]],["p-5f7207d9",[[257,"biggive-sheet",{"sheetId":[1,"sheet-id"],"backgroundColour":[1,"background-colour"],"textColour":[1,"text-colour"]}]]],["p-1984ccdb",[[257,"biggive-tab",{"tabTitle":[1,"tab-title"]}]]],["p-13e045ea",[[257,"biggive-tabbed-content",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"selectedTextColour":[1,"selected-text-colour"],"navigationHighlightColour":[1,"navigation-highlight-colour"],"selectedNavigationHighlightColour":[1,"selected-navigation-highlight-colour"],"buttonBackgroundColour":[1,"button-background-colour"],"buttonIconColour":[1,"button-icon-colour"]}]]],["p-525a84bf",[[257,"biggive-table",{"spaceBelow":[2,"space-below"],"headerTextColour":[1,"header-text-colour"],"headerBackgroundColour":[1,"header-background-colour"],"bodyTextColour":[1,"body-text-colour"],"bodyBackgroundColour":[1,"body-background-colour"]}]]],["p-587e025a",[[257,"biggive-text-input",{"currency":[1],"spaceBelow":[2,"space-below"],"selectStyle":[1,"select-style"],"siteDesign":[1,"site-design"]}]]],["p-8506012f",[[257,"biggive-timeline",{"spaceBelow":[2,"space-below"],"textColour":[1,"text-colour"],"selectedTextColour":[1,"selected-text-colour"],"navigationHighlightColour":[1,"navigation-highlight-colour"],"selectedNavigationHighlightColour":[1,"selected-navigation-highlight-colour"],"buttonBackgroundColour":[1,"button-background-colour"],"buttonIconColour":[1,"button-icon-colour"],"entryBackgroundColour":[1,"entry-background-colour"],"entryHighlightColour":[1,"entry-highlight-colour"],"entryDateColour":[1,"entry-date-colour"],"entryTitleColour":[1,"entry-title-colour"],"entryTextColour":[1,"entry-text-colour"]}]]],["p-9bdb2bb8",[[257,"biggive-timeline-entry",{"date":[1],"heading":[1]}]]],["p-e5f3290f",[[257,"biggive-totalizer",{"spaceBelow":[2,"space-below"],"primaryColour":[1,"primary-colour"],"primaryTextColour":[1,"primary-text-colour"],"secondaryColour":[1,"secondary-colour"],"secondaryTextColour":[1,"secondary-text-colour"],"mainMessage":[1,"main-message"]}]]],["p-1a2defec",[[257,"biggive-totalizer-ticker-item",{"figure":[1],"label":[1]}]]],["p-23d36f07",[[257,"biggive-video",{"spaceAbove":[2,"space-above"],"spaceBelow":[2,"space-below"],"videoUrl":[1,"video-url"]}]]],["p-37ad5440",[[257,"philco-footer",{"headingLevel":[2,"heading-level"],"philcoUrlPrefix":[1,"philco-url-prefix"]}]]],["p-0bb89c2f",[[257,"biggive-form-field-select",{"selectionChanged":[16],"prompt":[1],"selectedValue":[1025,"selected-value"],"selectedLabel":[1025,"selected-label"],"options":[1],"selectStyle":[1,"select-style"],"backgroundColour":[1,"background-colour"],"selectedOptionColour":[1,"selected-option-colour"],"selectElementId":[1,"select-element-id"],"spaceBelow":[2,"space-below"],"placeholder":[1]}]]],["p-95f3e03e",[[257,"biggive-popup",{"modalClosedCallback":[16],"openFromOutside":[64],"closeFromOutside":[64]}]]],["p-4c27058f",[[257,"biggive-progress-bar",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"counter":[2]}]]],["p-b53429c3",[[257,"biggive-social-icon",{"service":[1],"labelPrefix":[1,"label-prefix"],"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"wide":[4],"url":[1]}]]],["p-eee51f82",[[257,"biggive-misc-icon",{"backgroundColour":[1,"background-colour"],"iconColour":[1,"icon-colour"],"icon":[1],"url":[1]}]]],["p-3600d893",[[257,"biggive-button",{"spaceBelow":[2,"space-below"],"colourScheme":[1,"colour-scheme"],"label":[1],"url":[1],"openInNewTab":[4,"open-in-new-tab"],"fullWidth":[4,"full-width"],"size":[1],"rounded":[4],"centered":[4],"buttonId":[1,"button-id"],"siteDesign":[1,"site-design"],"disabled":[4]}]]]]'),e)}));
 //# sourceMappingURL=biggive.esm.js.map

package/dist/biggive/{p-475001f5.entry.js → p-0bb89c2f.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as o,g as t}from"./p-CTC1TIdr.js";const i='a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}*,*::before,*::after{box-sizing:border-box}select{appearance:none;border:none;padding:0 1em 0 0;margin:0;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;outline:none;display:grid;background-color:#FFFFFF;align-items:center}select.grey{background-color:#F6F6F6}.selectWrapper{position:relative}.prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#FFFFFF;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.prompt.grey{background-color:#F6F6F6}.dropdown{font-family:"Euclid Triangle", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.dropdown.select-style-bordered .sleeve{font-size:17px;line-height:24px;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select span.placeholder.grey{background-color:#F6F6F6}.dropdown.select-style-bordered .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.select-style-bordered .sleeve:focus-within{background-color:#FF7272}.dropdown.select-style-underlined .sleeve{font-size:17px;line-height:24px;padding:1px;position:relative;border-bottom:1px solid #2C089B}.dropdown.select-style-underlined .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px}.dropdown.select-style-underlined .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.inherit-colour select{color:inherit !important}.dropdown select{max-height:200px;overflow-x:hidden;overflow-y:scroll;width:100%;z-index:1;left:0;right:0}.dropdown.active .options{display:block}.dropdown.noprompt{margin-top:0}.options.grey{background-color:#F6F6F6}';const r=class{constructor(o){e(this,o);this.selectStyle="bordered";this.selectedOptionColour="blue";this.doOptionSelectCompletedHandler=e=>{const o=e.target.value;this.selectedValue=o;this.selectedLabel=e.target.label;this.selectionChanged(o)};this.spaceBelow=0}render(){const e=this.backgroundColour==="grey"?" grey":"";let t=this.formatOptions(this.options);if(typeof this.placeholder==="string"&&typeof this.selectedValue!=="string"){t=[{value:"__placeholder__",label:this.placeholder},...t]}if(typeof t==="undefined"){console.error("options undefined");t=[]}const i=this.selectElementId||"select-"+this.getRandomInt().toString();return o("div",{key:"b0a1d15823be95bf001cf6bee579a95d63aa6e95",class:"selectWrapper"},o("label",{key:"c6f1bc9c1d4ea613d962b49493b3b2c6175955cf",class:e,htmlFor:i},o("div",{key:"7a5f7319f9e0ca4d894868367be7c42cfc706474",class:"prompt"+e},this.prompt)),o("div",{key:"0415588686695208ed35fb49adf1243e50ccc2ea",class:"dropdown space-below-"+this.spaceBelow+" select-style-"+this.selectStyle+(this.prompt===null?"  noprompt":"")+(this.selectedOptionColour==="inherit"?" inherit-colour":"")},o("div",{key:"a479c5085a1498d619f7a2eea7ce002650db584c",class:"sleeve"},o("select",{key:"24e7c1f825eeca9672680e800b9a3058294c122f",id:i,class:e,onChange:this.doOptionSelectCompletedHandler,"aria-label":this.prompt===null?this.placeholder:this.prompt},t.map((e=>o("option",{selected:this.selectedValue===e.value,value:e.value},e.label)))),o("div",{key:"fd9553dde63067ac87362a78ff88534bb1a6ee6d",class:"arrow"}))))}formatOptions(e){if(e===undefined){return[]}if(typeof e==="string"){e=JSON.parse(e)}if(Array.isArray(e)){return e}return Object.entries(e).map((e=>({value:e[0],label:e[1]})))}getRandomInt(){const e=1e6;const o=9999999;return Math.floor(Math.random()*(o-e)+e)}get el(){return t(this)}};r.style=i;export{r as biggive_form_field_select};
-//# sourceMappingURL=p-475001f5.entry.js.map
+import{r as e,h as o,g as t}from"./p-CTC1TIdr.js";const i='a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}*,*::before,*::after{box-sizing:border-box}select{appearance:none;border:none;padding:0 1em 0 0;margin:0;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;outline:none;display:grid;background-color:#FFFFFF;align-items:center}select.grey{background-color:#F6F6F6}.selectWrapper{position:relative}.prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#FFFFFF;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.prompt.grey{background-color:#F6F6F6}.dropdown{font-family:"Euclid Triangle", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.dropdown.select-style-bordered .sleeve{font-size:17px;line-height:24px;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select span.placeholder.grey{background-color:#F6F6F6}.dropdown.select-style-bordered .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.select-style-bordered .sleeve:focus-within{background-color:#2AF135}.dropdown.select-style-underlined .sleeve{font-size:17px;line-height:24px;padding:1px;position:relative;border-bottom:1px solid #2C089B}.dropdown.select-style-underlined .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px}.dropdown.select-style-underlined .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.inherit-colour select{color:inherit !important}.dropdown select{max-height:200px;overflow-x:hidden;overflow-y:scroll;width:100%;z-index:1;left:0;right:0}.dropdown.active .options{display:block}.dropdown.noprompt{margin-top:0}.options.grey{background-color:#F6F6F6}';const r=class{constructor(o){e(this,o);this.selectStyle="bordered";this.selectedOptionColour="blue";this.doOptionSelectCompletedHandler=e=>{const o=e.target.value;this.selectedValue=o;this.selectedLabel=e.target.label;this.selectionChanged(o)};this.spaceBelow=0}render(){const e=this.backgroundColour==="grey"?" grey":"";let t=this.formatOptions(this.options);if(typeof this.placeholder==="string"&&typeof this.selectedValue!=="string"){t=[{value:"__placeholder__",label:this.placeholder},...t]}if(typeof t==="undefined"){console.error("options undefined");t=[]}const i=this.selectElementId||"select-"+this.getRandomInt().toString();return o("div",{key:"b0a1d15823be95bf001cf6bee579a95d63aa6e95",class:"selectWrapper"},o("label",{key:"c6f1bc9c1d4ea613d962b49493b3b2c6175955cf",class:e,htmlFor:i},o("div",{key:"7a5f7319f9e0ca4d894868367be7c42cfc706474",class:"prompt"+e},this.prompt)),o("div",{key:"0415588686695208ed35fb49adf1243e50ccc2ea",class:"dropdown space-below-"+this.spaceBelow+" select-style-"+this.selectStyle+(this.prompt===null?"  noprompt":"")+(this.selectedOptionColour==="inherit"?" inherit-colour":"")},o("div",{key:"a479c5085a1498d619f7a2eea7ce002650db584c",class:"sleeve"},o("select",{key:"24e7c1f825eeca9672680e800b9a3058294c122f",id:i,class:e,onChange:this.doOptionSelectCompletedHandler,"aria-label":this.prompt===null?this.placeholder:this.prompt},t.map((e=>o("option",{selected:this.selectedValue===e.value,value:e.value},e.label)))),o("div",{key:"fd9553dde63067ac87362a78ff88534bb1a6ee6d",class:"arrow"}))))}formatOptions(e){if(e===undefined){return[]}if(typeof e==="string"){e=JSON.parse(e)}if(Array.isArray(e)){return e}return Object.entries(e).map((e=>({value:e[0],label:e[1]})))}getRandomInt(){const e=1e6;const o=9999999;return Math.floor(Math.random()*(o-e)+e)}get el(){return t(this)}};r.style=i;export{r as biggive_form_field_select};
+//# sourceMappingURL=p-0bb89c2f.entry.js.map

package/dist/biggive/{p-9e949feb.entry.js → p-587e025a.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,g as o}from"./p-CTC1TIdr.js";const i='a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}::slotted([slot=label]){display:inline-block;line-height:1.2}.text-input{position:relative;font-family:"Euclid Triangle", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{position:absolute}.text-input .prompt{position:relative;z-index:2;font-size:small;top:1em;left:4em;color:#2C089B;max-width:calc(100% - 10em);display:inline-block}.text-input .prompt>span{padding-left:1em;padding-right:1em;background-color:#F6F6F6}.text-input.philco .prompt{color:#1d1d1B}.text-input.philco .prompt>span{background-color:#FFFFFF}.text-input.select-style-bordered.biggive .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve{background-color:#F6F6F6;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve:after{content:"";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}.text-input.select-style-bordered.biggive .sleeve.focused{background-color:#FF7272}.text-input.select-style-bordered.philco .inner-sleeve{border:2px solid #1d1d1B;border-radius:6px;padding:12px}';const a=class{constructor(t){e(this,t);this.spaceBelow=0;this.selectStyle="bordered";this.siteDesign="biggive"}render(){const e=this.currency==="GBP"?"£":this.currency==="USD"?"$":undefined;return t("div",{key:"7f4a4795675c94d8cd04e7291581e6e678c4a079",class:"text-input space-below-"+this.spaceBelow+" select-style-"+this.selectStyle+" "+this.siteDesign},t("div",{key:"cbcade0666555cd74d2de7e646a8ecd4d928b81b",class:"prompt"},t("span",{key:"0ad87c5cfc5faf4240a2302d0df555cfe963c580"},t("slot",{key:"9d2bfcc1870b0232f3daced3b20274ff18b887f2",name:"label"}))),t("div",{key:"37d85e25ec0982470579376ea22ce95a830c23b9",class:"sleeve"},t("div",{key:"ba0f0c77b4924bbf33f275e15f1370f75a97ada4",class:"inner-sleeve"},e&&t("span",{key:"e100519d9953193e71ea15d6f5469637f0d2f3a5",class:"currency-symbol"},e),t("slot",{key:"8cd23da3fc99895c267483ae682469b0064243cf",name:"input"}),t("div",{key:"2d117729409e5e735192f297b3ea45f90fcf309a",style:{clear:"both"}}))))}componentDidLoad(){const e=this.host.querySelector(`[slot="input"]`);const t=this.host.shadowRoot.querySelector(".sleeve");if(!e){throw new Error("Input slot element required for biggive-text-input")}e.addEventListener("focusin",(()=>t.classList.add("focused")));e.addEventListener("focusout",(()=>t.classList.remove("focused")))}get host(){return o(this)}};a.style=i;export{a as biggive_text_input};
-//# sourceMappingURL=p-9e949feb.entry.js.map
+import{r as e,h as t,g as o}from"./p-CTC1TIdr.js";const i='a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}::slotted([slot=label]){display:inline-block;line-height:1.2}.text-input{position:relative;font-family:"Euclid Triangle", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{position:absolute}.text-input .prompt{position:relative;z-index:2;font-size:small;top:1em;left:4em;color:#2C089B;max-width:calc(100% - 10em);display:inline-block}.text-input .prompt>span{padding-left:1em;padding-right:1em;background-color:#F6F6F6}.text-input.philco .prompt{color:#1d1d1B}.text-input.philco .prompt>span{background-color:#FFFFFF}.text-input.select-style-bordered.biggive .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve{background-color:#F6F6F6;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve:after{content:"";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}.text-input.select-style-bordered.biggive .sleeve.focused{background-color:#2AF135}.text-input.select-style-bordered.philco .inner-sleeve{border:2px solid #1d1d1B;border-radius:6px;padding:12px}';const a=class{constructor(t){e(this,t);this.spaceBelow=0;this.selectStyle="bordered";this.siteDesign="biggive"}render(){const e=this.currency==="GBP"?"£":this.currency==="USD"?"$":undefined;return t("div",{key:"7f4a4795675c94d8cd04e7291581e6e678c4a079",class:"text-input space-below-"+this.spaceBelow+" select-style-"+this.selectStyle+" "+this.siteDesign},t("div",{key:"cbcade0666555cd74d2de7e646a8ecd4d928b81b",class:"prompt"},t("span",{key:"0ad87c5cfc5faf4240a2302d0df555cfe963c580"},t("slot",{key:"9d2bfcc1870b0232f3daced3b20274ff18b887f2",name:"label"}))),t("div",{key:"37d85e25ec0982470579376ea22ce95a830c23b9",class:"sleeve"},t("div",{key:"ba0f0c77b4924bbf33f275e15f1370f75a97ada4",class:"inner-sleeve"},e&&t("span",{key:"e100519d9953193e71ea15d6f5469637f0d2f3a5",class:"currency-symbol"},e),t("slot",{key:"8cd23da3fc99895c267483ae682469b0064243cf",name:"input"}),t("div",{key:"2d117729409e5e735192f297b3ea45f90fcf309a",style:{clear:"both"}}))))}componentDidLoad(){const e=this.host.querySelector(`[slot="input"]`);const t=this.host.shadowRoot.querySelector(".sleeve");if(!e){throw new Error("Input slot element required for biggive-text-input")}e.addEventListener("focusin",(()=>t.classList.add("focused")));e.addEventListener("focusout",(()=>t.classList.remove("focused")))}get host(){return o(this)}};a.style=i;export{a as biggive_text_input};
+//# sourceMappingURL=p-587e025a.entry.js.map

package/dist/cjs/biggive-form-field-select.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CjbwKJ_Y.js');
 
-const biggiveFormFieldSelectCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}*,*::before,*::after{box-sizing:border-box}select{appearance:none;border:none;padding:0 1em 0 0;margin:0;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;outline:none;display:grid;background-color:#FFFFFF;align-items:center}select.grey{background-color:#F6F6F6}.selectWrapper{position:relative}.prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#FFFFFF;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.prompt.grey{background-color:#F6F6F6}.dropdown{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.dropdown.select-style-bordered .sleeve{font-size:17px;line-height:24px;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select span.placeholder.grey{background-color:#F6F6F6}.dropdown.select-style-bordered .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.select-style-bordered .sleeve:focus-within{background-color:#FF7272}.dropdown.select-style-underlined .sleeve{font-size:17px;line-height:24px;padding:1px;position:relative;border-bottom:1px solid #2C089B}.dropdown.select-style-underlined .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px}.dropdown.select-style-underlined .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.inherit-colour select{color:inherit !important}.dropdown select{max-height:200px;overflow-x:hidden;overflow-y:scroll;width:100%;z-index:1;left:0;right:0}.dropdown.active .options{display:block}.dropdown.noprompt{margin-top:0}.options.grey{background-color:#F6F6F6}";
+const biggiveFormFieldSelectCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}*,*::before,*::after{box-sizing:border-box}select{appearance:none;border:none;padding:0 1em 0 0;margin:0;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;outline:none;display:grid;background-color:#FFFFFF;align-items:center}select.grey{background-color:#F6F6F6}.selectWrapper{position:relative}.prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#FFFFFF;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.prompt.grey{background-color:#F6F6F6}.dropdown{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.dropdown.select-style-bordered .sleeve{font-size:17px;line-height:24px;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select span.placeholder.grey{background-color:#F6F6F6}.dropdown.select-style-bordered .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.select-style-bordered .sleeve:focus-within{background-color:#2AF135}.dropdown.select-style-underlined .sleeve{font-size:17px;line-height:24px;padding:1px;position:relative;border-bottom:1px solid #2C089B}.dropdown.select-style-underlined .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px}.dropdown.select-style-underlined .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.inherit-colour select{color:inherit !important}.dropdown select{max-height:200px;overflow-x:hidden;overflow-y:scroll;width:100%;z-index:1;left:0;right:0}.dropdown.active .options{display:block}.dropdown.noprompt{margin-top:0}.options.grey{background-color:#F6F6F6}";
 
 const BiggiveFormFieldSelect = class {
     constructor(hostRef) {

package/dist/cjs/biggive-form-field-select.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"biggive-form-field-select.entry.cjs.js","sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n  display: contents;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nselect {\n  appearance: none;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n  outline: none;\n  display: grid;\n  background-color: $colour-white;\n  align-items: center;\n}\nselect.grey {\n  background-color: $colour-grey-background;\n}\n.selectWrapper {\n  position: relative;\n}\n.prompt {\n  position: absolute;\n  z-index: 2;\n  font-size: small;\n  top: -1em;\n  background-color: $colour-white;\n  left: 4em;\n  padding-left: 1em;\n  padding-right: 1em;\n  color: $colour-primary-blue;\n}\n.prompt.grey {\n  background-color: $colour-grey-background;\n}\n\n.dropdown {\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include font-size-medium();\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      select {\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 80px 10px 10px;\n        clip-path:\n          polygon(\n              0% 0%,     /* top left */\n              0% 0%,     /* top left */\n              calc(100% - 14px) 0%,    /* top right */\n              100% 14px,   /* top right */\n              100% 100%,  /* bottom right */\n              100% 100%,  /* bottom right */\n              0 100%,   /* bottom left */\n              0 100%      /* bottom left */\n          );\n        span.placeholder.grey {\n          background-color: $colour-grey-background;\n        }\n      }\n      div.arrow {\n        position: absolute;\n        right: 20px;\n        top: 18px;\n        width: 10px;\n        height: 10px;\n        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        z-index: 1;\n        pointer-events: none;\n      }\n    }\n    .sleeve:focus-within {\n      background-color: $colour-tertiary-coral;\n    }\n  }\n  &.select-style-underlined {\n    .sleeve {\n      @include dropdown-underlined();\n    }\n  }\n  &.inherit-colour select{\n   color: inherit !important;\n  }\n\n  select {\n    max-height: 200px;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    width: 100%;\n    z-index: 1;\n    left: 0;\n    right: 0;\n  }\n  &.active .options {\n      display: block;\n  }\n}\n.dropdown.noprompt {\n  margin-top: 0;\n}\n.options.grey {\n  background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form-field-select',\n  styleUrl: 'biggive-form-field-select.scss',\n  shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n  @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n  @Prop() selectionChanged: (value: string) => void;\n\n  /**\n   * Displayed as 'eyebrow' label over the top border of the box.\n   */\n  @Prop() prompt!: string | null;\n\n  @Prop({ mutable: true }) selectedValue: string | null;\n  @Prop({ mutable: true }) selectedLabel: string | null;\n\n  /**\n   * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() options!: string | Array<{ label: string; value: string }>;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  /**\n   * Must match background of containing element, or unintended shape will appear.\n   */\n  @Prop() backgroundColour: 'white' | 'grey';\n\n  @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n  /**\n   * ID for the select element, used by a label. If not passed then a random id will be generated.\n   */\n  @Prop() selectElementId: string | undefined;\n\n  private doOptionSelectCompletedHandler = (event: any) => {\n    const value = event.target.value;\n    this.selectedValue = value;\n    this.selectedLabel = event.target.label;\n    this.selectionChanged(value);\n  };\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\n   */\n  @Prop() placeholder: string | undefined;\n\n  render() {\n    const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n    let options = this.formatOptions(this.options);\n\n    if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n    }\n\n    if (typeof options === 'undefined') {\n      console.error('options undefined');\n      options = [];\n    }\n    // Give the select a random id so we can reference it from a label\n    const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired} htmlFor={selectId}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n        </label>\n        <div\n          class={\n            'dropdown space-below-' +\n            this.spaceBelow +\n            ' select-style-' +\n            this.selectStyle +\n            (this.prompt === null ? '  noprompt' : '') +\n            (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n          }\n        >\n          <div class=\"sleeve\">\n            <select id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\n              {options.map(option => (\n                <option selected={this.selectedValue === option.value} value={option.value}>\n                  {option.label}\n                </option>\n              ))}\n            </select>\n            <div class=\"arrow\"></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private formatOptions(options: string | Array<{ label: string; value: string }>): {\n    label: string;\n    value: string;\n  }[] {\n    if (options === undefined) {\n      return [];\n    }\n\n    if (typeof options === 'string') {\n      options = JSON.parse(options);\n    }\n\n    if (Array.isArray(options)) {\n      return options;\n    }\n\n    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n  }\n\n  private getRandomInt(): number {\n    const min = 1_000_000;\n    const max = 9_999_999;\n    return Math.floor(Math.random() * (max - min) + min);\n  }\n}\n"],"names":["h"],"mappings":"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"}
+{"version":3,"file":"biggive-form-field-select.entry.cjs.js","sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n  display: contents;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nselect {\n  appearance: none;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n  outline: none;\n  display: grid;\n  background-color: $colour-white;\n  align-items: center;\n}\nselect.grey {\n  background-color: $colour-grey-background;\n}\n.selectWrapper {\n  position: relative;\n}\n.prompt {\n  position: absolute;\n  z-index: 2;\n  font-size: small;\n  top: -1em;\n  background-color: $colour-white;\n  left: 4em;\n  padding-left: 1em;\n  padding-right: 1em;\n  color: $colour-primary-blue;\n}\n.prompt.grey {\n  background-color: $colour-grey-background;\n}\n\n.dropdown {\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include font-size-medium();\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      select {\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 80px 10px 10px;\n        clip-path:\n          polygon(\n              0% 0%,     /* top left */\n              0% 0%,     /* top left */\n              calc(100% - 14px) 0%,    /* top right */\n              100% 14px,   /* top right */\n              100% 100%,  /* bottom right */\n              100% 100%,  /* bottom right */\n              0 100%,   /* bottom left */\n              0 100%      /* bottom left */\n          );\n        span.placeholder.grey {\n          background-color: $colour-grey-background;\n        }\n      }\n      div.arrow {\n        position: absolute;\n        right: 20px;\n        top: 18px;\n        width: 10px;\n        height: 10px;\n        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        z-index: 1;\n        pointer-events: none;\n      }\n    }\n    .sleeve:focus-within {\n      background-color: $colour-secondary-green;\n    }\n  }\n  &.select-style-underlined {\n    .sleeve {\n      @include dropdown-underlined();\n    }\n  }\n  &.inherit-colour select{\n   color: inherit !important;\n  }\n\n  select {\n    max-height: 200px;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    width: 100%;\n    z-index: 1;\n    left: 0;\n    right: 0;\n  }\n  &.active .options {\n      display: block;\n  }\n}\n.dropdown.noprompt {\n  margin-top: 0;\n}\n.options.grey {\n  background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form-field-select',\n  styleUrl: 'biggive-form-field-select.scss',\n  shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n  @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n  @Prop() selectionChanged: (value: string) => void;\n\n  /**\n   * Displayed as 'eyebrow' label over the top border of the box.\n   */\n  @Prop() prompt!: string | null;\n\n  @Prop({ mutable: true }) selectedValue: string | null;\n  @Prop({ mutable: true }) selectedLabel: string | null;\n\n  /**\n   * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() options!: string | Array<{ label: string; value: string }>;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  /**\n   * Must match background of containing element, or unintended shape will appear.\n   */\n  @Prop() backgroundColour: 'white' | 'grey';\n\n  @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n  /**\n   * ID for the select element, used by a label. If not passed then a random id will be generated.\n   */\n  @Prop() selectElementId: string | undefined;\n\n  private doOptionSelectCompletedHandler = (event: any) => {\n    const value = event.target.value;\n    this.selectedValue = value;\n    this.selectedLabel = event.target.label;\n    this.selectionChanged(value);\n  };\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\n   */\n  @Prop() placeholder: string | undefined;\n\n  render() {\n    const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n    let options = this.formatOptions(this.options);\n\n    if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n    }\n\n    if (typeof options === 'undefined') {\n      console.error('options undefined');\n      options = [];\n    }\n    // Give the select a random id so we can reference it from a label\n    const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired} htmlFor={selectId}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n        </label>\n        <div\n          class={\n            'dropdown space-below-' +\n            this.spaceBelow +\n            ' select-style-' +\n            this.selectStyle +\n            (this.prompt === null ? '  noprompt' : '') +\n            (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n          }\n        >\n          <div class=\"sleeve\">\n            <select id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\n              {options.map(option => (\n                <option selected={this.selectedValue === option.value} value={option.value}>\n                  {option.label}\n                </option>\n              ))}\n            </select>\n            <div class=\"arrow\"></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private formatOptions(options: string | Array<{ label: string; value: string }>): {\n    label: string;\n    value: string;\n  }[] {\n    if (options === undefined) {\n      return [];\n    }\n\n    if (typeof options === 'string') {\n      options = JSON.parse(options);\n    }\n\n    if (Array.isArray(options)) {\n      return options;\n    }\n\n    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n  }\n\n  private getRandomInt(): number {\n    const min = 1_000_000;\n    const max = 9_999_999;\n    return Math.floor(Math.random() * (max - min) + min);\n  }\n}\n"],"names":["h"],"mappings":"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"}

package/dist/cjs/biggive-text-input.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CjbwKJ_Y.js');
 
-const biggiveTextInputCss = "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}::slotted([slot=label]){display:inline-block;line-height:1.2}.text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{position:absolute}.text-input .prompt{position:relative;z-index:2;font-size:small;top:1em;left:4em;color:#2C089B;max-width:calc(100% - 10em);display:inline-block}.text-input .prompt>span{padding-left:1em;padding-right:1em;background-color:#F6F6F6}.text-input.philco .prompt{color:#1d1d1B}.text-input.philco .prompt>span{background-color:#FFFFFF}.text-input.select-style-bordered.biggive .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve{background-color:#F6F6F6;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}.text-input.select-style-bordered.biggive .sleeve.focused{background-color:#FF7272}.text-input.select-style-bordered.philco .inner-sleeve{border:2px solid #1d1d1B;border-radius:6px;padding:12px}";
+const biggiveTextInputCss = "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}::slotted([slot=label]){display:inline-block;line-height:1.2}.text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{position:absolute}.text-input .prompt{position:relative;z-index:2;font-size:small;top:1em;left:4em;color:#2C089B;max-width:calc(100% - 10em);display:inline-block}.text-input .prompt>span{padding-left:1em;padding-right:1em;background-color:#F6F6F6}.text-input.philco .prompt{color:#1d1d1B}.text-input.philco .prompt>span{background-color:#FFFFFF}.text-input.select-style-bordered.biggive .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve{background-color:#F6F6F6;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}.text-input.select-style-bordered.biggive .sleeve.focused{background-color:#2AF135}.text-input.select-style-bordered.philco .inner-sleeve{border:2px solid #1d1d1B;border-radius:6px;padding:12px}";
 
 const BiggiveTextInput = class {
     constructor(hostRef) {

package/dist/cjs/biggive-text-input.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"biggive-text-input.entry.cjs.js","sources":["src/components/biggive-text-input/biggive-text-input.scss?tag=biggive-text-input&encapsulation=shadow","src/components/biggive-text-input/biggive-text-input.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n::slotted([slot=label]) {\n  display: inline-block;\n  line-height: 1.2; // Slightly less than other text to help with long charity names.\n}\n\n.text-input {\n  .currency-symbol {\n    position: absolute;\n  }\n  position: relative;\n  .prompt {\n    position: relative;\n    z-index: 2;\n    font-size: small;\n    top: 1em;\n    left: 4em;\n    color: $colour-primary-blue;\n    max-width: calc(100% - 10em);\n    display: inline-block;\n\n    > span {\n      padding-left: 1em;\n      padding-right: 1em;\n      background-color: $colour-grey-background;\n    }\n  }\n\n\n  &.philco .prompt {\n    color: $colour-philco-gray-90;\n\n    > span {\n      background-color: $colour-philco-white;\n    }\n  }\n\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered.biggive{\n    .sleeve {\n      @include font-size-large();\n      font-weight: bolder;\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      .inner-sleeve {\n        background-color: $colour-grey-background;\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 30px 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          &:after {\n            content: '';\n            display: block;\n            position: absolute;\n            right: 20px;\n            top: 18px;\n            width: 10px;\n            height: 10px;\n            background-size: contain;\n            background-repeat: no-repeat;\n            background-position: center center;\n          }\n      }\n      &.focused {\n        background-color: $colour-tertiary-coral;\n      }\n    }\n  }\n  &.select-style-bordered.philco {\n    .inner-sleeve {\n      border: 2px solid $colour-philco-gray-90;\n      border-radius: 6px;\n      padding: 12px;\n    }\n  }\n}\n\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * Initially developed for use within the new donate stepper design. Currently has a hard-coded background\n * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.\n *\n * Please ensure input is styled as width: 100%.\n *\n * Requires slots `label` and `input`.\n */\n@Component({\n  tag: 'biggive-text-input',\n  styleUrl: 'biggive-text-input.scss',\n  shadow: true,\n})\nexport class BiggiveTextInput {\n  @Element() host: HTMLBiggiveTextInputElement;\n\n  /**\n   * ISO-4217 currency code if input is for a money value\n   */\n  @Prop() currency: 'GBP' | 'USD' | undefined;\n  @Prop() spaceBelow: number = 0;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n  @Prop() siteDesign: 'biggive' | 'philco' = 'biggive';\n\n  render() {\n    const currencySymbol = this.currency === 'GBP' ? '£' : this.currency === 'USD' ? '$' : undefined;\n    return (\n      <div class={'text-input space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle + ' ' + this.siteDesign}>\n        <div class=\"prompt\">\n          <span>\n            <slot name=\"label\" />\n          </span>\n        </div>\n        <div class=\"sleeve\">\n          <div class=\"inner-sleeve\">\n            {currencySymbol && <span class=\"currency-symbol\">{currencySymbol}</span>}\n            <slot name=\"input\" />\n            <div style={{ clear: 'both' }}></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  componentDidLoad() {\n    const nativeInput: HTMLElement | null = this.host.querySelector(`[slot=\"input\"]`);\n    const sleave = this.host.shadowRoot!.querySelector('.sleeve')!;\n\n    if (!nativeInput) {\n      throw new Error('Input slot element required for biggive-text-input');\n    }\n\n    nativeInput.addEventListener('focusin', () => sleave.classList.add('focused'));\n    nativeInput.addEventListener('focusout', () => sleave.classList.remove('focused'));\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,iiEAAiiE;;MCehjE,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYU,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AACtB,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AACnD,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAiCrD;IA/BC,MAAM,GAAA;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,SAAS;AAChG,QAAA,QACEA,kEAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,WAAW,GAAG,GAAG,GAAG,IAAI,CAAC,UAAU,EAAA,EACnHA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CAChB,CACH,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,cAAc,IAAIA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAAE,cAAc,CAAQ,EACxEA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,CAAQ,CACjC,CACF,CACF;;IAIV,gBAAgB,GAAA;QACd,MAAM,WAAW,GAAuB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAgB,cAAA,CAAA,CAAC;AACjF,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,SAAS,CAAE;QAE9D,IAAI,CAAC,WAAW,EAAE;AAChB,YAAA,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC;;AAGvE,QAAA,WAAW,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;AAC9E,QAAA,WAAW,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;;;;;;;;"}
+{"version":3,"file":"biggive-text-input.entry.cjs.js","sources":["src/components/biggive-text-input/biggive-text-input.scss?tag=biggive-text-input&encapsulation=shadow","src/components/biggive-text-input/biggive-text-input.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n::slotted([slot=label]) {\n  display: inline-block;\n  line-height: 1.2; // Slightly less than other text to help with long charity names.\n}\n\n.text-input {\n  .currency-symbol {\n    position: absolute;\n  }\n  position: relative;\n  .prompt {\n    position: relative;\n    z-index: 2;\n    font-size: small;\n    top: 1em;\n    left: 4em;\n    color: $colour-primary-blue;\n    max-width: calc(100% - 10em);\n    display: inline-block;\n\n    > span {\n      padding-left: 1em;\n      padding-right: 1em;\n      background-color: $colour-grey-background;\n    }\n  }\n\n\n  &.philco .prompt {\n    color: $colour-philco-gray-90;\n\n    > span {\n      background-color: $colour-philco-white;\n    }\n  }\n\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered.biggive{\n    .sleeve {\n      @include font-size-large();\n      font-weight: bolder;\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      .inner-sleeve {\n        background-color: $colour-grey-background;\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 30px 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          &:after {\n            content: '';\n            display: block;\n            position: absolute;\n            right: 20px;\n            top: 18px;\n            width: 10px;\n            height: 10px;\n            background-size: contain;\n            background-repeat: no-repeat;\n            background-position: center center;\n          }\n      }\n      &.focused {\n        background-color: $colour-secondary-green;\n      }\n    }\n  }\n  &.select-style-bordered.philco {\n    .inner-sleeve {\n      border: 2px solid $colour-philco-gray-90;\n      border-radius: 6px;\n      padding: 12px;\n    }\n  }\n}\n\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * Initially developed for use within the new donate stepper design. Currently has a hard-coded background\n * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.\n *\n * Please ensure input is styled as width: 100%.\n *\n * Requires slots `label` and `input`.\n */\n@Component({\n  tag: 'biggive-text-input',\n  styleUrl: 'biggive-text-input.scss',\n  shadow: true,\n})\nexport class BiggiveTextInput {\n  @Element() host: HTMLBiggiveTextInputElement;\n\n  /**\n   * ISO-4217 currency code if input is for a money value\n   */\n  @Prop() currency: 'GBP' | 'USD' | undefined;\n  @Prop() spaceBelow: number = 0;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n  @Prop() siteDesign: 'biggive' | 'philco' = 'biggive';\n\n  render() {\n    const currencySymbol = this.currency === 'GBP' ? '£' : this.currency === 'USD' ? '$' : undefined;\n    return (\n      <div class={'text-input space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle + ' ' + this.siteDesign}>\n        <div class=\"prompt\">\n          <span>\n            <slot name=\"label\" />\n          </span>\n        </div>\n        <div class=\"sleeve\">\n          <div class=\"inner-sleeve\">\n            {currencySymbol && <span class=\"currency-symbol\">{currencySymbol}</span>}\n            <slot name=\"input\" />\n            <div style={{ clear: 'both' }}></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  componentDidLoad() {\n    const nativeInput: HTMLElement | null = this.host.querySelector(`[slot=\"input\"]`);\n    const sleave = this.host.shadowRoot!.querySelector('.sleeve')!;\n\n    if (!nativeInput) {\n      throw new Error('Input slot element required for biggive-text-input');\n    }\n\n    nativeInput.addEventListener('focusin', () => sleave.classList.add('focused'));\n    nativeInput.addEventListener('focusout', () => sleave.classList.remove('focused'));\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,iiEAAiiE;;MCehjE,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYU,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AACtB,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AACnD,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAiCrD;IA/BC,MAAM,GAAA;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,SAAS;AAChG,QAAA,QACEA,kEAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,WAAW,GAAG,GAAG,GAAG,IAAI,CAAC,UAAU,EAAA,EACnHA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CAChB,CACH,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,cAAc,IAAIA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAAE,cAAc,CAAQ,EACxEA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,CAAQ,CACjC,CACF,CACF;;IAIV,gBAAgB,GAAA;QACd,MAAM,WAAW,GAAuB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAgB,cAAA,CAAA,CAAC;AACjF,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,SAAS,CAAE;QAE9D,IAAI,CAAC,WAAW,EAAE;AAChB,YAAA,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC;;AAGvE,QAAA,WAAW,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;AAC9E,QAAA,WAAW,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;;;;;;;;"}

package/dist/collection/components/biggive-form-field-select/biggive-form-field-select.css

@@ -156,7 +156,7 @@ select.grey {
   pointer-events: none;
 }
 .dropdown.select-style-bordered .sleeve:focus-within {
-  background-color: #FF7272;
+  background-color: #2AF135;
 }
 .dropdown.select-style-underlined .sleeve {
   font-size: 17px;

package/dist/collection/components/biggive-text-input/biggive-text-input.css

@@ -138,7 +138,7 @@ a:hover {
   background-position: center center;
 }
 .text-input.select-style-bordered.biggive .sleeve.focused {
-  background-color: #FF7272;
+  background-color: #2AF135;
 }
 .text-input.select-style-bordered.philco .inner-sleeve {
   border: 2px solid #1d1d1B;

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const biggiveFormFieldSelectCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}*,*::before,*::after{box-sizing:border-box}select{appearance:none;border:none;padding:0 1em 0 0;margin:0;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;outline:none;display:grid;background-color:#FFFFFF;align-items:center}select.grey{background-color:#F6F6F6}.selectWrapper{position:relative}.prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#FFFFFF;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.prompt.grey{background-color:#F6F6F6}.dropdown{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.dropdown.select-style-bordered .sleeve{font-size:17px;line-height:24px;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select span.placeholder.grey{background-color:#F6F6F6}.dropdown.select-style-bordered .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.select-style-bordered .sleeve:focus-within{background-color:#FF7272}.dropdown.select-style-underlined .sleeve{font-size:17px;line-height:24px;padding:1px;position:relative;border-bottom:1px solid #2C089B}.dropdown.select-style-underlined .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px}.dropdown.select-style-underlined .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.inherit-colour select{color:inherit !important}.dropdown select{max-height:200px;overflow-x:hidden;overflow-y:scroll;width:100%;z-index:1;left:0;right:0}.dropdown.active .options{display:block}.dropdown.noprompt{margin-top:0}.options.grey{background-color:#F6F6F6}";
+const biggiveFormFieldSelectCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}*,*::before,*::after{box-sizing:border-box}select{appearance:none;border:none;padding:0 1em 0 0;margin:0;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;outline:none;display:grid;background-color:#FFFFFF;align-items:center}select.grey{background-color:#F6F6F6}.selectWrapper{position:relative}.prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#FFFFFF;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.prompt.grey{background-color:#F6F6F6}.dropdown{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.dropdown.select-style-bordered .sleeve{font-size:17px;line-height:24px;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select span.placeholder.grey{background-color:#F6F6F6}.dropdown.select-style-bordered .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.select-style-bordered .sleeve:focus-within{background-color:#2AF135}.dropdown.select-style-underlined .sleeve{font-size:17px;line-height:24px;padding:1px;position:relative;border-bottom:1px solid #2C089B}.dropdown.select-style-underlined .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px}.dropdown.select-style-underlined .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.inherit-colour select{color:inherit !important}.dropdown select{max-height:200px;overflow-x:hidden;overflow-y:scroll;width:100%;z-index:1;left:0;right:0}.dropdown.active .options{display:block}.dropdown.noprompt{margin-top:0}.options.grey{background-color:#F6F6F6}";
 
 const BiggiveFormFieldSelect = /*@__PURE__*/ proxyCustomElement(class BiggiveFormFieldSelect extends HTMLElement {
     constructor(registerHost) {

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

@@ -1 +1 @@
-{"file":"biggive-form-field-select2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n  display: contents;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nselect {\n  appearance: none;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n  outline: none;\n  display: grid;\n  background-color: $colour-white;\n  align-items: center;\n}\nselect.grey {\n  background-color: $colour-grey-background;\n}\n.selectWrapper {\n  position: relative;\n}\n.prompt {\n  position: absolute;\n  z-index: 2;\n  font-size: small;\n  top: -1em;\n  background-color: $colour-white;\n  left: 4em;\n  padding-left: 1em;\n  padding-right: 1em;\n  color: $colour-primary-blue;\n}\n.prompt.grey {\n  background-color: $colour-grey-background;\n}\n\n.dropdown {\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include font-size-medium();\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      select {\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 80px 10px 10px;\n        clip-path:\n          polygon(\n              0% 0%,     /* top left */\n              0% 0%,     /* top left */\n              calc(100% - 14px) 0%,    /* top right */\n              100% 14px,   /* top right */\n              100% 100%,  /* bottom right */\n              100% 100%,  /* bottom right */\n              0 100%,   /* bottom left */\n              0 100%      /* bottom left */\n          );\n        span.placeholder.grey {\n          background-color: $colour-grey-background;\n        }\n      }\n      div.arrow {\n        position: absolute;\n        right: 20px;\n        top: 18px;\n        width: 10px;\n        height: 10px;\n        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        z-index: 1;\n        pointer-events: none;\n      }\n    }\n    .sleeve:focus-within {\n      background-color: $colour-tertiary-coral;\n    }\n  }\n  &.select-style-underlined {\n    .sleeve {\n      @include dropdown-underlined();\n    }\n  }\n  &.inherit-colour select{\n   color: inherit !important;\n  }\n\n  select {\n    max-height: 200px;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    width: 100%;\n    z-index: 1;\n    left: 0;\n    right: 0;\n  }\n  &.active .options {\n      display: block;\n  }\n}\n.dropdown.noprompt {\n  margin-top: 0;\n}\n.options.grey {\n  background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form-field-select',\n  styleUrl: 'biggive-form-field-select.scss',\n  shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n  @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n  @Prop() selectionChanged: (value: string) => void;\n\n  /**\n   * Displayed as 'eyebrow' label over the top border of the box.\n   */\n  @Prop() prompt!: string | null;\n\n  @Prop({ mutable: true }) selectedValue: string | null;\n  @Prop({ mutable: true }) selectedLabel: string | null;\n\n  /**\n   * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() options!: string | Array<{ label: string; value: string }>;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  /**\n   * Must match background of containing element, or unintended shape will appear.\n   */\n  @Prop() backgroundColour: 'white' | 'grey';\n\n  @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n  /**\n   * ID for the select element, used by a label. If not passed then a random id will be generated.\n   */\n  @Prop() selectElementId: string | undefined;\n\n  private doOptionSelectCompletedHandler = (event: any) => {\n    const value = event.target.value;\n    this.selectedValue = value;\n    this.selectedLabel = event.target.label;\n    this.selectionChanged(value);\n  };\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\n   */\n  @Prop() placeholder: string | undefined;\n\n  render() {\n    const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n    let options = this.formatOptions(this.options);\n\n    if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n    }\n\n    if (typeof options === 'undefined') {\n      console.error('options undefined');\n      options = [];\n    }\n    // Give the select a random id so we can reference it from a label\n    const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired} htmlFor={selectId}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n        </label>\n        <div\n          class={\n            'dropdown space-below-' +\n            this.spaceBelow +\n            ' select-style-' +\n            this.selectStyle +\n            (this.prompt === null ? '  noprompt' : '') +\n            (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n          }\n        >\n          <div class=\"sleeve\">\n            <select id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\n              {options.map(option => (\n                <option selected={this.selectedValue === option.value} value={option.value}>\n                  {option.label}\n                </option>\n              ))}\n            </select>\n            <div class=\"arrow\"></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private formatOptions(options: string | Array<{ label: string; value: string }>): {\n    label: string;\n    value: string;\n  }[] {\n    if (options === undefined) {\n      return [];\n    }\n\n    if (typeof options === 'string') {\n      options = JSON.parse(options);\n    }\n\n    if (Array.isArray(options)) {\n      return options;\n    }\n\n    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n  }\n\n  private getRandomInt(): number {\n    const min = 1_000_000;\n    const max = 9_999_999;\n    return Math.floor(Math.random() * (max - min) + min);\n  }\n}\n"],"version":3}
+{"file":"biggive-form-field-select2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n  display: contents;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nselect {\n  appearance: none;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n  outline: none;\n  display: grid;\n  background-color: $colour-white;\n  align-items: center;\n}\nselect.grey {\n  background-color: $colour-grey-background;\n}\n.selectWrapper {\n  position: relative;\n}\n.prompt {\n  position: absolute;\n  z-index: 2;\n  font-size: small;\n  top: -1em;\n  background-color: $colour-white;\n  left: 4em;\n  padding-left: 1em;\n  padding-right: 1em;\n  color: $colour-primary-blue;\n}\n.prompt.grey {\n  background-color: $colour-grey-background;\n}\n\n.dropdown {\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include font-size-medium();\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      select {\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 80px 10px 10px;\n        clip-path:\n          polygon(\n              0% 0%,     /* top left */\n              0% 0%,     /* top left */\n              calc(100% - 14px) 0%,    /* top right */\n              100% 14px,   /* top right */\n              100% 100%,  /* bottom right */\n              100% 100%,  /* bottom right */\n              0 100%,   /* bottom left */\n              0 100%      /* bottom left */\n          );\n        span.placeholder.grey {\n          background-color: $colour-grey-background;\n        }\n      }\n      div.arrow {\n        position: absolute;\n        right: 20px;\n        top: 18px;\n        width: 10px;\n        height: 10px;\n        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        z-index: 1;\n        pointer-events: none;\n      }\n    }\n    .sleeve:focus-within {\n      background-color: $colour-secondary-green;\n    }\n  }\n  &.select-style-underlined {\n    .sleeve {\n      @include dropdown-underlined();\n    }\n  }\n  &.inherit-colour select{\n   color: inherit !important;\n  }\n\n  select {\n    max-height: 200px;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    width: 100%;\n    z-index: 1;\n    left: 0;\n    right: 0;\n  }\n  &.active .options {\n      display: block;\n  }\n}\n.dropdown.noprompt {\n  margin-top: 0;\n}\n.options.grey {\n  background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form-field-select',\n  styleUrl: 'biggive-form-field-select.scss',\n  shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n  @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n  @Prop() selectionChanged: (value: string) => void;\n\n  /**\n   * Displayed as 'eyebrow' label over the top border of the box.\n   */\n  @Prop() prompt!: string | null;\n\n  @Prop({ mutable: true }) selectedValue: string | null;\n  @Prop({ mutable: true }) selectedLabel: string | null;\n\n  /**\n   * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() options!: string | Array<{ label: string; value: string }>;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  /**\n   * Must match background of containing element, or unintended shape will appear.\n   */\n  @Prop() backgroundColour: 'white' | 'grey';\n\n  @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n  /**\n   * ID for the select element, used by a label. If not passed then a random id will be generated.\n   */\n  @Prop() selectElementId: string | undefined;\n\n  private doOptionSelectCompletedHandler = (event: any) => {\n    const value = event.target.value;\n    this.selectedValue = value;\n    this.selectedLabel = event.target.label;\n    this.selectionChanged(value);\n  };\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\n   */\n  @Prop() placeholder: string | undefined;\n\n  render() {\n    const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n    let options = this.formatOptions(this.options);\n\n    if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n    }\n\n    if (typeof options === 'undefined') {\n      console.error('options undefined');\n      options = [];\n    }\n    // Give the select a random id so we can reference it from a label\n    const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired} htmlFor={selectId}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n        </label>\n        <div\n          class={\n            'dropdown space-below-' +\n            this.spaceBelow +\n            ' select-style-' +\n            this.selectStyle +\n            (this.prompt === null ? '  noprompt' : '') +\n            (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n          }\n        >\n          <div class=\"sleeve\">\n            <select id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\n              {options.map(option => (\n                <option selected={this.selectedValue === option.value} value={option.value}>\n                  {option.label}\n                </option>\n              ))}\n            </select>\n            <div class=\"arrow\"></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private formatOptions(options: string | Array<{ label: string; value: string }>): {\n    label: string;\n    value: string;\n  }[] {\n    if (options === undefined) {\n      return [];\n    }\n\n    if (typeof options === 'string') {\n      options = JSON.parse(options);\n    }\n\n    if (Array.isArray(options)) {\n      return options;\n    }\n\n    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n  }\n\n  private getRandomInt(): number {\n    const min = 1_000_000;\n    const max = 9_999_999;\n    return Math.floor(Math.random() * (max - min) + min);\n  }\n}\n"],"version":3}

package/dist/components/biggive-text-input.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const biggiveTextInputCss = "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}::slotted([slot=label]){display:inline-block;line-height:1.2}.text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{position:absolute}.text-input .prompt{position:relative;z-index:2;font-size:small;top:1em;left:4em;color:#2C089B;max-width:calc(100% - 10em);display:inline-block}.text-input .prompt>span{padding-left:1em;padding-right:1em;background-color:#F6F6F6}.text-input.philco .prompt{color:#1d1d1B}.text-input.philco .prompt>span{background-color:#FFFFFF}.text-input.select-style-bordered.biggive .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve{background-color:#F6F6F6;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}.text-input.select-style-bordered.biggive .sleeve.focused{background-color:#FF7272}.text-input.select-style-bordered.philco .inner-sleeve{border:2px solid #1d1d1B;border-radius:6px;padding:12px}";
+const biggiveTextInputCss = "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}::slotted([slot=label]){display:inline-block;line-height:1.2}.text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{position:absolute}.text-input .prompt{position:relative;z-index:2;font-size:small;top:1em;left:4em;color:#2C089B;max-width:calc(100% - 10em);display:inline-block}.text-input .prompt>span{padding-left:1em;padding-right:1em;background-color:#F6F6F6}.text-input.philco .prompt{color:#1d1d1B}.text-input.philco .prompt>span{background-color:#FFFFFF}.text-input.select-style-bordered.biggive .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve{background-color:#F6F6F6;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}.text-input.select-style-bordered.biggive .sleeve.focused{background-color:#2AF135}.text-input.select-style-bordered.philco .inner-sleeve{border:2px solid #1d1d1B;border-radius:6px;padding:12px}";
 
 const BiggiveTextInput$1 = /*@__PURE__*/ proxyCustomElement(class BiggiveTextInput extends HTMLElement {
     constructor(registerHost) {

package/dist/components/biggive-text-input.js.map

@@ -1 +1 @@
-{"file":"biggive-text-input.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,iiEAAiiE;;MCehjEA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;AAL7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAYU,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AACtB,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AACnD,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAiCrD;IA/BC,MAAM,GAAA;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,SAAS;AAChG,QAAA,QACE,4DAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,WAAW,GAAG,GAAG,GAAG,IAAI,CAAC,UAAU,EAAA,EACnH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CAChB,CACH,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,cAAc,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAAE,cAAc,CAAQ,EACxE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,CAAQ,CACjC,CACF,CACF;;IAIV,gBAAgB,GAAA;QACd,MAAM,WAAW,GAAuB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAgB,cAAA,CAAA,CAAC;AACjF,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,SAAS,CAAE;QAE9D,IAAI,CAAC,WAAW,EAAE;AAChB,YAAA,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC;;AAGvE,QAAA,WAAW,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;AAC9E,QAAA,WAAW,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveTextInput","__stencil_proxyCustomElement"],"sources":["src/components/biggive-text-input/biggive-text-input.scss?tag=biggive-text-input&encapsulation=shadow","src/components/biggive-text-input/biggive-text-input.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n::slotted([slot=label]) {\n  display: inline-block;\n  line-height: 1.2; // Slightly less than other text to help with long charity names.\n}\n\n.text-input {\n  .currency-symbol {\n    position: absolute;\n  }\n  position: relative;\n  .prompt {\n    position: relative;\n    z-index: 2;\n    font-size: small;\n    top: 1em;\n    left: 4em;\n    color: $colour-primary-blue;\n    max-width: calc(100% - 10em);\n    display: inline-block;\n\n    > span {\n      padding-left: 1em;\n      padding-right: 1em;\n      background-color: $colour-grey-background;\n    }\n  }\n\n\n  &.philco .prompt {\n    color: $colour-philco-gray-90;\n\n    > span {\n      background-color: $colour-philco-white;\n    }\n  }\n\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered.biggive{\n    .sleeve {\n      @include font-size-large();\n      font-weight: bolder;\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      .inner-sleeve {\n        background-color: $colour-grey-background;\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 30px 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          &:after {\n            content: '';\n            display: block;\n            position: absolute;\n            right: 20px;\n            top: 18px;\n            width: 10px;\n            height: 10px;\n            background-size: contain;\n            background-repeat: no-repeat;\n            background-position: center center;\n          }\n      }\n      &.focused {\n        background-color: $colour-tertiary-coral;\n      }\n    }\n  }\n  &.select-style-bordered.philco {\n    .inner-sleeve {\n      border: 2px solid $colour-philco-gray-90;\n      border-radius: 6px;\n      padding: 12px;\n    }\n  }\n}\n\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * Initially developed for use within the new donate stepper design. Currently has a hard-coded background\n * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.\n *\n * Please ensure input is styled as width: 100%.\n *\n * Requires slots `label` and `input`.\n */\n@Component({\n  tag: 'biggive-text-input',\n  styleUrl: 'biggive-text-input.scss',\n  shadow: true,\n})\nexport class BiggiveTextInput {\n  @Element() host: HTMLBiggiveTextInputElement;\n\n  /**\n   * ISO-4217 currency code if input is for a money value\n   */\n  @Prop() currency: 'GBP' | 'USD' | undefined;\n  @Prop() spaceBelow: number = 0;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n  @Prop() siteDesign: 'biggive' | 'philco' = 'biggive';\n\n  render() {\n    const currencySymbol = this.currency === 'GBP' ? '£' : this.currency === 'USD' ? '$' : undefined;\n    return (\n      <div class={'text-input space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle + ' ' + this.siteDesign}>\n        <div class=\"prompt\">\n          <span>\n            <slot name=\"label\" />\n          </span>\n        </div>\n        <div class=\"sleeve\">\n          <div class=\"inner-sleeve\">\n            {currencySymbol && <span class=\"currency-symbol\">{currencySymbol}</span>}\n            <slot name=\"input\" />\n            <div style={{ clear: 'both' }}></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  componentDidLoad() {\n    const nativeInput: HTMLElement | null = this.host.querySelector(`[slot=\"input\"]`);\n    const sleave = this.host.shadowRoot!.querySelector('.sleeve')!;\n\n    if (!nativeInput) {\n      throw new Error('Input slot element required for biggive-text-input');\n    }\n\n    nativeInput.addEventListener('focusin', () => sleave.classList.add('focused'));\n    nativeInput.addEventListener('focusout', () => sleave.classList.remove('focused'));\n  }\n}\n"],"version":3}
+{"file":"biggive-text-input.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,iiEAAiiE;;MCehjEA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;AAL7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAYU,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AACtB,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AACnD,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAiCrD;IA/BC,MAAM,GAAA;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,SAAS;AAChG,QAAA,QACE,4DAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,WAAW,GAAG,GAAG,GAAG,IAAI,CAAC,UAAU,EAAA,EACnH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CAChB,CACH,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,cAAc,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAAE,cAAc,CAAQ,EACxE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,CAAQ,CACjC,CACF,CACF;;IAIV,gBAAgB,GAAA;QACd,MAAM,WAAW,GAAuB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAgB,cAAA,CAAA,CAAC;AACjF,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,SAAS,CAAE;QAE9D,IAAI,CAAC,WAAW,EAAE;AAChB,YAAA,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC;;AAGvE,QAAA,WAAW,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;AAC9E,QAAA,WAAW,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggiveTextInput","__stencil_proxyCustomElement"],"sources":["src/components/biggive-text-input/biggive-text-input.scss?tag=biggive-text-input&encapsulation=shadow","src/components/biggive-text-input/biggive-text-input.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n::slotted([slot=label]) {\n  display: inline-block;\n  line-height: 1.2; // Slightly less than other text to help with long charity names.\n}\n\n.text-input {\n  .currency-symbol {\n    position: absolute;\n  }\n  position: relative;\n  .prompt {\n    position: relative;\n    z-index: 2;\n    font-size: small;\n    top: 1em;\n    left: 4em;\n    color: $colour-primary-blue;\n    max-width: calc(100% - 10em);\n    display: inline-block;\n\n    > span {\n      padding-left: 1em;\n      padding-right: 1em;\n      background-color: $colour-grey-background;\n    }\n  }\n\n\n  &.philco .prompt {\n    color: $colour-philco-gray-90;\n\n    > span {\n      background-color: $colour-philco-white;\n    }\n  }\n\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered.biggive{\n    .sleeve {\n      @include font-size-large();\n      font-weight: bolder;\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      .inner-sleeve {\n        background-color: $colour-grey-background;\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 30px 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          &:after {\n            content: '';\n            display: block;\n            position: absolute;\n            right: 20px;\n            top: 18px;\n            width: 10px;\n            height: 10px;\n            background-size: contain;\n            background-repeat: no-repeat;\n            background-position: center center;\n          }\n      }\n      &.focused {\n        background-color: $colour-secondary-green;\n      }\n    }\n  }\n  &.select-style-bordered.philco {\n    .inner-sleeve {\n      border: 2px solid $colour-philco-gray-90;\n      border-radius: 6px;\n      padding: 12px;\n    }\n  }\n}\n\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * Initially developed for use within the new donate stepper design. Currently has a hard-coded background\n * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.\n *\n * Please ensure input is styled as width: 100%.\n *\n * Requires slots `label` and `input`.\n */\n@Component({\n  tag: 'biggive-text-input',\n  styleUrl: 'biggive-text-input.scss',\n  shadow: true,\n})\nexport class BiggiveTextInput {\n  @Element() host: HTMLBiggiveTextInputElement;\n\n  /**\n   * ISO-4217 currency code if input is for a money value\n   */\n  @Prop() currency: 'GBP' | 'USD' | undefined;\n  @Prop() spaceBelow: number = 0;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n  @Prop() siteDesign: 'biggive' | 'philco' = 'biggive';\n\n  render() {\n    const currencySymbol = this.currency === 'GBP' ? '£' : this.currency === 'USD' ? '$' : undefined;\n    return (\n      <div class={'text-input space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle + ' ' + this.siteDesign}>\n        <div class=\"prompt\">\n          <span>\n            <slot name=\"label\" />\n          </span>\n        </div>\n        <div class=\"sleeve\">\n          <div class=\"inner-sleeve\">\n            {currencySymbol && <span class=\"currency-symbol\">{currencySymbol}</span>}\n            <slot name=\"input\" />\n            <div style={{ clear: 'both' }}></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  componentDidLoad() {\n    const nativeInput: HTMLElement | null = this.host.querySelector(`[slot=\"input\"]`);\n    const sleave = this.host.shadowRoot!.querySelector('.sleeve')!;\n\n    if (!nativeInput) {\n      throw new Error('Input slot element required for biggive-text-input');\n    }\n\n    nativeInput.addEventListener('focusin', () => sleave.classList.add('focused'));\n    nativeInput.addEventListener('focusout', () => sleave.classList.remove('focused'));\n  }\n}\n"],"version":3}

package/dist/esm/biggive-form-field-select.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-CTC1TIdr.js';
 
-const biggiveFormFieldSelectCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}*,*::before,*::after{box-sizing:border-box}select{appearance:none;border:none;padding:0 1em 0 0;margin:0;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;outline:none;display:grid;background-color:#FFFFFF;align-items:center}select.grey{background-color:#F6F6F6}.selectWrapper{position:relative}.prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#FFFFFF;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.prompt.grey{background-color:#F6F6F6}.dropdown{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.dropdown.select-style-bordered .sleeve{font-size:17px;line-height:24px;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select span.placeholder.grey{background-color:#F6F6F6}.dropdown.select-style-bordered .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.select-style-bordered .sleeve:focus-within{background-color:#FF7272}.dropdown.select-style-underlined .sleeve{font-size:17px;line-height:24px;padding:1px;position:relative;border-bottom:1px solid #2C089B}.dropdown.select-style-underlined .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px}.dropdown.select-style-underlined .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.inherit-colour select{color:inherit !important}.dropdown select{max-height:200px;overflow-x:hidden;overflow-y:scroll;width:100%;z-index:1;left:0;right:0}.dropdown.active .options{display:block}.dropdown.noprompt{margin-top:0}.options.grey{background-color:#F6F6F6}";
+const biggiveFormFieldSelectCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}*,*::before,*::after{box-sizing:border-box}select{appearance:none;border:none;padding:0 1em 0 0;margin:0;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;outline:none;display:grid;background-color:#FFFFFF;align-items:center}select.grey{background-color:#F6F6F6}.selectWrapper{position:relative}.prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#FFFFFF;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.prompt.grey{background-color:#F6F6F6}.dropdown{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.dropdown.select-style-bordered .sleeve{font-size:17px;line-height:24px;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select span.placeholder.grey{background-color:#F6F6F6}.dropdown.select-style-bordered .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.select-style-bordered .sleeve:focus-within{background-color:#2AF135}.dropdown.select-style-underlined .sleeve{font-size:17px;line-height:24px;padding:1px;position:relative;border-bottom:1px solid #2C089B}.dropdown.select-style-underlined .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px}.dropdown.select-style-underlined .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.inherit-colour select{color:inherit !important}.dropdown select{max-height:200px;overflow-x:hidden;overflow-y:scroll;width:100%;z-index:1;left:0;right:0}.dropdown.active .options{display:block}.dropdown.noprompt{margin-top:0}.options.grey{background-color:#F6F6F6}";
 
 const BiggiveFormFieldSelect = class {
     constructor(hostRef) {

package/dist/esm/biggive-form-field-select.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"biggive-form-field-select.entry.js","sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n  display: contents;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nselect {\n  appearance: none;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n  outline: none;\n  display: grid;\n  background-color: $colour-white;\n  align-items: center;\n}\nselect.grey {\n  background-color: $colour-grey-background;\n}\n.selectWrapper {\n  position: relative;\n}\n.prompt {\n  position: absolute;\n  z-index: 2;\n  font-size: small;\n  top: -1em;\n  background-color: $colour-white;\n  left: 4em;\n  padding-left: 1em;\n  padding-right: 1em;\n  color: $colour-primary-blue;\n}\n.prompt.grey {\n  background-color: $colour-grey-background;\n}\n\n.dropdown {\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include font-size-medium();\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      select {\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 80px 10px 10px;\n        clip-path:\n          polygon(\n              0% 0%,     /* top left */\n              0% 0%,     /* top left */\n              calc(100% - 14px) 0%,    /* top right */\n              100% 14px,   /* top right */\n              100% 100%,  /* bottom right */\n              100% 100%,  /* bottom right */\n              0 100%,   /* bottom left */\n              0 100%      /* bottom left */\n          );\n        span.placeholder.grey {\n          background-color: $colour-grey-background;\n        }\n      }\n      div.arrow {\n        position: absolute;\n        right: 20px;\n        top: 18px;\n        width: 10px;\n        height: 10px;\n        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        z-index: 1;\n        pointer-events: none;\n      }\n    }\n    .sleeve:focus-within {\n      background-color: $colour-tertiary-coral;\n    }\n  }\n  &.select-style-underlined {\n    .sleeve {\n      @include dropdown-underlined();\n    }\n  }\n  &.inherit-colour select{\n   color: inherit !important;\n  }\n\n  select {\n    max-height: 200px;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    width: 100%;\n    z-index: 1;\n    left: 0;\n    right: 0;\n  }\n  &.active .options {\n      display: block;\n  }\n}\n.dropdown.noprompt {\n  margin-top: 0;\n}\n.options.grey {\n  background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form-field-select',\n  styleUrl: 'biggive-form-field-select.scss',\n  shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n  @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n  @Prop() selectionChanged: (value: string) => void;\n\n  /**\n   * Displayed as 'eyebrow' label over the top border of the box.\n   */\n  @Prop() prompt!: string | null;\n\n  @Prop({ mutable: true }) selectedValue: string | null;\n  @Prop({ mutable: true }) selectedLabel: string | null;\n\n  /**\n   * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() options!: string | Array<{ label: string; value: string }>;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  /**\n   * Must match background of containing element, or unintended shape will appear.\n   */\n  @Prop() backgroundColour: 'white' | 'grey';\n\n  @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n  /**\n   * ID for the select element, used by a label. If not passed then a random id will be generated.\n   */\n  @Prop() selectElementId: string | undefined;\n\n  private doOptionSelectCompletedHandler = (event: any) => {\n    const value = event.target.value;\n    this.selectedValue = value;\n    this.selectedLabel = event.target.label;\n    this.selectionChanged(value);\n  };\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\n   */\n  @Prop() placeholder: string | undefined;\n\n  render() {\n    const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n    let options = this.formatOptions(this.options);\n\n    if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n    }\n\n    if (typeof options === 'undefined') {\n      console.error('options undefined');\n      options = [];\n    }\n    // Give the select a random id so we can reference it from a label\n    const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired} htmlFor={selectId}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n        </label>\n        <div\n          class={\n            'dropdown space-below-' +\n            this.spaceBelow +\n            ' select-style-' +\n            this.selectStyle +\n            (this.prompt === null ? '  noprompt' : '') +\n            (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n          }\n        >\n          <div class=\"sleeve\">\n            <select id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\n              {options.map(option => (\n                <option selected={this.selectedValue === option.value} value={option.value}>\n                  {option.label}\n                </option>\n              ))}\n            </select>\n            <div class=\"arrow\"></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private formatOptions(options: string | Array<{ label: string; value: string }>): {\n    label: string;\n    value: string;\n  }[] {\n    if (options === undefined) {\n      return [];\n    }\n\n    if (typeof options === 'string') {\n      options = JSON.parse(options);\n    }\n\n    if (Array.isArray(options)) {\n      return options;\n    }\n\n    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n  }\n\n  private getRandomInt(): number {\n    const min = 1_000_000;\n    const max = 9_999_999;\n    return Math.floor(Math.random() * (max - min) + min);\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"biggive-form-field-select.entry.js","sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n  display: contents;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nselect {\n  appearance: none;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n  outline: none;\n  display: grid;\n  background-color: $colour-white;\n  align-items: center;\n}\nselect.grey {\n  background-color: $colour-grey-background;\n}\n.selectWrapper {\n  position: relative;\n}\n.prompt {\n  position: absolute;\n  z-index: 2;\n  font-size: small;\n  top: -1em;\n  background-color: $colour-white;\n  left: 4em;\n  padding-left: 1em;\n  padding-right: 1em;\n  color: $colour-primary-blue;\n}\n.prompt.grey {\n  background-color: $colour-grey-background;\n}\n\n.dropdown {\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include font-size-medium();\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      select {\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 80px 10px 10px;\n        clip-path:\n          polygon(\n              0% 0%,     /* top left */\n              0% 0%,     /* top left */\n              calc(100% - 14px) 0%,    /* top right */\n              100% 14px,   /* top right */\n              100% 100%,  /* bottom right */\n              100% 100%,  /* bottom right */\n              0 100%,   /* bottom left */\n              0 100%      /* bottom left */\n          );\n        span.placeholder.grey {\n          background-color: $colour-grey-background;\n        }\n      }\n      div.arrow {\n        position: absolute;\n        right: 20px;\n        top: 18px;\n        width: 10px;\n        height: 10px;\n        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        z-index: 1;\n        pointer-events: none;\n      }\n    }\n    .sleeve:focus-within {\n      background-color: $colour-secondary-green;\n    }\n  }\n  &.select-style-underlined {\n    .sleeve {\n      @include dropdown-underlined();\n    }\n  }\n  &.inherit-colour select{\n   color: inherit !important;\n  }\n\n  select {\n    max-height: 200px;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    width: 100%;\n    z-index: 1;\n    left: 0;\n    right: 0;\n  }\n  &.active .options {\n      display: block;\n  }\n}\n.dropdown.noprompt {\n  margin-top: 0;\n}\n.options.grey {\n  background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form-field-select',\n  styleUrl: 'biggive-form-field-select.scss',\n  shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n  @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n  @Prop() selectionChanged: (value: string) => void;\n\n  /**\n   * Displayed as 'eyebrow' label over the top border of the box.\n   */\n  @Prop() prompt!: string | null;\n\n  @Prop({ mutable: true }) selectedValue: string | null;\n  @Prop({ mutable: true }) selectedLabel: string | null;\n\n  /**\n   * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() options!: string | Array<{ label: string; value: string }>;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  /**\n   * Must match background of containing element, or unintended shape will appear.\n   */\n  @Prop() backgroundColour: 'white' | 'grey';\n\n  @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n  /**\n   * ID for the select element, used by a label. If not passed then a random id will be generated.\n   */\n  @Prop() selectElementId: string | undefined;\n\n  private doOptionSelectCompletedHandler = (event: any) => {\n    const value = event.target.value;\n    this.selectedValue = value;\n    this.selectedLabel = event.target.label;\n    this.selectionChanged(value);\n  };\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n\n  /**\n   * Placeholder. If there is no `prompt`, this should be a suitable ARIA label.\n   */\n  @Prop() placeholder: string | undefined;\n\n  render() {\n    const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n    let options = this.formatOptions(this.options);\n\n    if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n    }\n\n    if (typeof options === 'undefined') {\n      console.error('options undefined');\n      options = [];\n    }\n    // Give the select a random id so we can reference it from a label\n    const selectId = this.selectElementId || 'select-' + this.getRandomInt().toString();\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired} htmlFor={selectId}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n        </label>\n        <div\n          class={\n            'dropdown space-below-' +\n            this.spaceBelow +\n            ' select-style-' +\n            this.selectStyle +\n            (this.prompt === null ? '  noprompt' : '') +\n            (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n          }\n        >\n          <div class=\"sleeve\">\n            <select id={selectId} class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler} aria-label={this.prompt === null ? this.placeholder : this.prompt}>\n              {options.map(option => (\n                <option selected={this.selectedValue === option.value} value={option.value}>\n                  {option.label}\n                </option>\n              ))}\n            </select>\n            <div class=\"arrow\"></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private formatOptions(options: string | Array<{ label: string; value: string }>): {\n    label: string;\n    value: string;\n  }[] {\n    if (options === undefined) {\n      return [];\n    }\n\n    if (typeof options === 'string') {\n      options = JSON.parse(options);\n    }\n\n    if (Array.isArray(options)) {\n      return options;\n    }\n\n    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n  }\n\n  private getRandomInt(): number {\n    const min = 1_000_000;\n    const max = 9_999_999;\n    return Math.floor(Math.random() * (max - min) + min);\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/biggive-text-input.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-CTC1TIdr.js';
 
-const biggiveTextInputCss = "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}::slotted([slot=label]){display:inline-block;line-height:1.2}.text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{position:absolute}.text-input .prompt{position:relative;z-index:2;font-size:small;top:1em;left:4em;color:#2C089B;max-width:calc(100% - 10em);display:inline-block}.text-input .prompt>span{padding-left:1em;padding-right:1em;background-color:#F6F6F6}.text-input.philco .prompt{color:#1d1d1B}.text-input.philco .prompt>span{background-color:#FFFFFF}.text-input.select-style-bordered.biggive .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve{background-color:#F6F6F6;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}.text-input.select-style-bordered.biggive .sleeve.focused{background-color:#FF7272}.text-input.select-style-bordered.philco .inner-sleeve{border:2px solid #1d1d1B;border-radius:6px;padding:12px}";
+const biggiveTextInputCss = "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}::slotted([slot=label]){display:inline-block;line-height:1.2}.text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{position:absolute}.text-input .prompt{position:relative;z-index:2;font-size:small;top:1em;left:4em;color:#2C089B;max-width:calc(100% - 10em);display:inline-block}.text-input .prompt>span{padding-left:1em;padding-right:1em;background-color:#F6F6F6}.text-input.philco .prompt{color:#1d1d1B}.text-input.philco .prompt>span{background-color:#FFFFFF}.text-input.select-style-bordered.biggive .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve{background-color:#F6F6F6;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}.text-input.select-style-bordered.biggive .sleeve.focused{background-color:#2AF135}.text-input.select-style-bordered.philco .inner-sleeve{border:2px solid #1d1d1B;border-radius:6px;padding:12px}";
 
 const BiggiveTextInput = class {
     constructor(hostRef) {

package/dist/esm/biggive-text-input.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"biggive-text-input.entry.js","sources":["src/components/biggive-text-input/biggive-text-input.scss?tag=biggive-text-input&encapsulation=shadow","src/components/biggive-text-input/biggive-text-input.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n::slotted([slot=label]) {\n  display: inline-block;\n  line-height: 1.2; // Slightly less than other text to help with long charity names.\n}\n\n.text-input {\n  .currency-symbol {\n    position: absolute;\n  }\n  position: relative;\n  .prompt {\n    position: relative;\n    z-index: 2;\n    font-size: small;\n    top: 1em;\n    left: 4em;\n    color: $colour-primary-blue;\n    max-width: calc(100% - 10em);\n    display: inline-block;\n\n    > span {\n      padding-left: 1em;\n      padding-right: 1em;\n      background-color: $colour-grey-background;\n    }\n  }\n\n\n  &.philco .prompt {\n    color: $colour-philco-gray-90;\n\n    > span {\n      background-color: $colour-philco-white;\n    }\n  }\n\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered.biggive{\n    .sleeve {\n      @include font-size-large();\n      font-weight: bolder;\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      .inner-sleeve {\n        background-color: $colour-grey-background;\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 30px 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          &:after {\n            content: '';\n            display: block;\n            position: absolute;\n            right: 20px;\n            top: 18px;\n            width: 10px;\n            height: 10px;\n            background-size: contain;\n            background-repeat: no-repeat;\n            background-position: center center;\n          }\n      }\n      &.focused {\n        background-color: $colour-tertiary-coral;\n      }\n    }\n  }\n  &.select-style-bordered.philco {\n    .inner-sleeve {\n      border: 2px solid $colour-philco-gray-90;\n      border-radius: 6px;\n      padding: 12px;\n    }\n  }\n}\n\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * Initially developed for use within the new donate stepper design. Currently has a hard-coded background\n * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.\n *\n * Please ensure input is styled as width: 100%.\n *\n * Requires slots `label` and `input`.\n */\n@Component({\n  tag: 'biggive-text-input',\n  styleUrl: 'biggive-text-input.scss',\n  shadow: true,\n})\nexport class BiggiveTextInput {\n  @Element() host: HTMLBiggiveTextInputElement;\n\n  /**\n   * ISO-4217 currency code if input is for a money value\n   */\n  @Prop() currency: 'GBP' | 'USD' | undefined;\n  @Prop() spaceBelow: number = 0;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n  @Prop() siteDesign: 'biggive' | 'philco' = 'biggive';\n\n  render() {\n    const currencySymbol = this.currency === 'GBP' ? '£' : this.currency === 'USD' ? '$' : undefined;\n    return (\n      <div class={'text-input space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle + ' ' + this.siteDesign}>\n        <div class=\"prompt\">\n          <span>\n            <slot name=\"label\" />\n          </span>\n        </div>\n        <div class=\"sleeve\">\n          <div class=\"inner-sleeve\">\n            {currencySymbol && <span class=\"currency-symbol\">{currencySymbol}</span>}\n            <slot name=\"input\" />\n            <div style={{ clear: 'both' }}></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  componentDidLoad() {\n    const nativeInput: HTMLElement | null = this.host.querySelector(`[slot=\"input\"]`);\n    const sleave = this.host.shadowRoot!.querySelector('.sleeve')!;\n\n    if (!nativeInput) {\n      throw new Error('Input slot element required for biggive-text-input');\n    }\n\n    nativeInput.addEventListener('focusin', () => sleave.classList.add('focused'));\n    nativeInput.addEventListener('focusout', () => sleave.classList.remove('focused'));\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,mBAAmB,GAAG,iiEAAiiE;;MCehjE,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYU,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AACtB,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AACnD,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAiCrD;IA/BC,MAAM,GAAA;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,SAAS;AAChG,QAAA,QACE,4DAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,WAAW,GAAG,GAAG,GAAG,IAAI,CAAC,UAAU,EAAA,EACnH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CAChB,CACH,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,cAAc,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAAE,cAAc,CAAQ,EACxE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,CAAQ,CACjC,CACF,CACF;;IAIV,gBAAgB,GAAA;QACd,MAAM,WAAW,GAAuB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAgB,cAAA,CAAA,CAAC;AACjF,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,SAAS,CAAE;QAE9D,IAAI,CAAC,WAAW,EAAE;AAChB,YAAA,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC;;AAGvE,QAAA,WAAW,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;AAC9E,QAAA,WAAW,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;;;;;;;;"}
+{"version":3,"file":"biggive-text-input.entry.js","sources":["src/components/biggive-text-input/biggive-text-input.scss?tag=biggive-text-input&encapsulation=shadow","src/components/biggive-text-input/biggive-text-input.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n  display: contents;\n}\n\n::slotted([slot=label]) {\n  display: inline-block;\n  line-height: 1.2; // Slightly less than other text to help with long charity names.\n}\n\n.text-input {\n  .currency-symbol {\n    position: absolute;\n  }\n  position: relative;\n  .prompt {\n    position: relative;\n    z-index: 2;\n    font-size: small;\n    top: 1em;\n    left: 4em;\n    color: $colour-primary-blue;\n    max-width: calc(100% - 10em);\n    display: inline-block;\n\n    > span {\n      padding-left: 1em;\n      padding-right: 1em;\n      background-color: $colour-grey-background;\n    }\n  }\n\n\n  &.philco .prompt {\n    color: $colour-philco-gray-90;\n\n    > span {\n      background-color: $colour-philco-white;\n    }\n  }\n\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered.biggive{\n    .sleeve {\n      @include font-size-large();\n      font-weight: bolder;\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      .inner-sleeve {\n        background-color: $colour-grey-background;\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 30px 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          &:after {\n            content: '';\n            display: block;\n            position: absolute;\n            right: 20px;\n            top: 18px;\n            width: 10px;\n            height: 10px;\n            background-size: contain;\n            background-repeat: no-repeat;\n            background-position: center center;\n          }\n      }\n      &.focused {\n        background-color: $colour-secondary-green;\n      }\n    }\n  }\n  &.select-style-bordered.philco {\n    .inner-sleeve {\n      border: 2px solid $colour-philco-gray-90;\n      border-radius: 6px;\n      padding: 12px;\n    }\n  }\n}\n\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * Initially developed for use within the new donate stepper design. Currently has a hard-coded background\n * of $colour-grey-background, intened to appear transparent when used on a page with a matching background.\n *\n * Please ensure input is styled as width: 100%.\n *\n * Requires slots `label` and `input`.\n */\n@Component({\n  tag: 'biggive-text-input',\n  styleUrl: 'biggive-text-input.scss',\n  shadow: true,\n})\nexport class BiggiveTextInput {\n  @Element() host: HTMLBiggiveTextInputElement;\n\n  /**\n   * ISO-4217 currency code if input is for a money value\n   */\n  @Prop() currency: 'GBP' | 'USD' | undefined;\n  @Prop() spaceBelow: number = 0;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n  @Prop() siteDesign: 'biggive' | 'philco' = 'biggive';\n\n  render() {\n    const currencySymbol = this.currency === 'GBP' ? '£' : this.currency === 'USD' ? '$' : undefined;\n    return (\n      <div class={'text-input space-below-' + this.spaceBelow + ' select-style-' + this.selectStyle + ' ' + this.siteDesign}>\n        <div class=\"prompt\">\n          <span>\n            <slot name=\"label\" />\n          </span>\n        </div>\n        <div class=\"sleeve\">\n          <div class=\"inner-sleeve\">\n            {currencySymbol && <span class=\"currency-symbol\">{currencySymbol}</span>}\n            <slot name=\"input\" />\n            <div style={{ clear: 'both' }}></div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  componentDidLoad() {\n    const nativeInput: HTMLElement | null = this.host.querySelector(`[slot=\"input\"]`);\n    const sleave = this.host.shadowRoot!.querySelector('.sleeve')!;\n\n    if (!nativeInput) {\n      throw new Error('Input slot element required for biggive-text-input');\n    }\n\n    nativeInput.addEventListener('focusin', () => sleave.classList.add('focused'));\n    nativeInput.addEventListener('focusout', () => sleave.classList.remove('focused'));\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,mBAAmB,GAAG,iiEAAiiE;;MCehjE,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYU,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;AACtB,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AACnD,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAiCrD;IA/BC,MAAM,GAAA;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,KAAK,KAAK,GAAG,GAAG,GAAG,SAAS;AAChG,QAAA,QACE,4DAAK,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,GAAG,IAAI,CAAC,WAAW,GAAG,GAAG,GAAG,IAAI,CAAC,UAAU,EAAA,EACnH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CAChB,CACH,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,cAAc,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAAE,cAAc,CAAQ,EACxE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,CAAQ,CACjC,CACF,CACF;;IAIV,gBAAgB,GAAA;QACd,MAAM,WAAW,GAAuB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAgB,cAAA,CAAA,CAAC;AACjF,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,SAAS,CAAE;QAE9D,IAAI,CAAC,WAAW,EAAE;AAChB,YAAA,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC;;AAGvE,QAAA,WAAW,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;AAC9E,QAAA,WAAW,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;;;;;;;;"}

package/hydrate/index.js

@@ -4522,7 +4522,7 @@ class BiggiveForm {
     }; }
 }
 
-const biggiveFormFieldSelectCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}*,*::before,*::after{box-sizing:border-box}select{appearance:none;border:none;padding:0 1em 0 0;margin:0;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;outline:none;display:grid;background-color:#FFFFFF;align-items:center}select.grey{background-color:#F6F6F6}.selectWrapper{position:relative}.prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#FFFFFF;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.prompt.grey{background-color:#F6F6F6}.dropdown{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.dropdown.select-style-bordered .sleeve{font-size:17px;line-height:24px;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select span.placeholder.grey{background-color:#F6F6F6}.dropdown.select-style-bordered .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.select-style-bordered .sleeve:focus-within{background-color:#FF7272}.dropdown.select-style-underlined .sleeve{font-size:17px;line-height:24px;padding:1px;position:relative;border-bottom:1px solid #2C089B}.dropdown.select-style-underlined .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px}.dropdown.select-style-underlined .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.inherit-colour select{color:inherit !important}.dropdown select{max-height:200px;overflow-x:hidden;overflow-y:scroll;width:100%;z-index:1;left:0;right:0}.dropdown.active .options{display:block}.dropdown.noprompt{margin-top:0}.options.grey{background-color:#F6F6F6}";
+const biggiveFormFieldSelectCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}*,*::before,*::after{box-sizing:border-box}select{appearance:none;border:none;padding:0 1em 0 0;margin:0;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;outline:none;display:grid;background-color:#FFFFFF;align-items:center}select.grey{background-color:#F6F6F6}.selectWrapper{position:relative}.prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#FFFFFF;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.prompt.grey{background-color:#F6F6F6}.dropdown{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.dropdown.select-style-bordered .sleeve{font-size:17px;line-height:24px;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select span.placeholder.grey{background-color:#F6F6F6}.dropdown.select-style-bordered .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.select-style-bordered .sleeve:focus-within{background-color:#2AF135}.dropdown.select-style-underlined .sleeve{font-size:17px;line-height:24px;padding:1px;position:relative;border-bottom:1px solid #2C089B}.dropdown.select-style-underlined .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px}.dropdown.select-style-underlined .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.inherit-colour select{color:inherit !important}.dropdown select{max-height:200px;overflow-x:hidden;overflow-y:scroll;width:100%;z-index:1;left:0;right:0}.dropdown.active .options{display:block}.dropdown.noprompt{margin-top:0}.options.grey{background-color:#F6F6F6}";
 
 class BiggiveFormFieldSelect {
     constructor(hostRef) {
@@ -6134,7 +6134,7 @@ class BiggiveTable {
     }; }
 }
 
-const biggiveTextInputCss = "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}::slotted([slot=label]){display:inline-block;line-height:1.2}.text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{position:absolute}.text-input .prompt{position:relative;z-index:2;font-size:small;top:1em;left:4em;color:#2C089B;max-width:calc(100% - 10em);display:inline-block}.text-input .prompt>span{padding-left:1em;padding-right:1em;background-color:#F6F6F6}.text-input.philco .prompt{color:#1d1d1B}.text-input.philco .prompt>span{background-color:#FFFFFF}.text-input.select-style-bordered.biggive .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve{background-color:#F6F6F6;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}.text-input.select-style-bordered.biggive .sleeve.focused{background-color:#FF7272}.text-input.select-style-bordered.philco .inner-sleeve{border:2px solid #1d1d1B;border-radius:6px;padding:12px}";
+const biggiveTextInputCss = "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}::slotted([slot=label]){display:inline-block;line-height:1.2}.text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{position:absolute}.text-input .prompt{position:relative;z-index:2;font-size:small;top:1em;left:4em;color:#2C089B;max-width:calc(100% - 10em);display:inline-block}.text-input .prompt>span{padding-left:1em;padding-right:1em;background-color:#F6F6F6}.text-input.philco .prompt{color:#1d1d1B}.text-input.philco .prompt>span{background-color:#FFFFFF}.text-input.select-style-bordered.biggive .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve{background-color:#F6F6F6;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}.text-input.select-style-bordered.biggive .sleeve.focused{background-color:#2AF135}.text-input.select-style-bordered.philco .inner-sleeve{border:2px solid #1d1d1B;border-radius:6px;padding:12px}";
 
 /**
  * Initially developed for use within the new donate stepper design. Currently has a hard-coded background

package/hydrate/index.mjs

@@ -4520,7 +4520,7 @@ class BiggiveForm {
     }; }
 }
 
-const biggiveFormFieldSelectCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}*,*::before,*::after{box-sizing:border-box}select{appearance:none;border:none;padding:0 1em 0 0;margin:0;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;outline:none;display:grid;background-color:#FFFFFF;align-items:center}select.grey{background-color:#F6F6F6}.selectWrapper{position:relative}.prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#FFFFFF;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.prompt.grey{background-color:#F6F6F6}.dropdown{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.dropdown.select-style-bordered .sleeve{font-size:17px;line-height:24px;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select span.placeholder.grey{background-color:#F6F6F6}.dropdown.select-style-bordered .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.select-style-bordered .sleeve:focus-within{background-color:#FF7272}.dropdown.select-style-underlined .sleeve{font-size:17px;line-height:24px;padding:1px;position:relative;border-bottom:1px solid #2C089B}.dropdown.select-style-underlined .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px}.dropdown.select-style-underlined .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.inherit-colour select{color:inherit !important}.dropdown select{max-height:200px;overflow-x:hidden;overflow-y:scroll;width:100%;z-index:1;left:0;right:0}.dropdown.active .options{display:block}.dropdown.noprompt{margin-top:0}.options.grey{background-color:#F6F6F6}";
+const biggiveFormFieldSelectCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}*,*::before,*::after{box-sizing:border-box}select{appearance:none;border:none;padding:0 1em 0 0;margin:0;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;outline:none;display:grid;background-color:#FFFFFF;align-items:center}select.grey{background-color:#F6F6F6}.selectWrapper{position:relative}.prompt{position:absolute;z-index:2;font-size:small;top:-1em;background-color:#FFFFFF;left:4em;padding-left:1em;padding-right:1em;color:#2C089B}.prompt.grey{background-color:#F6F6F6}.dropdown{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.dropdown.select-style-bordered .sleeve{font-size:17px;line-height:24px;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.dropdown.select-style-bordered .sleeve select span.placeholder.grey{background-color:#F6F6F6}.dropdown.select-style-bordered .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.select-style-bordered .sleeve:focus-within{background-color:#2AF135}.dropdown.select-style-underlined .sleeve{font-size:17px;line-height:24px;padding:1px;position:relative;border-bottom:1px solid #2C089B}.dropdown.select-style-underlined .sleeve select{color:#2C089B;display:block;position:relative;padding:10px 80px 10px 10px}.dropdown.select-style-underlined .sleeve div.arrow{position:absolute;right:20px;top:18px;width:10px;height:10px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K\");background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:1;pointer-events:none}.dropdown.inherit-colour select{color:inherit !important}.dropdown select{max-height:200px;overflow-x:hidden;overflow-y:scroll;width:100%;z-index:1;left:0;right:0}.dropdown.active .options{display:block}.dropdown.noprompt{margin-top:0}.options.grey{background-color:#F6F6F6}";
 
 class BiggiveFormFieldSelect {
     constructor(hostRef) {
@@ -6132,7 +6132,7 @@ class BiggiveTable {
     }; }
 }
 
-const biggiveTextInputCss = "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}::slotted([slot=label]){display:inline-block;line-height:1.2}.text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{position:absolute}.text-input .prompt{position:relative;z-index:2;font-size:small;top:1em;left:4em;color:#2C089B;max-width:calc(100% - 10em);display:inline-block}.text-input .prompt>span{padding-left:1em;padding-right:1em;background-color:#F6F6F6}.text-input.philco .prompt{color:#1d1d1B}.text-input.philco .prompt>span{background-color:#FFFFFF}.text-input.select-style-bordered.biggive .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve{background-color:#F6F6F6;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}.text-input.select-style-bordered.biggive .sleeve.focused{background-color:#FF7272}.text-input.select-style-bordered.philco .inner-sleeve{border:2px solid #1d1d1B;border-radius:6px;padding:12px}";
+const biggiveTextInputCss = "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}::slotted([slot=label]){display:inline-block;line-height:1.2}.text-input{position:relative;font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;position:relative;text-align:left}.text-input .currency-symbol{position:absolute}.text-input .prompt{position:relative;z-index:2;font-size:small;top:1em;left:4em;color:#2C089B;max-width:calc(100% - 10em);display:inline-block}.text-input .prompt>span{padding-left:1em;padding-right:1em;background-color:#F6F6F6}.text-input.philco .prompt{color:#1d1d1B}.text-input.philco .prompt>span{background-color:#FFFFFF}.text-input.select-style-bordered.biggive .sleeve{font-size:24px;line-height:30px;font-weight:bolder;padding:2px;position:relative;background-color:#2C089B;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve{background-color:#F6F6F6;color:#2C089B;display:block;position:relative;padding:10px 30px 10px 10px;clip-path:polygon(0% 0%, 0% 0%, calc(100% - 14px) 0%, 100% 14px, 100% 100%, 100% 100%, 0 100%, 0 100%)}.text-input.select-style-bordered.biggive .sleeve .inner-sleeve:after{content:\"\";display:block;position:absolute;right:20px;top:18px;width:10px;height:10px;background-size:contain;background-repeat:no-repeat;background-position:center center}.text-input.select-style-bordered.biggive .sleeve.focused{background-color:#2AF135}.text-input.select-style-bordered.philco .inner-sleeve{border:2px solid #1d1d1B;border-radius:6px;padding:12px}";
 
 /**
  * Initially developed for use within the new donate stepper design. Currently has a hard-coded background

package/package.json

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