@ukho/admiralty-core 0.0.0

package/dist/collection/components/radio/radio.js

@@ -0,0 +1,206 @@
+import { h, Host } from '@stencil/core';
+export class RadioComponent {
+  constructor() {
+    this.inputId = `admiralty-radio-${radioButtonIds++}`;
+    this.radioGroup = null;
+    this.updateState = () => {
+      if (this.radioGroup) {
+        this.checked = this.radioGroup.value === this.value;
+      }
+    };
+    this.onClick = () => {
+      this.checked = this.nativeInput.checked;
+    };
+    this.onFocus = () => {
+      this.admiraltyFocus.emit();
+    };
+    this.onBlur = () => {
+      this.admiraltyBlur.emit();
+    };
+    this.buttonTabindex = -1;
+    this.name = this.inputId;
+    this.value = undefined;
+    this.disabled = false;
+    this.checked = false;
+  }
+  connectedCallback() {
+    if (this.value === undefined) {
+      this.value = this.inputId;
+    }
+    const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));
+    if (radioGroup) {
+      this.updateState();
+    }
+  }
+  /** @internal */
+  async setButtonTabindex(value) {
+    this.buttonTabindex = value;
+  }
+  render() {
+    const { buttonTabindex, checked, disabled, inputId, name, value } = this;
+    return (h(Host, null, h("div", { class: "admiralty-radio" }, h("input", { "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, "aria-labelledby": inputId, id: inputId, name: name, tabindex: buttonTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: "admiralty-radio", type: "radio", value: value, checked: checked, disabled: disabled ? true : null, ref: nativeEl => (this.nativeInput = nativeEl) }), h("label", { htmlFor: inputId }, h("slot", null)))));
+  }
+  static get is() { return "admiralty-radio"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["radio.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["radio.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the radio button for use on selection within a radio group"
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "this.inputId"
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | null",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the radio button for use on selection within a radio group"
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Determines whether the radio button is disabled. A button in disabled state will not fire click output events."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Determines whether the radio button is selected (or checked)"
+        },
+        "attribute": "checked",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "buttonTabindex": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "admiraltyFocus",
+        "name": "admiraltyFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the radio button gains focus."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "admiraltyBlur",
+        "name": "admiraltyBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the radio button loses focus."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setButtonTabindex": {
+        "complexType": {
+          "signature": "(value: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "checked",
+        "methodName": "render"
+      }, {
+        "propName": "disabled",
+        "methodName": "render"
+      }];
+  }
+}
+let radioButtonIds = 0;
+//# sourceMappingURL=radio.js.map

package/dist/collection/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAgB,MAAM,eAAe,CAAC;AAO7G,MAAM,OAAO,cAAc;;IACjB,YAAO,GAAG,mBAAmB,cAAc,EAAE,EAAE,CAAC;IAEhD,eAAU,GAA0C,IAAI,CAAC;IAuDzD,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,UAAU,EAAE;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;OACrD;IACH,CAAC,CAAC;IAEM,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;IAC1C,CAAC,CAAC;IAEM,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;IAC7B,CAAC,CAAC;IAEM,WAAM,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC,CAAC;0BA/DwB,CAAC,CAAC;gBAKL,IAAI,CAAC,OAAO;;oBAQN,KAAK;mBAKW,KAAK;;EAYlD,iBAAiB;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;KAC3B;IACD,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAEhF,IAAI,UAAU,EAAE;MACd,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;EACH,CAAC;EAED,gBAAgB;EAEhB,KAAK,CAAC,iBAAiB,CAAC,KAAa;IACnC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;EAC9B,CAAC;EAsBD,MAAM;IACJ,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEzE,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,iBAAiB;QAC1B,6BACgB,GAAG,OAAO,EAAE,iBACb,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,qBACpB,OAAO,EACxB,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,cAAc,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAChC,GAAG,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,QAA4B,CAAC,GAClE;QACF,aAAO,OAAO,EAAE,OAAO;UACrB,eAAQ,CACF,CACJ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,cAAc,GAAG,CAAC,CAAC","sourcesContent":["import { Element, Component, Event, h, Prop, Watch, Host, State, Method, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-radio',\n  styleUrl: 'radio.scss',\n  scoped: true,\n})\nexport class RadioComponent {\n  private inputId = `admiralty-radio-${radioButtonIds++}`;\n  private nativeInput!: HTMLInputElement;\n  private radioGroup: HTMLAdmiraltyRadioGroupElement | null = null;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * The tabindex of the radio button.\n   * @internal\n   */\n  @State() buttonTabindex = -1;\n\n  /**\n   * The name of the radio button for use on selection within a radio group\n   */\n  @Prop() name: string = this.inputId;\n  /**\n   * The value of the radio button for use on selection within a radio group\n   */\n  @Prop({ mutable: true }) value: string | null;\n  /**\n   * Determines whether the radio button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Determines whether the radio button is selected (or checked)\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * Emitted when the radio button gains focus.\n   */\n  @Event() admiraltyFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio button loses focus.\n   */\n  @Event() admiraltyBlur!: EventEmitter<void>;\n\n  connectedCallback() {\n    if (this.value === undefined) {\n      this.value = this.inputId;\n    }\n    const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));\n\n    if (radioGroup) {\n      this.updateState();\n    }\n  }\n\n  /** @internal */\n  @Method()\n  async setButtonTabindex(value: number) {\n    this.buttonTabindex = value;\n  }\n\n  private updateState = () => {\n    if (this.radioGroup) {\n      this.checked = this.radioGroup.value === this.value;\n    }\n  };\n\n  private onClick = () => {\n    this.checked = this.nativeInput.checked;\n  };\n\n  private onFocus = () => {\n    this.admiraltyFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.admiraltyBlur.emit();\n  };\n\n  @Watch('checked')\n  @Watch('disabled')\n  render() {\n    const { buttonTabindex, checked, disabled, inputId, name, value } = this;\n\n    return (\n      <Host>\n        <div class=\"admiralty-radio\">\n          <input\n            aria-checked={`${checked}`}\n            aria-hidden={disabled ? 'true' : null}\n            aria-labelledby={inputId}\n            id={inputId}\n            name={name}\n            tabindex={buttonTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n            class=\"admiralty-radio\"\n            type=\"radio\"\n            value={value}\n            checked={checked}\n            disabled={disabled ? true : null}\n            ref={nativeEl => (this.nativeInput = nativeEl as HTMLInputElement)}\n          />\n          <label htmlFor={inputId}>\n            <slot />\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet radioButtonIds = 0;\n"]}

package/dist/collection/components/radio-group/radio-group.css

@@ -0,0 +1,14 @@
+.radio-group {
+  display: flex;
+  flex-direction: row;
+}
+.radio-group ::slotted(*) {
+  margin-right: 2em !important;
+}
+
+.stack {
+  flex-direction: column;
+}
+.stack ::slotted(*) {
+  margin-bottom: 10px !important;
+}

package/dist/collection/components/radio-group/radio-group.js

@@ -0,0 +1,148 @@
+import { Host, h } from '@stencil/core';
+export class RadioGroupComponent {
+  constructor() {
+    this.inputId = `admiralty-rg-${radioGroupIds++}`;
+    this.setRadioTabindex = (value) => {
+      const radios = this.getRadios();
+      // Get the first radio that is not disabled and the checked one
+      const first = radios.find(radio => !radio.disabled);
+      const checked = radios.find(radio => radio.value === value && !radio.disabled);
+      if (!first && !checked) {
+        return;
+      }
+      // If an enabled checked radio exists, set it to be the focusable radio
+      // otherwise we default to focus the first radio
+      const focusable = checked || first;
+      for (const radio of radios) {
+        const tabindex = radio === focusable ? 0 : -1;
+        radio.setButtonTabindex(tabindex);
+      }
+    };
+    this.onClick = (e) => {
+      const selectedRadio = e.target && e.target.closest('admiralty-radio');
+      if (selectedRadio) {
+        const currentValue = this.value;
+        const newValue = selectedRadio.value;
+        if (newValue !== currentValue) {
+          this.value = newValue;
+        }
+        else {
+          this.value = undefined;
+        }
+      }
+    };
+    this.name = this.inputId;
+    this.value = undefined;
+    this.displayVertical = false;
+  }
+  valueChanged(value) {
+    this.setRadioTabindex(value);
+    this.radioChange.emit({ value });
+  }
+  componentDidLoad() {
+    this.setRadioTabindex(this.value);
+  }
+  getRadios() {
+    return Array.from(this.el.querySelectorAll('admiralty-radio'));
+  }
+  render() {
+    const { displayVertical } = this;
+    return (h(Host, null, h("div", { class: { 'radio-group': true, 'stack': displayVertical }, role: "radiogroup", onClick: this.onClick }, h("slot", null))));
+  }
+  static get is() { return "admiralty-radio-group"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["radio-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["radio-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the control, which is submitted with the form data"
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "this.inputId"
+      },
+      "value": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any | null",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the radio group"
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "displayVertical": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Setting this true displays the radio options vertically (defaults to false)"
+        },
+        "attribute": "display-vertical",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "radioChange",
+        "name": "radioChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the checked radio button changes"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "valueChanged"
+      }];
+  }
+}
+let radioGroupIds = 0;
+//# sourceMappingURL=radio-group.js.map

package/dist/collection/components/radio-group/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAoC,KAAK,EAAE,MAAM,eAAe,CAAC;AAOlH,MAAM,OAAO,mBAAmB;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;IAmC5C,qBAAgB,GAAG,CAAC,KAAsB,EAAE,EAAE;MACpD,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;MAEhC,+DAA+D;MAC/D,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MACpD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MAE/E,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,EAAE;QACtB,OAAO;OACR;MAED,uEAAuE;MACvE,gDAAgD;MAChD,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,CAAC;MAEnC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;QAC1B,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9C,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;OACnC;IACH,CAAC,CAAC;IAKM,YAAO,GAAG,CAAC,CAAQ,EAAE,EAAE;MAC7B,MAAM,aAAa,GAAG,CAAC,CAAC,MAAM,IAAK,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;MAEvF,IAAI,aAAa,EAAE;QACjB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC;QAErC,IAAI,QAAQ,KAAK,YAAY,EAAE;UAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;SACvB;aAAM;UACL,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;SACxB;OACF;IACH,CAAC,CAAC;gBAjEqB,IAAI,CAAC,OAAO;;2BAUA,KAAK;;EAGxC,YAAY,CAAC,KAAU;IACrB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAE7B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;EACnC,CAAC;EAOD,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACpC,CAAC;EAuBO,SAAS;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;EACjE,CAAC;EAgBD,MAAM;IACJ,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAEjC,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;QACpG,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,aAAa,GAAW,CAAC,CAAC","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter, ComponentInterface, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-radio-group',\n  styleUrl: 'radio-group.scss',\n  scoped: true,\n})\nexport class RadioGroupComponent implements ComponentInterface {\n  private inputId = `admiralty-rg-${radioGroupIds++}`;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * The name of the control, which is submitted with the form data\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * The value of the radio group\n   */\n  @Prop({ mutable: true }) value: any | null;\n\n  /**\n   * Setting this true displays the radio options vertically (defaults to false)\n   */\n  @Prop() displayVertical: boolean = false;\n\n  @Watch('value')\n  valueChanged(value: any) {\n    this.setRadioTabindex(value);\n\n    this.radioChange.emit({ value });\n  }\n\n  /**\n   * Event fired when the checked radio button changes\n   */\n  @Event() radioChange: EventEmitter<any>;\n\n  componentDidLoad(): void {\n    this.setRadioTabindex(this.value);\n  }\n\n  private setRadioTabindex = (value: any | undefined) => {\n    const radios = this.getRadios();\n\n    // Get the first radio that is not disabled and the checked one\n    const first = radios.find(radio => !radio.disabled);\n    const checked = radios.find(radio => radio.value === value && !radio.disabled);\n\n    if (!first && !checked) {\n      return;\n    }\n\n    // If an enabled checked radio exists, set it to be the focusable radio\n    // otherwise we default to focus the first radio\n    const focusable = checked || first;\n\n    for (const radio of radios) {\n      const tabindex = radio === focusable ? 0 : -1;\n      radio.setButtonTabindex(tabindex);\n    }\n  };\n\n  private getRadios(): any {\n    return Array.from(this.el.querySelectorAll('admiralty-radio'));\n  }\n  private onClick = (e: Event) => {\n    const selectedRadio = e.target && (e.target as HTMLElement).closest('admiralty-radio');\n\n    if (selectedRadio) {\n      const currentValue = this.value;\n      const newValue = selectedRadio.value;\n\n      if (newValue !== currentValue) {\n        this.value = newValue;\n      } else {\n        this.value = undefined;\n      }\n    }\n  };\n\n  render() {\n    const { displayVertical } = this;\n\n    return (\n      <Host>\n        <div class={{ 'radio-group': true, 'stack': displayVertical }} role=\"radiogroup\" onClick={this.onClick}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet radioGroupIds: number = 0;\n"]}

package/dist/collection/components/select/select.css

@@ -0,0 +1,59 @@
+/* Core Palette */
+/* Supporting Palette */
+/* Secondary Palette */
+/* Digital Product Colours */
+/* Utility Colours */
+/* Button Colours */
+/* Primary */
+/* Secondary */
+/* Link Colours */
+/* Nav colours */
+/* Table colours */
+/* Tab colours */
+/* form text input colours */
+/* form textarea colours */
+/* radio button */
+/* checkbox */
+/* code snippet */
+.disabled {
+  color: #adadad;
+}
+
+.select-wrapper {
+  position: relative;
+}
+
+admiralty-icon {
+  font-size: 24px;
+  font-weight: normal;
+  pointer-events: none;
+  position: absolute;
+  right: 12px;
+  top: 12px;
+}
+
+select {
+  appearance: none;
+  background-color: #ffffff;
+  border: 2px solid #333333;
+  box-sizing: border-box;
+  color: #333333;
+  font-family: "JohnstonITC", Helvetica, sans-serif;
+  font-size: 18px;
+  line-height: 24px;
+  margin-bottom: 6px;
+  position: relative;
+  font-weight: 300;
+  padding: 12px;
+  width: 100%;
+}
+select.error {
+  border-color: #e20d0d;
+}
+select:focus-visible {
+  outline: 3px solid #ffdd00;
+  box-shadow: inset 0 0 0 2px #333333;
+}
+select.disabled {
+  border-color: #adadad;
+}

package/dist/collection/components/select/select.js

@@ -0,0 +1,207 @@
+import { h, Host } from '@stencil/core';
+export class SelectComponent {
+  constructor() {
+    this.id = `admiralty-select-${++nextId}`;
+    this.disabled = false;
+    this.error = false;
+    this.errorHint = null;
+    this.hint = null;
+    this.label = 'Choose a colour';
+    this.width = undefined;
+  }
+  componentWillRender() {
+    this.getOptions();
+  }
+  handleSelect(event) {
+    this.admiraltyChange.emit(event.target);
+  }
+  handleBlur(_event) {
+    this.admiraltyBlur.emit();
+  }
+  /**
+   *  Summary. gets the options passed the user passes through the slots and
+   *  extracs the text and value
+   */
+  getOptions() {
+    const slotOptions = this.el.querySelectorAll('option');
+    const options = [];
+    // grab all the data from the slot and extract the data to be inserted into the template
+    slotOptions.forEach(slot => {
+      // remove the slotted option to keep the shadowDom clean
+      slot.remove();
+      options.push({
+        text: slot.text,
+        value: slot.value,
+      });
+    });
+    this.options = options;
+  }
+  render() {
+    const { disabled, error, errorHint, hint, id, label } = this;
+    const disabledClass = disabled ? 'disabled' : '';
+    return (h(Host, null, h("div", { class: `admiralty-select ${disabledClass}` }, h("admiralty-label", { for: id }, label), h("admiralty-hint", null, hint), h("div", { class: "select-wrapper", style: this.width ? { maxWidth: `${this.width}px` } : {} }, h("select", { id: id, class: { 'admiralty-form-control': true, 'error': error, 'disabled': disabled }, "aria-disabled": disabled ? 'true' : 'false', "aria-label": label, onChange: event => this.handleSelect(event), onBlur: event => this.handleBlur(event), disabled: disabled }, this.options.map(option => (h("option", { value: option.value }, option.text)))), h("admiralty-icon", { class: `select-down-icon ${disabledClass}`, "icon-name": "angle-down" })), this.error ? h("admiralty-input-error", null, errorHint) : '')));
+  }
+  static get is() { return "admiralty-select"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["select.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["select.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the user cannot interact with the select."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "error": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If 'true', the 'error' class is added to suggest an error"
+        },
+        "attribute": "error",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "errorHint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The hint that is used to inform the user of an error (displayed below the select box)"
+        },
+        "attribute": "error-hint",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "hint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text that will be used as a field label."
+        },
+        "attribute": "hint",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text that will be used as a field label."
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "'Choose a colour'"
+      },
+      "width": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The maximum width (px) for the input field."
+        },
+        "attribute": "width",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "admiraltyChange",
+        "name": "admiraltyChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the value has changed."
+        },
+        "complexType": {
+          "original": "EventTarget",
+          "resolved": "EventTarget",
+          "references": {
+            "EventTarget": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "admiraltyBlur",
+        "name": "admiraltyBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the component loses focus."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}
+let nextId = 0;
+//# sourceMappingURL=select.js.map

package/dist/collection/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, Prop, Element, EventEmitter, h, Host } from '@stencil/core';\nimport { UKHOOptions } from './select.types';\n\n@Component({\n  tag: 'admiralty-select',\n  styleUrl: 'select.scss',\n  shadow: true,\n})\nexport class SelectComponent {\n  @Element() el: HTMLElement;\n  id: string = `admiralty-select-${++nextId}`;\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * If 'true', the 'error' class is added to suggest an error\n   */\n  @Prop() error: boolean = false;\n  /**\n   * The hint that is used to inform the user of an error (displayed below the select box)\n   */\n  @Prop() errorHint: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() hint: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() label: string = 'Choose a colour';\n  /**\n   * The maximum width (px) for the input field.\n   */\n  @Prop() width?: number;\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyChange: EventEmitter<EventTarget>;\n  /**\n   * Emitted when the component loses focus.\n   */\n  @Event() admiraltyBlur: EventEmitter<void>;\n\n  componentWillRender() {\n    this.getOptions();\n  }\n\n  options: Array<UKHOOptions>;\n\n  handleSelect(event: Event) {\n    this.admiraltyChange.emit(event.target);\n  }\n\n  handleBlur(_event: FocusEvent): void {\n    this.admiraltyBlur.emit();\n  }\n\n  /**\n   *  Summary. gets the options passed the user passes through the slots and\n   *  extracs the text and value\n   */\n  getOptions() {\n    const slotOptions = this.el.querySelectorAll('option');\n    const options = [];\n\n    // grab all the data from the slot and extract the data to be inserted into the template\n    slotOptions.forEach(slot => {\n      // remove the slotted option to keep the shadowDom clean\n      slot.remove();\n\n      options.push({\n        text: slot.text,\n        value: slot.value,\n      });\n    });\n\n    this.options = options;\n  }\n\n  render() {\n    const { disabled, error, errorHint, hint, id, label } = this;\n    const disabledClass = disabled ? 'disabled' : '';\n\n    return (\n      <Host>\n        <div class={`admiralty-select ${disabledClass}`}>\n          <admiralty-label for={id}>{label}</admiralty-label>\n          <admiralty-hint>{hint}</admiralty-hint>\n          <div class=\"select-wrapper\" style={this.width ? { maxWidth: `${this.width}px` } : {}}>\n            <select\n              id={id}\n              class={{ 'admiralty-form-control': true, 'error': error, 'disabled': disabled }}\n              aria-disabled={disabled ? 'true' : 'false'}\n              aria-label={label}\n              onChange={event => this.handleSelect(event)}\n              onBlur={event => this.handleBlur(event)}\n              disabled={disabled}\n            >\n              {this.options.map(option => (\n                <option value={option.value}>{option.text}</option>\n              ))}\n            </select>\n            <admiralty-icon class={`select-down-icon ${disabledClass}`} icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          {this.error ? <admiralty-input-error>{errorHint}</admiralty-input-error> : ''}\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"]}

package/dist/collection/components/select/select.types.js

@@ -0,0 +1,3 @@
+;
+export {};
+//# sourceMappingURL=select.types.js.map

package/dist/collection/components/select/select.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.types.js","sourceRoot":"","sources":["../../../src/components/select/select.types.ts"],"names":[],"mappings":"AAGC,CAAC","sourcesContent":["export interface UKHOOptions {\r\n    text: string;\r\n    value: string;\r\n};"]}