@biggive/components 202411061129.0.0 → 202411071423.0.0

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

@@ -1 +1 @@
-{"file":"biggive-form-field-select2.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,+vHAA+vH,CAAC;AAClyH,qCAAe,yBAAyB;;MCM3B,sBAAsB;;;;;QA0BzB,mCAA8B,GAAG,CAAC,KAAU;YAClD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC;;;;;;2BAd+C,UAAU;;oCAOR,MAAM;0BAY5B,CAAC;;;IAM9B,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,KAAK,MAAM,GAAG,OAAO,GAAG,EAAE,CAAC;QAEvE,IAAI,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE/C,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;YAClF,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,OAAO,CAAC,CAAC;SAC/E;QAED,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE;YAClC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE,CAAC;SACd;QAED,QACE,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAO,KAAK,EAAE,cAAc,IAC1B,4DAAK,KAAK,EAAE,QAAQ,GAAG,cAAc,IAAG,IAAI,CAAC,MAAM,CAAO,EAC1D,4DACE,KAAK,EACH,uBAAuB;gBACvB,IAAI,CAAC,UAAU;gBACf,gBAAgB;gBAChB,IAAI,CAAC,WAAW;iBACf,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,YAAY,GAAG,EAAE,CAAC;iBACzC,IAAI,CAAC,oBAAoB,KAAK,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAC,IAGpE,4DAAK,KAAK,EAAC,QAAQ,IACjB,+DAAQ,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,8BAA8B,IACzE,OAAO,CAAC,GAAG,CAAC,MAAM,KACjB,cAAQ,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IACvE,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,EACT,4DAAK,KAAK,EAAC,OAAO,GAAO,CACrB,CACF,CACA,CACJ,EACN;KACH;IAEO,aAAa,CAAC,OAAyD;QAI7E,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAC/B;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC1B,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KACrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n  display: contents;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nselect {\n  appearance: none;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n  outline: none;\n  display: grid;\n  background-color: $colour-white;\n  align-items: center;\n}\nselect.grey {\n  background-color: $colour-grey-background;\n}\n.selectWrapper {\n  position: relative;\n}\n.prompt {\n  position: absolute;\n  z-index: 2;\n  font-size: small;\n  top: -1em;\n  background-color: $colour-white;\n  left: 4em;\n  padding-left: 1em;\n  padding-right: 1em;\n  color: $colour-primary-blue;\n}\n.prompt.grey {\n  background-color: $colour-grey-background;\n}\n\n.dropdown {\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include font-size-medium();\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      select {\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 80px 10px 10px;\n        clip-path:\n          polygon(\n              0% 0%,     /* top left */\n              0% 0%,     /* top left */\n              calc(100% - 14px) 0%,    /* top right */\n              100% 14px,   /* top right */\n              100% 100%,  /* bottom right */\n              100% 100%,  /* bottom right */\n              0 100%,   /* bottom left */\n              0 100%      /* bottom left */\n          );\n        span.placeholder.grey {\n          background-color: $colour-grey-background;\n        }\n      }\n      div.arrow {\n        position: absolute;\n        right: 20px;\n        top: 18px;\n        width: 10px;\n        height: 10px;\n        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        z-index: 1;\n        pointer-events: none;\n      }\n    }\n    .sleeve:focus-within {\n      background-color: $colour-tertiary-coral;\n    }\n  }\n  &.select-style-underlined {\n    .sleeve {\n      @include dropdown-underlined();\n    }\n  }\n  &.inherit-colour select{\n   color: inherit !important;\n  }\n\n  select {\n    max-height: 200px;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    width: 100%;\n    z-index: 1;\n    left: 0;\n    right: 0;\n  }\n  &.active .options {\n      display: block;\n  }\n}\n.dropdown.noprompt {\n  margin-top: 0;\n}\n.options.grey {\n  background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form-field-select',\n  styleUrl: 'biggive-form-field-select.scss',\n  shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n  @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n  @Prop() selectionChanged: (value: string) => void;\n\n  /**\n   * Displayed as 'eyebrow' label over the top border of the box.\n   */\n  @Prop() prompt!: string | null;\n\n  @Prop({ mutable: true }) selectedValue: string | null;\n  @Prop({ mutable: true }) selectedLabel: string | null;\n\n  /**\n   * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() options!: string | Array<{ label: string; value: string }>;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  /**\n   * Must match background of containing element, or unintended shape will appear.\n   */\n  @Prop() backgroundColour: 'white' | 'grey';\n\n  @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n  private doOptionSelectCompletedHandler = (event: any) => {\n    const value = event.target.value;\n    this.selectedValue = value;\n    this.selectedLabel = event.target.label;\n    this.selectionChanged(value);\n  };\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Placeholder\n   */\n  @Prop() placeholder: string | undefined;\n\n  render() {\n    const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n    let options = this.formatOptions(this.options);\n\n    if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n    }\n\n    if (typeof options === 'undefined') {\n      console.error('options undefined');\n      options = [];\n    }\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n          <div\n            class={\n              'dropdown space-below-' +\n              this.spaceBelow +\n              ' select-style-' +\n              this.selectStyle +\n              (this.prompt === null ? '  noprompt' : '') +\n              (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n            }\n          >\n            <div class=\"sleeve\">\n              <select class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler}>\n                {options.map(option => (\n                  <option selected={this.selectedValue === option.value} value={option.value}>\n                    {option.label}\n                  </option>\n                ))}\n              </select>\n              <div class=\"arrow\"></div>\n            </div>\n          </div>\n        </label>\n      </div>\n    );\n  }\n\n  private formatOptions(options: string | Array<{ label: string; value: string }>): {\n    label: string;\n    value: string;\n  }[] {\n    if (typeof options === 'string') {\n      options = JSON.parse(options);\n    }\n\n    if (Array.isArray(options)) {\n      return options;\n    }\n\n    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n  }\n}\n"],"version":3}
+{"file":"biggive-form-field-select2.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,+vHAA+vH,CAAC;AAClyH,qCAAe,yBAAyB;;MCM3B,sBAAsB;;;;;QA0BzB,mCAA8B,GAAG,CAAC,KAAU;YAClD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC;;;;;;2BAd+C,UAAU;;oCAOR,MAAM;0BAY5B,CAAC;;;IAM9B,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,KAAK,MAAM,GAAG,OAAO,GAAG,EAAE,CAAC;QAEvE,IAAI,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE/C,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;YAClF,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,GAAG,OAAO,CAAC,CAAC;SAC/E;QAED,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE;YAClC,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO,GAAG,EAAE,CAAC;SACd;QAED,QACE,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAO,KAAK,EAAE,cAAc,IAC1B,4DAAK,KAAK,EAAE,QAAQ,GAAG,cAAc,IAAG,IAAI,CAAC,MAAM,CAAO,EAC1D,4DACE,KAAK,EACH,uBAAuB;gBACvB,IAAI,CAAC,UAAU;gBACf,gBAAgB;gBAChB,IAAI,CAAC,WAAW;iBACf,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,YAAY,GAAG,EAAE,CAAC;iBACzC,IAAI,CAAC,oBAAoB,KAAK,SAAS,GAAG,iBAAiB,GAAG,EAAE,CAAC,IAGpE,4DAAK,KAAK,EAAC,QAAQ,IACjB,+DAAQ,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,CAAC,8BAA8B,IACzE,OAAO,CAAC,GAAG,CAAC,MAAM,KACjB,cAAQ,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,IACvE,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,EACT,4DAAK,KAAK,EAAC,OAAO,GAAO,CACrB,CACF,CACA,CACJ,EACN;KACH;IAEO,aAAa,CAAC,OAAyD;QAI7E,IAAI,OAAO,KAAK,SAAS,EAAE;YACzB,OAAO,EAAE,CAAC;SACX;QAED,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;YAC/B,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAC/B;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC1B,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KACrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/biggive-form-field-select/biggive-form-field-select.scss?tag=biggive-form-field-select&encapsulation=shadow","src/components/biggive-form-field-select/biggive-form-field-select.tsx"],"sourcesContent":["@include spacers();\n\n// Includes CSS taken from https://moderncss.dev/custom-select-styles-with-pure-css/\n\n:host {\n  display: contents;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nselect {\n  appearance: none;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  width: 100%;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n  outline: none;\n  display: grid;\n  background-color: $colour-white;\n  align-items: center;\n}\nselect.grey {\n  background-color: $colour-grey-background;\n}\n.selectWrapper {\n  position: relative;\n}\n.prompt {\n  position: absolute;\n  z-index: 2;\n  font-size: small;\n  top: -1em;\n  background-color: $colour-white;\n  left: 4em;\n  padding-left: 1em;\n  padding-right: 1em;\n  color: $colour-primary-blue;\n}\n.prompt.grey {\n  background-color: $colour-grey-background;\n}\n\n.dropdown {\n  @include standard-font();\n  position: relative;\n  text-align: left;\n  &.select-style-bordered {\n    .sleeve {\n      @include font-size-medium();\n      padding: 2px;\n      position: relative;\n      background-color: $colour-primary-blue;\n      @include corner-clip-small-top-right();\n      select {\n        color: $colour-primary-blue;\n        display: block;\n        position: relative;\n        padding: 10px 80px 10px 10px;\n        clip-path:\n          polygon(\n              0% 0%,     /* top left */\n              0% 0%,     /* top left */\n              calc(100% - 14px) 0%,    /* top right */\n              100% 14px,   /* top right */\n              100% 100%,  /* bottom right */\n              100% 100%,  /* bottom right */\n              0 100%,   /* bottom left */\n              0 100%      /* bottom left */\n          );\n        span.placeholder.grey {\n          background-color: $colour-grey-background;\n        }\n      }\n      div.arrow {\n        position: absolute;\n        right: 20px;\n        top: 18px;\n        width: 10px;\n        height: 10px;\n        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS4yMzcxNiA2LjYyNDkzQzQuOTAzMjMgNy4xMjUwMiA0LjA5NyA3LjEyNTAyIDMuNzYzMDggNi42MjQ5M0wwLjEyMzg2OCAxLjE3MDYzQy0wLjIxOTk0IDAuNjU1NDU5IDAuMTkyNjMgMS44MzcxZS0wNyAwLjg2MDkwOCAyLjQyMTMyZS0wN0w4LjEzOTMzIDguNzg0MzJlLTA3QzguODA3MTggOS4zNjgxN2UtMDcgOS4yMTk3NSAwLjY1NTQ1OSA4Ljg3NjM3IDEuMTcwNjNMNS4yMzcxNiA2LjYyNDkzWiIgZmlsbD0iIzJDMDg5QiIvPgo8L3N2Zz4K');\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: center center;\n        z-index: 1;\n        pointer-events: none;\n      }\n    }\n    .sleeve:focus-within {\n      background-color: $colour-tertiary-coral;\n    }\n  }\n  &.select-style-underlined {\n    .sleeve {\n      @include dropdown-underlined();\n    }\n  }\n  &.inherit-colour select{\n   color: inherit !important;\n  }\n\n  select {\n    max-height: 200px;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    width: 100%;\n    z-index: 1;\n    left: 0;\n    right: 0;\n  }\n  &.active .options {\n      display: block;\n  }\n}\n.dropdown.noprompt {\n  margin-top: 0;\n}\n.options.grey {\n  background-color: $colour-grey-background;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'biggive-form-field-select',\n  styleUrl: 'biggive-form-field-select.scss',\n  shadow: true,\n})\nexport class BiggiveFormFieldSelect {\n  @Element() el: HTMLBiggiveFormFieldSelectElement;\n\n  @Prop() selectionChanged: (value: string) => void;\n\n  /**\n   * Displayed as 'eyebrow' label over the top border of the box.\n   */\n  @Prop() prompt!: string | null;\n\n  @Prop({ mutable: true }) selectedValue: string | null;\n  @Prop({ mutable: true }) selectedLabel: string | null;\n\n  /**\n   * JSON array of label+value objects, or takes a stringified equiavalent (for Storybook)\n   */\n  @Prop() options!: string | Array<{ label: string; value: string }>;\n  @Prop() selectStyle: 'bordered' | 'underlined' = 'bordered';\n\n  /**\n   * Must match background of containing element, or unintended shape will appear.\n   */\n  @Prop() backgroundColour: 'white' | 'grey';\n\n  @Prop() selectedOptionColour: 'inherit' | 'blue' = 'blue';\n\n  private doOptionSelectCompletedHandler = (event: any) => {\n    const value = event.target.value;\n    this.selectedValue = value;\n    this.selectedLabel = event.target.label;\n    this.selectionChanged(value);\n  };\n\n  /**\n   * Space below component\n   */\n  @Prop() spaceBelow: number = 0;\n  /**\n   * Placeholder\n   */\n  @Prop() placeholder: string | undefined;\n\n  render() {\n    const greyIfRequired = this.backgroundColour === 'grey' ? ' grey' : '';\n\n    let options = this.formatOptions(this.options);\n\n    if (typeof this.placeholder === 'string' && typeof this.selectedValue !== 'string') {\n      options = [{ value: '__placeholder__', label: this.placeholder }, ...options];\n    }\n\n    if (typeof options === 'undefined') {\n      console.error('options undefined');\n      options = [];\n    }\n\n    return (\n      <div class=\"selectWrapper\">\n        <label class={greyIfRequired}>\n          <div class={'prompt' + greyIfRequired}>{this.prompt}</div>\n          <div\n            class={\n              'dropdown space-below-' +\n              this.spaceBelow +\n              ' select-style-' +\n              this.selectStyle +\n              (this.prompt === null ? '  noprompt' : '') +\n              (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '')\n            }\n          >\n            <div class=\"sleeve\">\n              <select class={greyIfRequired} onChange={this.doOptionSelectCompletedHandler}>\n                {options.map(option => (\n                  <option selected={this.selectedValue === option.value} value={option.value}>\n                    {option.label}\n                  </option>\n                ))}\n              </select>\n              <div class=\"arrow\"></div>\n            </div>\n          </div>\n        </label>\n      </div>\n    );\n  }\n\n  private formatOptions(options: string | Array<{ label: string; value: string }>): {\n    label: string;\n    value: string;\n  }[] {\n    if (options === undefined) {\n      return [];\n    }\n\n    if (typeof options === 'string') {\n      options = JSON.parse(options);\n    }\n\n    if (Array.isArray(options)) {\n      return options;\n    }\n\n    return Object.entries(options).map(entry => ({ value: entry[0], label: entry[1] }));\n  }\n}\n"],"version":3}

package/dist/esm/biggive-accordion_40.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement, a as getAssetPath, c as createEvent, d as Host } from './index-2dce829f.js';
+import { r as registerInstance, h, g as getElement, a as getAssetPath, c as createEvent, d as Host } from './index-754e5150.js';
 import { f as faMagnifyingGlass, F as FontAwesomeIconsService } from './fontawesome-icons-0f0f7e15.js';
 import { V as VideoService } from './video-b04ad412.js';
 
@@ -615,6 +615,9 @@ const BiggiveFormFieldSelect = class {
                 (this.selectedOptionColour === 'inherit' ? ' inherit-colour' : '') }, h("div", { key: '63beb631b161db5ffe16158430af3d1eede56130', class: "sleeve" }, h("select", { key: '153a730cbf15eb1571c44e855dccc040b3a5f2a3', class: greyIfRequired, onChange: this.doOptionSelectCompletedHandler }, options.map(option => (h("option", { selected: this.selectedValue === option.value, value: option.value }, option.label)))), h("div", { key: '238e74f29d312129f831f5a4cf1598ce3024f145', class: "arrow" }))))));
     }
     formatOptions(options) {
+        if (options === undefined) {
+            return [];
+        }
         if (typeof options === 'string') {
             options = JSON.parse(options);
         }