@ukho/admiralty-core 0.4.6 → 0.5.0

package/dist/components/{input-error.js → input-invalid.js}

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { a as faExclamation, d as defineCustomElement$1 } from './icon.js';
 
-const inputErrorCss = ".sc-admiralty-input-error-h{display:flex;align-items:center}admiralty-icon.sc-admiralty-input-error{color:#e20d0d}p.sc-admiralty-input-error{margin:0;color:#e20d0d}";
+const inputInvalidCss = ".sc-admiralty-input-invalid-h{display:flex;align-items:center}admiralty-icon.sc-admiralty-input-invalid{color:#e20d0d}p.sc-admiralty-input-invalid{margin:0;color:#e20d0d}";
 
-const InputError = /*@__PURE__*/ proxyCustomElement(class InputError extends HTMLElement {
+const InputInvalidComponent = /*@__PURE__*/ proxyCustomElement(class InputInvalidComponent extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -11,17 +11,17 @@ const InputError = /*@__PURE__*/ proxyCustomElement(class InputError extends HTM
   render() {
     return (h(Host, null, h("admiralty-icon", { "icon-name": faExclamation.iconName, class: "error-icon" }), h("p", null, h("slot", null))));
   }
-  static get style() { return inputErrorCss; }
-}, [6, "admiralty-input-error"]);
+  static get style() { return inputInvalidCss; }
+}, [6, "admiralty-input-invalid"]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["admiralty-input-error", "admiralty-icon"];
+  const components = ["admiralty-input-invalid", "admiralty-icon"];
   components.forEach(tagName => { switch (tagName) {
-    case "admiralty-input-error":
+    case "admiralty-input-invalid":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, InputError);
+        customElements.define(tagName, InputInvalidComponent);
       }
       break;
     case "admiralty-icon":
@@ -32,6 +32,6 @@ function defineCustomElement() {
   } });
 }
 
-export { InputError as I, defineCustomElement as d };
+export { InputInvalidComponent as I, defineCustomElement as d };
 
-//# sourceMappingURL=input-error.js.map
+//# sourceMappingURL=input-invalid.js.map

package/dist/components/input-invalid.js.map

@@ -0,0 +1 @@
+{"file":"input-invalid.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,4KAA4K;;MCYvL,qBAAqB;;;;;EAChC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,mCAA2B,aAAa,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,GAAkB,EACvF,aACE,eAAa,CACX,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/input-invalid/input-invalid.scss?tag=admiralty-input-invalid&encapsulation=scoped","./src/components/input-invalid/input-invalid.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n\n:host {\n  display: flex;\n  align-items: center;\n}\n\nadmiralty-icon {\n  color: colours.$colour-utility-error;\n}\n\np {\n  margin: 0;\n  color: colours.$colour-utility-error;\n}\n\n","import { Component, h, Host } from '@stencil/core';\nimport { faExclamation } from '@fortawesome/free-solid-svg-icons';\n\n/**\n * @slot - The error content should be placed in the slot e.g.\n * `<admiralty-input-invalid>This field is required</admiralty-input-invalid>`\n */\n@Component({\n  tag: 'admiralty-input-invalid',\n  styleUrl: 'input-invalid.scss',\n  scoped: true,\n})\nexport class InputInvalidComponent {\n  render() {\n    return (\n      <Host>\n        <admiralty-icon icon-name={faExclamation.iconName} class=\"error-icon\"></admiralty-icon>\n        <p>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/input.js

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$4 } from './hint.js';
 import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './input-error.js';
+import { d as defineCustomElement$2 } from './input-invalid.js';
 import { d as defineCustomElement$1 } from './label.js';
 
-const inputCss = ".text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:#ffffff;border-color:#333333;border-width:2px;border-style:solid;color:#333333;font-size:18px;line-height:24px;font-weight:300;padding:12px}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:#e20d0d}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:#adadad;border-color:#adadad;background:#ffffff}.text-input-container.sc-admiralty-input admiralty-input-error.sc-admiralty-input{margin-top:6px}";
+const inputCss = ".text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:#ffffff;border-color:#333333;border-width:2px;border-style:solid;color:#333333;font-size:18px;line-height:24px;font-weight:300;padding:12px}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:#e20d0d}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:#adadad;border-color:#adadad;background:#ffffff}.text-input-container.sc-admiralty-input admiralty-input-invalid.sc-admiralty-input{margin-top:6px}";
 
 const InputComponent = /*@__PURE__*/ proxyCustomElement(class InputComponent extends HTMLElement {
   constructor() {
@@ -50,7 +50,7 @@ const InputComponent = /*@__PURE__*/ proxyCustomElement(class InputComponent ext
     const value = this.getValue();
     return (h("div", { class: "text-input-container" }, this.label ? (h("admiralty-label", { disabled: this.disabled, for: this.inputId }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, h("input", { ref: input => (this.nativeInput = input), class: { disabled: this.disabled, invalid: this.invalid }, disabled: this.disabled, id: this.inputId, name: this.name, type: this.type, value: value, maxLength: this.maxLength, onInput: this.onInput, placeholder: this.placeholder, autoComplete: this.autocomplete, required: this.required, style: {
         maxWidth: this.width ? `${this.width}px` : null,
-      } }), h("admiralty-input-error", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
+      } }), h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
   }
   static get watchers() { return {
     "value": ["valueChanged"]
@@ -76,7 +76,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["admiralty-input", "admiralty-hint", "admiralty-icon", "admiralty-input-error", "admiralty-label"];
+  const components = ["admiralty-input", "admiralty-hint", "admiralty-icon", "admiralty-input-invalid", "admiralty-label"];
   components.forEach(tagName => { switch (tagName) {
     case "admiralty-input":
       if (!customElements.get(tagName)) {
@@ -93,7 +93,7 @@ function defineCustomElement() {
         defineCustomElement$3();
       }
       break;
-    case "admiralty-input-error":
+    case "admiralty-input-invalid":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/input.js.map

@@ -1 +1 @@
-{"file":"input.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,64BAA64B;;MCej5B,cAAc;;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACnG;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACT,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzF,aACE,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAChD,GACD,EACF,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CACnJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n  display: flex;\n  flex-direction: column;\n\n  input {\n    background-color: colours.$colour-white;\n    border-color: colours.$colour-text;\n    border-width: 2px;\n    border-style: solid;\n    color: colours.$colour-text;\n    font-size: 18px;\n    line-height: 24px;\n    font-weight: typography.$font-weight-light;\n\n    padding: 12px;\n\n    &:focus {\n      outline-offset: unset;\n      outline: 3px solid colours.$colour-utility-focus;\n      box-shadow: colours.$colour-text inset 0 0 0 2px;\n    }\n\n    &.invalid {\n      border-color: colours.$colour-utility-error;\n\n      &:focus-visible {\n        border-color: unset;\n        outline: 3px solid colours.$colour-utility-focus;\n      }\n    }\n\n    &.disabled {\n      color: colours.$colour-textinput-text-disabled;\n      border-color: colours.$colour-textinput-border-disabled;\n      background: colours.$colour-white;\n    }\n  }\n\n  admiralty-input-error {\n    margin-top: 6px;\n  }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n  tag: 'admiralty-input',\n  styleUrl: 'input.scss',\n  scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n  inputId: string = `admiralty-input-${++nextId}`;\n\n  private nativeInput?: HTMLInputElement;\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 label which will be used above the input to describe the input.\n   */\n  @Prop() label: string;\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The input type, options are: `text | date | time | email | password | tel | url`\n   */\n  @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * The placeholder text to show in the input\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width: number;\n\n  /**\n   * The maximum string length for the input field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * This dictates whether the input is required or not\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: string = 'off';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyInput: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n    if (nativeInput && nativeInput.value !== value) {\n      nativeInput.value = value;\n    }\n    this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n  };\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  render() {\n    const value = this.getValue();\n    return (\n      <div class=\"text-input-container\">\n        {this.label ? (\n          <admiralty-label disabled={this.disabled} for={this.inputId}>\n            {this.label}\n          </admiralty-label>\n        ) : null}\n        {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n        <input\n          ref={input => (this.nativeInput = input)}\n          class={{ disabled: this.disabled, invalid: this.invalid }}\n          disabled={this.disabled}\n          id={this.inputId}\n          name={this.name}\n          type={this.type}\n          value={value}\n          maxLength={this.maxLength}\n          onInput={this.onInput}\n          placeholder={this.placeholder}\n          autoComplete={this.autocomplete}\n          required={this.required}\n          style={{\n            maxWidth: this.width ? `${this.width}px` : null,\n          }}\n        />\n        <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"],"version":3}
+{"file":"input.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,+4BAA+4B;;MCen5B,cAAc;;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACnG;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACT,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzF,aACE,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAChD,GACD,EACF,+BAAyB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAA2B,CACvJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n  display: flex;\n  flex-direction: column;\n\n  input {\n    background-color: colours.$colour-white;\n    border-color: colours.$colour-text;\n    border-width: 2px;\n    border-style: solid;\n    color: colours.$colour-text;\n    font-size: 18px;\n    line-height: 24px;\n    font-weight: typography.$font-weight-light;\n\n    padding: 12px;\n\n    &:focus {\n      outline-offset: unset;\n      outline: 3px solid colours.$colour-utility-focus;\n      box-shadow: colours.$colour-text inset 0 0 0 2px;\n    }\n\n    &.invalid {\n      border-color: colours.$colour-utility-error;\n\n      &:focus-visible {\n        border-color: unset;\n        outline: 3px solid colours.$colour-utility-focus;\n      }\n    }\n\n    &.disabled {\n      color: colours.$colour-textinput-text-disabled;\n      border-color: colours.$colour-textinput-border-disabled;\n      background: colours.$colour-white;\n    }\n  }\n\n  admiralty-input-invalid {\n    margin-top: 6px;\n  }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n  tag: 'admiralty-input',\n  styleUrl: 'input.scss',\n  scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n  inputId: string = `admiralty-input-${++nextId}`;\n\n  private nativeInput?: HTMLInputElement;\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 label which will be used above the input to describe the input.\n   */\n  @Prop() label: string;\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The input type, options are: `text | date | time | email | password | tel | url`\n   */\n  @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * The placeholder text to show in the input\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width: number;\n\n  /**\n   * The maximum string length for the input field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * This dictates whether the input is required or not\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: string = 'off';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyInput: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n    if (nativeInput && nativeInput.value !== value) {\n      nativeInput.value = value;\n    }\n    this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n  };\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  render() {\n    const value = this.getValue();\n    return (\n      <div class=\"text-input-container\">\n        {this.label ? (\n          <admiralty-label disabled={this.disabled} for={this.inputId}>\n            {this.label}\n          </admiralty-label>\n        ) : null}\n        {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n        <input\n          ref={input => (this.nativeInput = input)}\n          class={{ disabled: this.disabled, invalid: this.invalid }}\n          disabled={this.disabled}\n          id={this.inputId}\n          name={this.name}\n          type={this.type}\n          value={value}\n          maxLength={this.maxLength}\n          onInput={this.onInput}\n          placeholder={this.placeholder}\n          autoComplete={this.autocomplete}\n          required={this.required}\n          style={{\n            maxWidth: this.width ? `${this.width}px` : null,\n          }}\n        />\n        <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"],"version":3}

package/dist/esm/admiralty-hint_3.entry.js

@@ -14,9 +14,9 @@ const HintComponent = class {
 };
 HintComponent.style = hintCss;
 
-const inputErrorCss = ".sc-admiralty-input-error-h{display:flex;align-items:center}admiralty-icon.sc-admiralty-input-error{color:#e20d0d}p.sc-admiralty-input-error{margin:0;color:#e20d0d}";
+const inputInvalidCss = ".sc-admiralty-input-invalid-h{display:flex;align-items:center}admiralty-icon.sc-admiralty-input-invalid{color:#e20d0d}p.sc-admiralty-input-invalid{margin:0;color:#e20d0d}";
 
-const InputError = class {
+const InputInvalidComponent = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
   }
@@ -24,7 +24,7 @@ const InputError = class {
     return (h(Host, null, h("admiralty-icon", { "icon-name": faExclamation.iconName, class: "error-icon" }), h("p", null, h("slot", null))));
   }
 };
-InputError.style = inputErrorCss;
+InputInvalidComponent.style = inputInvalidCss;
 
 const labelCss = "label.sc-admiralty-label{margin-bottom:6px;display:inline-block;font-weight:normal}label.disabled.sc-admiralty-label{color:#adadad}";
 
@@ -40,6 +40,6 @@ const LabelComponent = class {
 };
 LabelComponent.style = labelCss;
 
-export { HintComponent as admiralty_hint, InputError as admiralty_input_error, LabelComponent as admiralty_label };
+export { HintComponent as admiralty_hint, InputInvalidComponent as admiralty_input_invalid, LabelComponent as admiralty_label };
 
 //# sourceMappingURL=admiralty-hint_3.entry.js.map

package/dist/esm/admiralty-hint_3.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-hint.admiralty-input-error.admiralty-label.entry.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,8HAA8H;;MCWjI,aAAa;;;;;EAMxB,MAAM;IACJ,QACE,SAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IACnC,eAAa,CACX,EACJ;GACH;;;;ACvBH,MAAM,aAAa,GAAG,sKAAsK;;MCY/K,UAAU;;;;EACrB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,mCAA2B,aAAa,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,GAAkB,EACvF,aACE,eAAa,CACX,CACC,EACP;GACH;;;;ACtBH,MAAM,QAAQ,GAAG,qIAAqI;;MCWzI,cAAc;;;;;;EAWzB,MAAM;IACJ,QACE,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC1D,eAAa,CACP,EACR;GACH;;;;;;","names":[],"sources":["./src/components/hint/hint.scss?tag=admiralty-hint&encapsulation=scoped","./src/components/hint/hint.tsx","./src/components/input-error/input-error.scss?tag=admiralty-input-error&encapsulation=scoped","./src/components/input-error/input-error.tsx","./src/components/label/label.scss?tag=admiralty-label&encapsulation=scoped","./src/components/label/label.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/vars/typography\";\n\np {\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  font-weight: typography.$font-weight-light;\n\n  &.disabled {\n    color: colours.$colour-textinput-text-disabled;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The hint content should be placed in the slot e.g.\n * `<admiralty-hint>Enter your full name</admiralty-hint>`\n */\n@Component({\n  tag: 'admiralty-hint',\n  styleUrl: 'hint.scss',\n  scoped: true,\n})\nexport class HintComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  render() {\n    return (\n      <p class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </p>\n    );\n  }\n}\n","@use '../../scss/vars/colours';\n\n:host {\n  display: flex;\n  align-items: center;\n}\n\nadmiralty-icon {\n  color: colours.$colour-utility-error;\n}\n\np {\n  margin: 0;\n  color: colours.$colour-utility-error;\n}\n\n","import { Component, h, Host } from '@stencil/core';\nimport { faExclamation } from '@fortawesome/free-solid-svg-icons';\n\n/**\n * @slot - The error content should be placed in the slot e.g.\n * `<admiralty-input-error>This field is required</admiralty-input-error>`\n */\n@Component({\n  tag: 'admiralty-input-error',\n  styleUrl: 'input-error.scss',\n  scoped: true,\n})\nexport class InputError {\n  render() {\n    return (\n      <Host>\n        <admiralty-icon icon-name={faExclamation.iconName} class=\"error-icon\"></admiralty-icon>\n        <p>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n}\n","@use \"../../scss/vars/colours\";\n@use \"../../scss/vars/typography\";\n\nlabel {\n  margin-bottom: 6px;\n  display: inline-block;\n  font-weight: typography.$font-weight-medium;\n\n  &.disabled {\n    color: colours.$colour-textinput-text-disabled;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The label content should be placed in the slot e.g.\n * `<admiralty-label>First Name</admiralty-label>`\n */\n@Component({\n  tag: 'admiralty-label',\n  styleUrl: 'label.scss',\n  scoped: true,\n})\nexport class LabelComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * The id of the input the label is attached to\n   */\n  @Prop() for: string;\n\n  render() {\n    return (\n      <label htmlFor={this.for} class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </label>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-hint.admiralty-input-invalid.admiralty-label.entry.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,8HAA8H;;MCWjI,aAAa;;;;;EAMxB,MAAM;IACJ,QACE,SAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IACnC,eAAa,CACX,EACJ;GACH;;;;ACvBH,MAAM,eAAe,GAAG,4KAA4K;;MCYvL,qBAAqB;;;;EAChC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,mCAA2B,aAAa,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,GAAkB,EACvF,aACE,eAAa,CACX,CACC,EACP;GACH;;;;ACtBH,MAAM,QAAQ,GAAG,qIAAqI;;MCWzI,cAAc;;;;;;EAWzB,MAAM;IACJ,QACE,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC1D,eAAa,CACP,EACR;GACH;;;;;;","names":[],"sources":["./src/components/hint/hint.scss?tag=admiralty-hint&encapsulation=scoped","./src/components/hint/hint.tsx","./src/components/input-invalid/input-invalid.scss?tag=admiralty-input-invalid&encapsulation=scoped","./src/components/input-invalid/input-invalid.tsx","./src/components/label/label.scss?tag=admiralty-label&encapsulation=scoped","./src/components/label/label.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/vars/typography\";\n\np {\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  font-weight: typography.$font-weight-light;\n\n  &.disabled {\n    color: colours.$colour-textinput-text-disabled;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The hint content should be placed in the slot e.g.\n * `<admiralty-hint>Enter your full name</admiralty-hint>`\n */\n@Component({\n  tag: 'admiralty-hint',\n  styleUrl: 'hint.scss',\n  scoped: true,\n})\nexport class HintComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  render() {\n    return (\n      <p class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </p>\n    );\n  }\n}\n","@use '../../scss/vars/colours';\n\n:host {\n  display: flex;\n  align-items: center;\n}\n\nadmiralty-icon {\n  color: colours.$colour-utility-error;\n}\n\np {\n  margin: 0;\n  color: colours.$colour-utility-error;\n}\n\n","import { Component, h, Host } from '@stencil/core';\nimport { faExclamation } from '@fortawesome/free-solid-svg-icons';\n\n/**\n * @slot - The error content should be placed in the slot e.g.\n * `<admiralty-input-invalid>This field is required</admiralty-input-invalid>`\n */\n@Component({\n  tag: 'admiralty-input-invalid',\n  styleUrl: 'input-invalid.scss',\n  scoped: true,\n})\nexport class InputInvalidComponent {\n  render() {\n    return (\n      <Host>\n        <admiralty-icon icon-name={faExclamation.iconName} class=\"error-icon\"></admiralty-icon>\n        <p>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n}\n","@use \"../../scss/vars/colours\";\n@use \"../../scss/vars/typography\";\n\nlabel {\n  margin-bottom: 6px;\n  display: inline-block;\n  font-weight: typography.$font-weight-medium;\n\n  &.disabled {\n    color: colours.$colour-textinput-text-disabled;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The label content should be placed in the slot e.g.\n * `<admiralty-label>First Name</admiralty-label>`\n */\n@Component({\n  tag: 'admiralty-label',\n  styleUrl: 'label.scss',\n  scoped: true,\n})\nexport class LabelComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * The id of the input the label is attached to\n   */\n  @Prop() for: string;\n\n  render() {\n    return (\n      <label htmlFor={this.for} class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </label>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/admiralty-input.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-b834f47d.js';
 
-const inputCss = ".text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:#ffffff;border-color:#333333;border-width:2px;border-style:solid;color:#333333;font-size:18px;line-height:24px;font-weight:300;padding:12px}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:#e20d0d}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:#adadad;border-color:#adadad;background:#ffffff}.text-input-container.sc-admiralty-input admiralty-input-error.sc-admiralty-input{margin-top:6px}";
+const inputCss = ".text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:#ffffff;border-color:#333333;border-width:2px;border-style:solid;color:#333333;font-size:18px;line-height:24px;font-weight:300;padding:12px}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:#e20d0d}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:#adadad;border-color:#adadad;background:#ffffff}.text-input-container.sc-admiralty-input admiralty-input-invalid.sc-admiralty-input{margin-top:6px}";
 
 const InputComponent = class {
   constructor(hostRef) {
@@ -45,7 +45,7 @@ const InputComponent = class {
     const value = this.getValue();
     return (h("div", { class: "text-input-container" }, this.label ? (h("admiralty-label", { disabled: this.disabled, for: this.inputId }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, h("input", { ref: input => (this.nativeInput = input), class: { disabled: this.disabled, invalid: this.invalid }, disabled: this.disabled, id: this.inputId, name: this.name, type: this.type, value: value, maxLength: this.maxLength, onInput: this.onInput, placeholder: this.placeholder, autoComplete: this.autocomplete, required: this.required, style: {
         maxWidth: this.width ? `${this.width}px` : null,
-      } }), h("admiralty-input-error", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
+      } }), h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
   }
   static get watchers() { return {
     "value": ["valueChanged"]

package/dist/esm/admiralty-input.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-input.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,64BAA64B;;MCej5B,cAAc;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACnG;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACT,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzF,aACE,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAChD,GACD,EACF,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CACnJ,EACN;GACH;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n  display: flex;\n  flex-direction: column;\n\n  input {\n    background-color: colours.$colour-white;\n    border-color: colours.$colour-text;\n    border-width: 2px;\n    border-style: solid;\n    color: colours.$colour-text;\n    font-size: 18px;\n    line-height: 24px;\n    font-weight: typography.$font-weight-light;\n\n    padding: 12px;\n\n    &:focus {\n      outline-offset: unset;\n      outline: 3px solid colours.$colour-utility-focus;\n      box-shadow: colours.$colour-text inset 0 0 0 2px;\n    }\n\n    &.invalid {\n      border-color: colours.$colour-utility-error;\n\n      &:focus-visible {\n        border-color: unset;\n        outline: 3px solid colours.$colour-utility-focus;\n      }\n    }\n\n    &.disabled {\n      color: colours.$colour-textinput-text-disabled;\n      border-color: colours.$colour-textinput-border-disabled;\n      background: colours.$colour-white;\n    }\n  }\n\n  admiralty-input-error {\n    margin-top: 6px;\n  }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n  tag: 'admiralty-input',\n  styleUrl: 'input.scss',\n  scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n  inputId: string = `admiralty-input-${++nextId}`;\n\n  private nativeInput?: HTMLInputElement;\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 label which will be used above the input to describe the input.\n   */\n  @Prop() label: string;\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The input type, options are: `text | date | time | email | password | tel | url`\n   */\n  @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * The placeholder text to show in the input\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width: number;\n\n  /**\n   * The maximum string length for the input field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * This dictates whether the input is required or not\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: string = 'off';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyInput: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n    if (nativeInput && nativeInput.value !== value) {\n      nativeInput.value = value;\n    }\n    this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n  };\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  render() {\n    const value = this.getValue();\n    return (\n      <div class=\"text-input-container\">\n        {this.label ? (\n          <admiralty-label disabled={this.disabled} for={this.inputId}>\n            {this.label}\n          </admiralty-label>\n        ) : null}\n        {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n        <input\n          ref={input => (this.nativeInput = input)}\n          class={{ disabled: this.disabled, invalid: this.invalid }}\n          disabled={this.disabled}\n          id={this.inputId}\n          name={this.name}\n          type={this.type}\n          value={value}\n          maxLength={this.maxLength}\n          onInput={this.onInput}\n          placeholder={this.placeholder}\n          autoComplete={this.autocomplete}\n          required={this.required}\n          style={{\n            maxWidth: this.width ? `${this.width}px` : null,\n          }}\n        />\n        <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"],"version":3}
+{"file":"admiralty-input.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,+4BAA+4B;;MCen5B,cAAc;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACnG;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACT,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzF,aACE,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAChD,GACD,EACF,+BAAyB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAA2B,CACvJ,EACN;GACH;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n  display: flex;\n  flex-direction: column;\n\n  input {\n    background-color: colours.$colour-white;\n    border-color: colours.$colour-text;\n    border-width: 2px;\n    border-style: solid;\n    color: colours.$colour-text;\n    font-size: 18px;\n    line-height: 24px;\n    font-weight: typography.$font-weight-light;\n\n    padding: 12px;\n\n    &:focus {\n      outline-offset: unset;\n      outline: 3px solid colours.$colour-utility-focus;\n      box-shadow: colours.$colour-text inset 0 0 0 2px;\n    }\n\n    &.invalid {\n      border-color: colours.$colour-utility-error;\n\n      &:focus-visible {\n        border-color: unset;\n        outline: 3px solid colours.$colour-utility-focus;\n      }\n    }\n\n    &.disabled {\n      color: colours.$colour-textinput-text-disabled;\n      border-color: colours.$colour-textinput-border-disabled;\n      background: colours.$colour-white;\n    }\n  }\n\n  admiralty-input-invalid {\n    margin-top: 6px;\n  }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n  tag: 'admiralty-input',\n  styleUrl: 'input.scss',\n  scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n  inputId: string = `admiralty-input-${++nextId}`;\n\n  private nativeInput?: HTMLInputElement;\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 label which will be used above the input to describe the input.\n   */\n  @Prop() label: string;\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The input type, options are: `text | date | time | email | password | tel | url`\n   */\n  @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * The placeholder text to show in the input\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width: number;\n\n  /**\n   * The maximum string length for the input field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * This dictates whether the input is required or not\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: string = 'off';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyInput: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n    if (nativeInput && nativeInput.value !== value) {\n      nativeInput.value = value;\n    }\n    this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n  };\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  render() {\n    const value = this.getValue();\n    return (\n      <div class=\"text-input-container\">\n        {this.label ? (\n          <admiralty-label disabled={this.disabled} for={this.inputId}>\n            {this.label}\n          </admiralty-label>\n        ) : null}\n        {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n        <input\n          ref={input => (this.nativeInput = input)}\n          class={{ disabled: this.disabled, invalid: this.invalid }}\n          disabled={this.disabled}\n          id={this.inputId}\n          name={this.name}\n          type={this.type}\n          value={value}\n          maxLength={this.maxLength}\n          onInput={this.onInput}\n          placeholder={this.placeholder}\n          autoComplete={this.autocomplete}\n          required={this.required}\n          style={{\n            maxWidth: this.width ? `${this.width}px` : null,\n          }}\n        />\n        <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"],"version":3}

package/dist/esm/admiralty-radio-group.entry.js

@@ -62,7 +62,7 @@ const RadioGroupComponent = class {
   }
   render() {
     const { displayVertical } = this;
-    return (h(Host, null, h("div", { class: { 'radio-group': true, 'stack': displayVertical }, role: "radiogroup", onClick: this.onClick }, h("slot", null), h("admiralty-input-error", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage))));
+    return (h(Host, null, h("div", { class: { 'radio-group': true, 'stack': displayVertical }, role: "radiogroup", onClick: this.onClick }, h("slot", null), h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/admiralty-radio-group.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-radio-group.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,sVAAsV;;MCQ/V,mBAAmB;;;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;IAwD5C,qBAAgB,GAAG,CAAC,KAAsB;MAChD,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;;MAGhC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MACpD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MAE/E,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,EAAE;QACtB,OAAO;OACR;;;MAID,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,CAAC;MAEnC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;QAC1B,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9C,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;OACnC;KACF,CAAC;IAKM,YAAO,GAAG,CAAC,CAAQ;MACzB,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;OACF;KACF,CAAC;gBApFqB,IAAI,CAAC,OAAO;;2BAUA,KAAK;mBAKb,KAAK;;;EAQhC,YAAY,CAAC,KAAU;IACrB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;GACtC;EAQD,cAAc,CAAC,KAAc;IAC3B,IAAI,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK;MAC5B,IAAI,KAAK,EAAE;QACT,KAAK,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;OACvC;WAAM;QACL,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;OAClC;KACF,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACnC;EAuBO,SAAS;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;GAChE;EAcD,MAAM;IACJ,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAEjC,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACpG,eAAa,EACb,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CACnJ,CACD,EACP;GACH;;;;;;;AAGH,IAAI,aAAa,GAAW,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/radio-group/radio-group.scss?tag=admiralty-radio-group&encapsulation=scoped","./src/components/radio-group/radio-group.tsx"],"sourcesContent":[".radio-group {\n  display: flex;\n  flex-direction: row;\n\n  ::slotted(*) {\n    margin-right: 2em !important;\n  }\n}\n\n.stack {\n  flex-direction: column;\n\n  ::slotted(*) {\n    margin-bottom: 10px !important;\n  }\n}\n\n","import { Component, Host, h, Prop, Element, Event, EventEmitter, ComponentInterface, Watch } from '@stencil/core';\nimport { RadioGroupChangeEventDetail } from './radio-group-interface';\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  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  @Watch('value')\n  valueChanged(value: any) {\n    this.setRadioTabindex(value);\n    this.admiraltyChange.emit({ value });\n  }\n\n  /**\n   * Event fired when the checked radio button changes\n   */\n  @Event() admiraltyChange: EventEmitter<RadioGroupChangeEventDetail>;\n\n  @Watch('invalid')\n  invalidChanged(value: boolean) {\n    this.getRadios().forEach(radio => {\n      if (value) {\n        radio.setAttribute('invalid', 'true');\n      } else {\n        radio.removeAttribute('invalid');\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    this.setRadioTabindex(this.value);\n    this.invalidChanged(this.invalid);\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(): HTMLAdmiraltyRadioElement[] {\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      }\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          <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet radioGroupIds: number = 0;\n"],"version":3}
+{"file":"admiralty-radio-group.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,sVAAsV;;MCQ/V,mBAAmB;;;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;IAwD5C,qBAAgB,GAAG,CAAC,KAAsB;MAChD,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;;MAGhC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MACpD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MAE/E,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,EAAE;QACtB,OAAO;OACR;;;MAID,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,CAAC;MAEnC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;QAC1B,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9C,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;OACnC;KACF,CAAC;IAKM,YAAO,GAAG,CAAC,CAAQ;MACzB,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;OACF;KACF,CAAC;gBApFqB,IAAI,CAAC,OAAO;;2BAUA,KAAK;mBAKb,KAAK;;;EAQhC,YAAY,CAAC,KAAU;IACrB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;GACtC;EAQD,cAAc,CAAC,KAAc;IAC3B,IAAI,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK;MAC5B,IAAI,KAAK,EAAE;QACT,KAAK,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;OACvC;WAAM;QACL,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;OAClC;KACF,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACnC;EAuBO,SAAS;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;GAChE;EAcD,MAAM;IACJ,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAEjC,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACpG,eAAa,EACb,+BAAyB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAA2B,CACvJ,CACD,EACP;GACH;;;;;;;AAGH,IAAI,aAAa,GAAW,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/radio-group/radio-group.scss?tag=admiralty-radio-group&encapsulation=scoped","./src/components/radio-group/radio-group.tsx"],"sourcesContent":[".radio-group {\n  display: flex;\n  flex-direction: row;\n\n  ::slotted(*) {\n    margin-right: 2em !important;\n  }\n}\n\n.stack {\n  flex-direction: column;\n\n  ::slotted(*) {\n    margin-bottom: 10px !important;\n  }\n}\n\n","import { Component, Host, h, Prop, Element, Event, EventEmitter, ComponentInterface, Watch } from '@stencil/core';\nimport { RadioGroupChangeEventDetail } from './radio-group-interface';\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  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  @Watch('value')\n  valueChanged(value: any) {\n    this.setRadioTabindex(value);\n    this.admiraltyChange.emit({ value });\n  }\n\n  /**\n   * Event fired when the checked radio button changes\n   */\n  @Event() admiraltyChange: EventEmitter<RadioGroupChangeEventDetail>;\n\n  @Watch('invalid')\n  invalidChanged(value: boolean) {\n    this.getRadios().forEach(radio => {\n      if (value) {\n        radio.setAttribute('invalid', 'true');\n      } else {\n        radio.removeAttribute('invalid');\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    this.setRadioTabindex(this.value);\n    this.invalidChanged(this.invalid);\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(): HTMLAdmiraltyRadioElement[] {\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      }\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          <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet radioGroupIds: number = 0;\n"],"version":3}

package/dist/esm/admiralty-select.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b834f47d.js';
 
-const selectCss = ".disabled.sc-admiralty-select{color:#adadad}.select-wrapper.sc-admiralty-select{position:relative}admiralty-icon.sc-admiralty-select{font-size:24px;font-weight:normal;pointer-events:none;position:absolute;right:12px;top:12px}select.sc-admiralty-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.sc-admiralty-select{border-color:#e20d0d}select.sc-admiralty-select:focus-visible{outline:3px solid #ffdd00;box-shadow:inset 0 0 0 2px #333333}select.disabled.sc-admiralty-select{border-color:#adadad}";
+const selectCss = ".disabled.sc-admiralty-select{color:#adadad}.select-wrapper.sc-admiralty-select{position:relative}admiralty-icon.sc-admiralty-select{font-size:24px;font-weight:normal;pointer-events:none;position:absolute;right:12px;top:12px}select.sc-admiralty-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.invalid.sc-admiralty-select{border-color:#e20d0d}select.sc-admiralty-select:focus-visible{outline:3px solid #ffdd00;box-shadow:inset 0 0 0 2px #333333}select.disabled.sc-admiralty-select{border-color:#adadad}";
 
 const SelectComponent = class {
   constructor(hostRef) {
@@ -9,8 +9,8 @@ const SelectComponent = class {
     this.admiraltyBlur = createEvent(this, "admiraltyBlur", 7);
     this.id = `admiralty-select-${++nextId}`;
     this.disabled = false;
-    this.error = false;
-    this.errorHint = null;
+    this.invalid = false;
+    this.invalidMessage = null;
     this.hint = null;
     this.label = 'Choose a colour';
     this.width = undefined;
@@ -46,9 +46,9 @@ const SelectComponent = class {
     this.selectOption();
   }
   render() {
-    const { disabled, error, errorHint, hint, id, label } = this;
+    const { disabled, hint, id, label } = this;
     const disabledClass = disabled ? 'disabled' : '';
-    return (h(Host, null, h("div", { class: `admiralty-select ${disabledClass}` }, h("admiralty-label", { disabled: this.disabled, for: id }, label), hint ? h("admiralty-hint", { disabled: this.disabled }, hint) : null, h("div", { class: "select-wrapper", style: this.width ? { maxWidth: `${this.width}px` } : {} }, h("select", { ref: select => (this.nativeInput = 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 }, h("slot", null)), h("admiralty-icon", { class: `select-down-icon ${disabledClass}`, "icon-name": "angle-down" })), this.error ? h("admiralty-input-error", null, errorHint) : '')));
+    return (h(Host, null, h("div", { class: `admiralty-select ${disabledClass}` }, h("admiralty-label", { disabled: this.disabled, for: id }, label), hint ? h("admiralty-hint", { disabled: this.disabled }, hint) : null, h("div", { class: "select-wrapper", style: this.width ? { maxWidth: `${this.width}px` } : {} }, h("select", { ref: select => (this.nativeInput = select), id: id, class: { 'admiralty-form-control': true, 'invalid': this.invalid, 'disabled': disabled }, "aria-disabled": disabled ? 'true' : 'false', "aria-label": label, onChange: event => this.handleSelect(event), onBlur: event => this.handleBlur(event), disabled: disabled }, h("slot", null)), h("admiralty-icon", { class: `select-down-icon ${disabledClass}`, "icon-name": "angle-down" })), h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/admiralty-select.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-select.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,wtBAAwtB;;MCQ7tB,eAAe;;;;;IAG1B,OAAE,GAAW,oBAAoB,EAAE,MAAM,EAAE,CAAC;oBAIhB,KAAK;iBAIR,KAAK;qBAIF,IAAI;gBAIT,IAAI;iBAIH,iBAAiB;;iBAiBiB,EAAE;;EAGlD,YAAY;IACpB,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC;IACtC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,YAAY,IAAI,YAAY,CAAC,KAAK,KAAK,KAAK,EAAE;MAChD,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC;KAC5B;IACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACpG;EAEO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,YAAY,CAAC,KAAY;IACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAkC,CAAC;IACxD,IAAI,MAAM,EAAE;MACV,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;KACjC;GACF;EAED,UAAU,CAAC,MAAkB;IAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;GAC3B;EAED,YAAY;IACV,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACnD,OAAO,CAAC,OAAO,CAAC,MAAM;MACpB,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,EAAE,CAAC;KACpD,CAAC,CAAC;GACJ;EAED,mBAAmB;IACjB,IAAI,CAAC,YAAY,EAAE,CAAC;GACrB;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAC7D,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC;IACjD,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,oBAAoB,aAAa,EAAE,IAC7C,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAE,IAC9C,KAAK,CACU,EACjB,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAkB,GAAG,IAAI,EAC/E,WAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,GAAG,EAAE,IAClF,cACE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,EAC1C,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,mBAChE,QAAQ,GAAG,MAAM,GAAG,OAAO,gBAC9B,KAAK,EACjB,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACvC,QAAQ,EAAE,QAAQ,IAElB,eAAa,CACN,EACT,sBAAgB,KAAK,EAAE,oBAAoB,aAAa,EAAE,eAAY,YAAY,GAAkB,CAChG,EACL,IAAI,CAAC,KAAK,GAAG,iCAAwB,SAAS,CAAyB,GAAG,EAAE,CACzE,CACD,EACP;GACH;;;;;;AAGH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/select/select.scss?tag=admiralty-select&encapsulation=scoped","./src/components/select/select.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/vars/typography\";\n\n.disabled {\n  color: colours.$colour-textinput-text-disabled;\n}\n\n.select-wrapper {\n  position: relative;\n}\n\nadmiralty-icon {\n  font-size: 24px;\n  font-weight: typography.$font-weight-medium;\n  pointer-events: none;\n  position: absolute;\n  right: 12px;\n  top: 12px;\n}\n\n\nselect {\n  appearance: none;\n  background-color: colours.$colour-white;\n  border: 2px solid colours.$colour-text;\n  box-sizing: border-box;\n  color: colours.$colour-text;\n  font-family: typography.$font-family;\n  font-size: typography.$font-size-normal;\n  line-height: 24px;\n  margin-bottom: 6px;\n  position: relative;\n  font-weight: typography.$font-weight-light;\n  padding: 12px;\n  width: 100%;\n\n  &.error {\n    border-color: colours.$colour-utility-error;\n  }\n\n  &:focus-visible {\n    outline: 3px solid colours.$colour-utility-focus;\n    box-shadow: inset 0 0 0 2px colours.$colour-text;\n  }\n\n  &.disabled {\n    border-color: colours.$colour-textinput-text-disabled;\n  }\n}\n\n\n","import { Component, Event, Prop, Element, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { SelectChangeEventDetail } from './select.interface';\n\n@Component({\n  tag: 'admiralty-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class SelectComponent {\n  @Element() el?: HTMLElement;\n  private nativeInput?: HTMLSelectElement;\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<SelectChangeEventDetail>;\n  /**\n   * Emitted when the component loses focus.\n   */\n  @Event() admiraltyBlur: EventEmitter<void>;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeSelect = this.nativeInput;\n    const value = this.getValue();\n    if (nativeSelect && nativeSelect.value !== value) {\n      nativeSelect.value = value;\n    }\n    this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  handleSelect(event: Event) {\n    const select = event.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || '';\n    }\n  }\n\n  handleBlur(_event: FocusEvent): void {\n    this.admiraltyBlur.emit();\n  }\n\n  selectOption() {\n    const options = this.el.querySelectorAll('option');\n    options.forEach(option => {\n      option.selected = option.value === this.getValue();\n    });\n  }\n\n  componentWillRender() {\n    this.selectOption();\n  }\n\n  render() {\n    const { disabled, error, errorHint, hint, id, label } = this;\n    const disabledClass = disabled ? 'disabled' : '';\n    return (\n      <Host>\n        <div class={`admiralty-select ${disabledClass}`}>\n          <admiralty-label disabled={this.disabled} for={id}>\n            {label}\n          </admiralty-label>\n          {hint ? <admiralty-hint disabled={this.disabled}>{hint}</admiralty-hint> : null}\n          <div class=\"select-wrapper\" style={this.width ? { maxWidth: `${this.width}px` } : {}}>\n            <select\n              ref={select => (this.nativeInput = 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              <slot></slot>\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"],"version":3}
+{"file":"admiralty-select.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,0tBAA0tB;;MCQ/tB,eAAe;;;;;IAG1B,OAAE,GAAW,oBAAoB,EAAE,MAAM,EAAE,CAAC;oBAIhB,KAAK;mBAIN,KAAK;0BAIC,IAAI;gBAId,IAAI;iBAIH,iBAAiB;;iBAiBiB,EAAE;;EAGlD,YAAY;IACpB,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC;IACtC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,YAAY,IAAI,YAAY,CAAC,KAAK,KAAK,KAAK,EAAE;MAChD,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC;KAC5B;IACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACpG;EAEO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,YAAY,CAAC,KAAY;IACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAkC,CAAC;IACxD,IAAI,MAAM,EAAE;MACV,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;KACjC;GACF;EAED,UAAU,CAAC,MAAkB;IAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;GAC3B;EAED,YAAY;IACV,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACnD,OAAO,CAAC,OAAO,CAAC,MAAM;MACpB,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,EAAE,CAAC;KACpD,CAAC,CAAC;GACJ;EAED,mBAAmB;IACjB,IAAI,CAAC,YAAY,EAAE,CAAC;GACrB;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAC3C,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC;IACjD,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,oBAAoB,aAAa,EAAE,IAC7C,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAE,IAC9C,KAAK,CACU,EACjB,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAkB,GAAG,IAAI,EAC/E,WAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,GAAG,EAAE,IAClF,cACE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,EAC1C,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,mBACzE,QAAQ,GAAG,MAAM,GAAG,OAAO,gBAC9B,KAAK,EACjB,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACvC,QAAQ,EAAE,QAAQ,IAElB,eAAa,CACN,EACT,sBAAgB,KAAK,EAAE,oBAAoB,aAAa,EAAE,eAAY,YAAY,GAAkB,CAChG,EACN,+BAAyB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAA2B,CACvJ,CACD,EACP;GACH;;;;;;AAGH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/select/select.scss?tag=admiralty-select&encapsulation=scoped","./src/components/select/select.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.disabled {\n  color: colours.$colour-textinput-text-disabled;\n}\n\n.select-wrapper {\n  position: relative;\n}\n\nadmiralty-icon {\n  font-size: 24px;\n  font-weight: typography.$font-weight-medium;\n  pointer-events: none;\n  position: absolute;\n  right: 12px;\n  top: 12px;\n}\n\nselect {\n  appearance: none;\n  background-color: colours.$colour-white;\n  border: 2px solid colours.$colour-text;\n  box-sizing: border-box;\n  color: colours.$colour-text;\n  font-family: typography.$font-family;\n  font-size: typography.$font-size-normal;\n  line-height: 24px;\n  margin-bottom: 6px;\n  position: relative;\n  font-weight: typography.$font-weight-light;\n  padding: 12px;\n  width: 100%;\n\n  &.invalid {\n    border-color: colours.$colour-utility-error;\n  }\n\n  &:focus-visible {\n    outline: 3px solid colours.$colour-utility-focus;\n    box-shadow: inset 0 0 0 2px colours.$colour-text;\n  }\n\n  &.disabled {\n    border-color: colours.$colour-textinput-text-disabled;\n  }\n}\n","import { Component, Event, Prop, Element, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { SelectChangeEventDetail } from './select.interface';\n\n@Component({\n  tag: 'admiralty-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class SelectComponent {\n  @Element() el?: HTMLElement;\n  private nativeInput?: HTMLSelectElement;\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   * Whether to show that the select is in an invalid state.\n   */\n  @Prop() invalid: boolean = false;\n  /**\n   * The message to show when the select is invalid.\n   */\n  @Prop() invalidMessage: 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<SelectChangeEventDetail>;\n  /**\n   * Emitted when the component loses focus.\n   */\n  @Event() admiraltyBlur: EventEmitter<void>;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeSelect = this.nativeInput;\n    const value = this.getValue();\n    if (nativeSelect && nativeSelect.value !== value) {\n      nativeSelect.value = value;\n    }\n    this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  handleSelect(event: Event) {\n    const select = event.target as HTMLSelectElement | null;\n    if (select) {\n      this.value = select.value || '';\n    }\n  }\n\n  handleBlur(_event: FocusEvent): void {\n    this.admiraltyBlur.emit();\n  }\n\n  selectOption() {\n    const options = this.el.querySelectorAll('option');\n    options.forEach(option => {\n      option.selected = option.value === this.getValue();\n    });\n  }\n\n  componentWillRender() {\n    this.selectOption();\n  }\n\n  render() {\n    const { disabled, hint, id, label } = this;\n    const disabledClass = disabled ? 'disabled' : '';\n    return (\n      <Host>\n        <div class={`admiralty-select ${disabledClass}`}>\n          <admiralty-label disabled={this.disabled} for={id}>\n            {label}\n          </admiralty-label>\n          {hint ? <admiralty-hint disabled={this.disabled}>{hint}</admiralty-hint> : null}\n          <div class=\"select-wrapper\" style={this.width ? { maxWidth: `${this.width}px` } : {}}>\n            <select\n              ref={select => (this.nativeInput = select)}\n              id={id}\n              class={{ 'admiralty-form-control': true, 'invalid': this.invalid, '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              <slot></slot>\n            </select>\n            <admiralty-icon class={`select-down-icon ${disabledClass}`} icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"version":3}

package/dist/esm/admiralty-textarea.entry.js

@@ -43,7 +43,7 @@ const TextareaComponent = class {
   }
   render() {
     const value = this.getValue();
-    return (h(Host, null, h("div", { class: "text-area-container" }, this.label ? (h("admiralty-label", { for: this.inputId, disabled: this.disabled }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, h("textarea", { ref: textArea => (this.nativeTextArea = textArea), class: { disabled: this.disabled, invalid: this.invalid }, style: this.width ? { maxWidth: `${this.width}px` } : {}, id: this.inputId, value: value, maxLength: this.maxLength, onInput: this.onInput, onBlur: this.onBlur }), this.invalid && this.invalidMessage ? h("admiralty-input-error", null, this.invalidMessage) : null)));
+    return (h(Host, null, h("div", { class: "text-area-container" }, this.label ? (h("admiralty-label", { for: this.inputId, disabled: this.disabled }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, h("textarea", { ref: textArea => (this.nativeTextArea = textArea), class: { disabled: this.disabled, invalid: this.invalid }, style: this.width ? { maxWidth: `${this.width}px` } : {}, id: this.inputId, value: value, maxLength: this.maxLength, onInput: this.onInput, onBlur: this.onBlur }), h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage))));
   }
   static get watchers() { return {
     "value": ["valueChanged"]

package/dist/esm/admiralty-textarea.entry.js.map

@@ -1 +1 @@
-{"file":"admiralty-textarea.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,2/IAA2/I;;ACG/gJ,IAAI,WAAW,GAAG,CAAC,CAAC;MAOP,iBAAiB;;;;;IACpB,YAAO,GAAG,sBAAsB,WAAW,EAAE,EAAE,CAAC;IAqEhD,WAAM,GAAG;MACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;iBAvEsB,EAAE;;;;oBAoBE,KAAK;mBAKN,KAAK;;iBAsB0B,EAAE;;;;;EAMlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;IACxC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACnG;EAaO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,KAAK,IACT,uBAAiB,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzF,gBACE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,EACjD,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,GAAG,EAAE,EACxD,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACT,EACX,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,iCAAwB,IAAI,CAAC,cAAc,CAAyB,GAAG,IAAI,CAC9G,CACD,EACP;GACH;;;;;;;;;","names":[],"sources":["./src/components/textarea/textarea.scss?tag=admiralty-textarea&encapsulation=scoped","./src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/base/responsive\";\n@use \"../../scss/base/typography\";\n@use \"../../scss/vars/typography\" as typography-vars;\n\n\n.text-area-container {\n  textarea {\n    display: block;\n    position: relative;\n    width: 100%;\n    min-height: 170px;\n    border: 2px solid colours.$colour-text;\n    color: colours.$colour-text;\n    padding: 12px 18px;\n    outline: none;\n    resize: vertical;\n    overflow: auto;\n    box-sizing: border-box;\n    vertical-align: top;\n\n    background-color: colours.$colour-white;\n\n    &:focus-visible {\n      outline: 3px solid colours.$colour-utility-focus;\n      box-shadow: colours.$colour-text inset 0 0 0 2px;\n    }\n\n    &.invalid {\n      border-color: colours.$colour-utility-error;\n\n      &:focus-visible {\n        border-color: unset;\n        outline: 3px solid colours.$colour-utility-focus;\n      }\n    }\n\n    &.disabled {\n      color: colours.$colour-textinput-text-disabled;\n      border-color: colours.$colour-textinput-border-disabled;\n      background: colours.$colour-white;\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { TextAreaChangeEventDetail } from './textarea.interface';\n\nlet textareaIds = 0;\n\n@Component({\n  tag: 'admiralty-textarea',\n  styleUrl: 'textarea.scss',\n  scoped: true,\n})\nexport class TextareaComponent {\n  private inputId = `admiralty-textarea-${textareaIds++}`;\n\n  private nativeTextArea?: HTMLTextAreaElement;\n\n  /**\n   * The label which will be used as a placeholder in the unfilled state, and as a field label in the filled state.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width?: number;\n\n  /**\n   * The maximum string length for the input field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  /**\n   * Event is fired when the form control loses focus\n   * @event textareaBlur\n   */\n  @Event({ eventName: 'textareaBlur' }) textareaBlur: EventEmitter<any>;\n\n  /**\n   * Event is fired when the form control changes\n   * @event admiraltyChange\n   */\n  @Event() admiraltyInput: EventEmitter<TextAreaChangeEventDetail>;\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Update the native textarea element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeTextArea;\n    const value = this.getValue();\n    if (nativeInput && nativeInput.value !== value) {\n      nativeInput.value = value;\n    }\n    this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private onBlur = () => {\n    this.textareaBlur.emit();\n  };\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n  };\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  render() {\n    const value = this.getValue();\n    return (\n      <Host>\n        <div class=\"text-area-container\">\n          {this.label ? (\n            <admiralty-label for={this.inputId} disabled={this.disabled}>\n              {this.label}\n            </admiralty-label>\n          ) : null}\n          {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n          <textarea\n            ref={textArea => (this.nativeTextArea = textArea)}\n            class={{ disabled: this.disabled, invalid: this.invalid }}\n            style={this.width ? { maxWidth: `${this.width}px` } : {}}\n            id={this.inputId}\n            value={value}\n            maxLength={this.maxLength}\n            onInput={this.onInput}\n            onBlur={this.onBlur}\n          ></textarea>\n          {this.invalid && this.invalidMessage ? <admiralty-input-error>{this.invalidMessage}</admiralty-input-error> : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-textarea.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,2/IAA2/I;;ACG/gJ,IAAI,WAAW,GAAG,CAAC,CAAC;MAOP,iBAAiB;;;;;IACpB,YAAO,GAAG,sBAAsB,WAAW,EAAE,EAAE,CAAC;IAqEhD,WAAM,GAAG;MACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;iBAvEsB,EAAE;;;;oBAoBE,KAAK;mBAKN,KAAK;;iBAsB0B,EAAE;;;;;EAMlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;IACxC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACnG;EAaO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,KAAK,IACT,uBAAiB,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzF,gBACE,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,EACjD,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,GAAG,EAAE,EACxD,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACT,EACZ,+BAAyB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAA2B,CACvJ,CACD,EACP;GACH;;;;;;;;;","names":[],"sources":["./src/components/textarea/textarea.scss?tag=admiralty-textarea&encapsulation=scoped","./src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/base/responsive\";\n@use \"../../scss/base/typography\";\n@use \"../../scss/vars/typography\" as typography-vars;\n\n\n.text-area-container {\n  textarea {\n    display: block;\n    position: relative;\n    width: 100%;\n    min-height: 170px;\n    border: 2px solid colours.$colour-text;\n    color: colours.$colour-text;\n    padding: 12px 18px;\n    outline: none;\n    resize: vertical;\n    overflow: auto;\n    box-sizing: border-box;\n    vertical-align: top;\n\n    background-color: colours.$colour-white;\n\n    &:focus-visible {\n      outline: 3px solid colours.$colour-utility-focus;\n      box-shadow: colours.$colour-text inset 0 0 0 2px;\n    }\n\n    &.invalid {\n      border-color: colours.$colour-utility-error;\n\n      &:focus-visible {\n        border-color: unset;\n        outline: 3px solid colours.$colour-utility-focus;\n      }\n    }\n\n    &.disabled {\n      color: colours.$colour-textinput-text-disabled;\n      border-color: colours.$colour-textinput-border-disabled;\n      background: colours.$colour-white;\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { TextAreaChangeEventDetail } from './textarea.interface';\n\nlet textareaIds = 0;\n\n@Component({\n  tag: 'admiralty-textarea',\n  styleUrl: 'textarea.scss',\n  scoped: true,\n})\nexport class TextareaComponent {\n  private inputId = `admiralty-textarea-${textareaIds++}`;\n\n  private nativeTextArea?: HTMLTextAreaElement;\n\n  /**\n   * The label which will be used as a placeholder in the unfilled state, and as a field label in the filled state.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width?: number;\n\n  /**\n   * The maximum string length for the input field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  /**\n   * Event is fired when the form control loses focus\n   * @event textareaBlur\n   */\n  @Event({ eventName: 'textareaBlur' }) textareaBlur: EventEmitter<any>;\n\n  /**\n   * Event is fired when the form control changes\n   * @event admiraltyChange\n   */\n  @Event() admiraltyInput: EventEmitter<TextAreaChangeEventDetail>;\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Update the native textarea element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeTextArea;\n    const value = this.getValue();\n    if (nativeInput && nativeInput.value !== value) {\n      nativeInput.value = value;\n    }\n    this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private onBlur = () => {\n    this.textareaBlur.emit();\n  };\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n  };\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  render() {\n    const value = this.getValue();\n    return (\n      <Host>\n        <div class=\"text-area-container\">\n          {this.label ? (\n            <admiralty-label for={this.inputId} disabled={this.disabled}>\n              {this.label}\n            </admiralty-label>\n          ) : null}\n          {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n          <textarea\n            ref={textArea => (this.nativeTextArea = textArea)}\n            class={{ disabled: this.disabled, invalid: this.invalid }}\n            style={this.width ? { maxWidth: `${this.width}px` } : {}}\n            id={this.inputId}\n            value={value}\n            maxLength={this.maxLength}\n            onInput={this.onInput}\n            onBlur={this.onBlur}\n          ></textarea>\n          <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/admiralty.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["admiralty-type-ahead",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"hint":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select",[[6,"admiralty-select",{"disabled":[4],"error":[4],"errorHint":[1,"error-hint"],"hint":[1],"label":[1],"width":[2],"value":[1032]}]]],["admiralty-textarea",[[2,"admiralty-textarea",{"label":[1],"hint":[1],"width":[2],"maxLength":[2,"max-length"],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"value":[1032]}]]],["admiralty-colour-block",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-radio-group",[[6,"admiralty-radio-group",{"name":[1],"value":[1032],"displayVertical":[4,"display-vertical"],"invalid":[4],"invalidMessage":[1,"invalid-message"]}]]],["admiralty-breadcrumb",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-read-more",[[6,"admiralty-read-more",{"heading":[1],"expanded":[32]}]]],["admiralty-breadcrumbs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"]}]]],["admiralty-header-sub-menu-item",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr",[[2,"admiralty-hr"]]],["admiralty-link",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"invalid":[4],"buttonTabindex":[32],"setButtonTabindex":[64]}]]],["admiralty-side-nav",[[6,"admiralty-side-nav",{"label":[1]}]]],["admiralty-side-nav-item",[[2,"admiralty-side-nav-item",{"sideNavItemId":[1,"side-nav-item-id"],"headingTitle":[1,"heading-title"],"navActive":[4,"nav-active"]}]]],["admiralty-side-nav-wrapper",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["admiralty-tab",[[6,"admiralty-tab",{"label":[1],"tabLabelId":[1,"tab-label-id"],"tabContentId":[1,"tab-content-id"]}]]],["admiralty-tab-group",[[6,"admiralty-tab-group",{"selectedIndex":[1026,"selected-index"]}]]],["admiralty-table",[[6,"admiralty-table",{"caption":[1]}]]],["admiralty-table-body",[[6,"admiralty-table-body"]]],["admiralty-table-cell",[[6,"admiralty-table-cell"]]],["admiralty-table-header",[[6,"admiralty-table-header"]]],["admiralty-table-header-cell",[[6,"admiralty-table-header-cell"]]],["admiralty-table-row",[[6,"admiralty-table-row"]]],["admiralty-type-ahead-item",[[2,"admiralty-type-ahead-item",{"value":[1]}]]],["admiralty-icon",[[1,"admiralty-icon",{"iconName":[1,"icon-name"],"iconPrefix":[1,"icon-prefix"]}]]],["admiralty-input",[[2,"admiralty-input",{"name":[1],"label":[1],"hint":[1],"disabled":[4],"type":[1],"placeholder":[1],"width":[2],"maxLength":[2,"max-length"],"required":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"autocomplete":[1],"value":[1032]}]]],["admiralty-expansion",[[6,"admiralty-expansion",{"heading":[1],"expanded":[1540],"alignHeadingRight":[4,"align-heading-right"],"hideBorder":[4,"hide-border"]}]]],["admiralty-button",[[6,"admiralty-button",{"variant":[1],"icon":[1],"disabled":[516],"type":[1]}]]],["admiralty-hint_3",[[6,"admiralty-hint",{"disabled":[4]}],[6,"admiralty-input-error"],[6,"admiralty-label",{"disabled":[4],"for":[1]}]]]], options);
+  return bootstrapLazy([["admiralty-type-ahead",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"hint":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select",[[6,"admiralty-select",{"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"hint":[1],"label":[1],"width":[2],"value":[1032]}]]],["admiralty-textarea",[[2,"admiralty-textarea",{"label":[1],"hint":[1],"width":[2],"maxLength":[2,"max-length"],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"value":[1032]}]]],["admiralty-colour-block",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-radio-group",[[6,"admiralty-radio-group",{"name":[1],"value":[1032],"displayVertical":[4,"display-vertical"],"invalid":[4],"invalidMessage":[1,"invalid-message"]}]]],["admiralty-breadcrumb",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-read-more",[[6,"admiralty-read-more",{"heading":[1],"expanded":[32]}]]],["admiralty-breadcrumbs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"]}]]],["admiralty-header-sub-menu-item",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr",[[2,"admiralty-hr"]]],["admiralty-link",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"invalid":[4],"buttonTabindex":[32],"setButtonTabindex":[64]}]]],["admiralty-side-nav",[[6,"admiralty-side-nav",{"label":[1]}]]],["admiralty-side-nav-item",[[2,"admiralty-side-nav-item",{"sideNavItemId":[1,"side-nav-item-id"],"headingTitle":[1,"heading-title"],"navActive":[4,"nav-active"]}]]],["admiralty-side-nav-wrapper",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["admiralty-tab",[[6,"admiralty-tab",{"label":[1],"tabLabelId":[1,"tab-label-id"],"tabContentId":[1,"tab-content-id"]}]]],["admiralty-tab-group",[[6,"admiralty-tab-group",{"selectedIndex":[1026,"selected-index"]}]]],["admiralty-table",[[6,"admiralty-table",{"caption":[1]}]]],["admiralty-table-body",[[6,"admiralty-table-body"]]],["admiralty-table-cell",[[6,"admiralty-table-cell"]]],["admiralty-table-header",[[6,"admiralty-table-header"]]],["admiralty-table-header-cell",[[6,"admiralty-table-header-cell"]]],["admiralty-table-row",[[6,"admiralty-table-row"]]],["admiralty-type-ahead-item",[[2,"admiralty-type-ahead-item",{"value":[1]}]]],["admiralty-icon",[[1,"admiralty-icon",{"iconName":[1,"icon-name"],"iconPrefix":[1,"icon-prefix"]}]]],["admiralty-input",[[2,"admiralty-input",{"name":[1],"label":[1],"hint":[1],"disabled":[4],"type":[1],"placeholder":[1],"width":[2],"maxLength":[2,"max-length"],"required":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"autocomplete":[1],"value":[1032]}]]],["admiralty-expansion",[[6,"admiralty-expansion",{"heading":[1],"expanded":[1540],"alignHeadingRight":[4,"align-heading-right"],"hideBorder":[4,"hide-border"]}]]],["admiralty-button",[[6,"admiralty-button",{"variant":[1],"icon":[1],"disabled":[516],"type":[1]}]]],["admiralty-hint_3",[[6,"admiralty-hint",{"disabled":[4]}],[6,"admiralty-input-invalid"],[6,"admiralty-label",{"disabled":[4],"for":[1]}]]]], options);
 });
 
 //# sourceMappingURL=admiralty.js.map

package/dist/esm/loader.js

@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["admiralty-type-ahead",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"hint":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select",[[6,"admiralty-select",{"disabled":[4],"error":[4],"errorHint":[1,"error-hint"],"hint":[1],"label":[1],"width":[2],"value":[1032]}]]],["admiralty-textarea",[[2,"admiralty-textarea",{"label":[1],"hint":[1],"width":[2],"maxLength":[2,"max-length"],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"value":[1032]}]]],["admiralty-colour-block",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-radio-group",[[6,"admiralty-radio-group",{"name":[1],"value":[1032],"displayVertical":[4,"display-vertical"],"invalid":[4],"invalidMessage":[1,"invalid-message"]}]]],["admiralty-breadcrumb",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-read-more",[[6,"admiralty-read-more",{"heading":[1],"expanded":[32]}]]],["admiralty-breadcrumbs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"]}]]],["admiralty-header-sub-menu-item",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr",[[2,"admiralty-hr"]]],["admiralty-link",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"invalid":[4],"buttonTabindex":[32],"setButtonTabindex":[64]}]]],["admiralty-side-nav",[[6,"admiralty-side-nav",{"label":[1]}]]],["admiralty-side-nav-item",[[2,"admiralty-side-nav-item",{"sideNavItemId":[1,"side-nav-item-id"],"headingTitle":[1,"heading-title"],"navActive":[4,"nav-active"]}]]],["admiralty-side-nav-wrapper",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["admiralty-tab",[[6,"admiralty-tab",{"label":[1],"tabLabelId":[1,"tab-label-id"],"tabContentId":[1,"tab-content-id"]}]]],["admiralty-tab-group",[[6,"admiralty-tab-group",{"selectedIndex":[1026,"selected-index"]}]]],["admiralty-table",[[6,"admiralty-table",{"caption":[1]}]]],["admiralty-table-body",[[6,"admiralty-table-body"]]],["admiralty-table-cell",[[6,"admiralty-table-cell"]]],["admiralty-table-header",[[6,"admiralty-table-header"]]],["admiralty-table-header-cell",[[6,"admiralty-table-header-cell"]]],["admiralty-table-row",[[6,"admiralty-table-row"]]],["admiralty-type-ahead-item",[[2,"admiralty-type-ahead-item",{"value":[1]}]]],["admiralty-icon",[[1,"admiralty-icon",{"iconName":[1,"icon-name"],"iconPrefix":[1,"icon-prefix"]}]]],["admiralty-input",[[2,"admiralty-input",{"name":[1],"label":[1],"hint":[1],"disabled":[4],"type":[1],"placeholder":[1],"width":[2],"maxLength":[2,"max-length"],"required":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"autocomplete":[1],"value":[1032]}]]],["admiralty-expansion",[[6,"admiralty-expansion",{"heading":[1],"expanded":[1540],"alignHeadingRight":[4,"align-heading-right"],"hideBorder":[4,"hide-border"]}]]],["admiralty-button",[[6,"admiralty-button",{"variant":[1],"icon":[1],"disabled":[516],"type":[1]}]]],["admiralty-hint_3",[[6,"admiralty-hint",{"disabled":[4]}],[6,"admiralty-input-error"],[6,"admiralty-label",{"disabled":[4],"for":[1]}]]]], options);
+  return bootstrapLazy([["admiralty-type-ahead",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"hint":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select",[[6,"admiralty-select",{"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"hint":[1],"label":[1],"width":[2],"value":[1032]}]]],["admiralty-textarea",[[2,"admiralty-textarea",{"label":[1],"hint":[1],"width":[2],"maxLength":[2,"max-length"],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"value":[1032]}]]],["admiralty-colour-block",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-radio-group",[[6,"admiralty-radio-group",{"name":[1],"value":[1032],"displayVertical":[4,"display-vertical"],"invalid":[4],"invalidMessage":[1,"invalid-message"]}]]],["admiralty-breadcrumb",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-read-more",[[6,"admiralty-read-more",{"heading":[1],"expanded":[32]}]]],["admiralty-breadcrumbs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"]}]]],["admiralty-header-sub-menu-item",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr",[[2,"admiralty-hr"]]],["admiralty-link",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"invalid":[4],"buttonTabindex":[32],"setButtonTabindex":[64]}]]],["admiralty-side-nav",[[6,"admiralty-side-nav",{"label":[1]}]]],["admiralty-side-nav-item",[[2,"admiralty-side-nav-item",{"sideNavItemId":[1,"side-nav-item-id"],"headingTitle":[1,"heading-title"],"navActive":[4,"nav-active"]}]]],["admiralty-side-nav-wrapper",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["admiralty-tab",[[6,"admiralty-tab",{"label":[1],"tabLabelId":[1,"tab-label-id"],"tabContentId":[1,"tab-content-id"]}]]],["admiralty-tab-group",[[6,"admiralty-tab-group",{"selectedIndex":[1026,"selected-index"]}]]],["admiralty-table",[[6,"admiralty-table",{"caption":[1]}]]],["admiralty-table-body",[[6,"admiralty-table-body"]]],["admiralty-table-cell",[[6,"admiralty-table-cell"]]],["admiralty-table-header",[[6,"admiralty-table-header"]]],["admiralty-table-header-cell",[[6,"admiralty-table-header-cell"]]],["admiralty-table-row",[[6,"admiralty-table-row"]]],["admiralty-type-ahead-item",[[2,"admiralty-type-ahead-item",{"value":[1]}]]],["admiralty-icon",[[1,"admiralty-icon",{"iconName":[1,"icon-name"],"iconPrefix":[1,"icon-prefix"]}]]],["admiralty-input",[[2,"admiralty-input",{"name":[1],"label":[1],"hint":[1],"disabled":[4],"type":[1],"placeholder":[1],"width":[2],"maxLength":[2,"max-length"],"required":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"autocomplete":[1],"value":[1032]}]]],["admiralty-expansion",[[6,"admiralty-expansion",{"heading":[1],"expanded":[1540],"alignHeadingRight":[4,"align-heading-right"],"hideBorder":[4,"hide-border"]}]]],["admiralty-button",[[6,"admiralty-button",{"variant":[1],"icon":[1],"disabled":[516],"type":[1]}]]],["admiralty-hint_3",[[6,"admiralty-hint",{"disabled":[4]}],[6,"admiralty-input-invalid"],[6,"admiralty-label",{"disabled":[4],"for":[1]}]]]], options);
   });
 };
 

package/dist/types/components/input-invalid/input-invalid.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @slot - The error content should be placed in the slot e.g.
+ * `<admiralty-input-invalid>This field is required</admiralty-input-invalid>`
+ */
+export declare class InputInvalidComponent {
+  render(): any;
+}

package/dist/types/components/select/select.d.ts

@@ -9,13 +9,13 @@ export declare class SelectComponent {
    */
   disabled: boolean;
   /**
-   * If 'true', the 'error' class is added to suggest an error
+   * Whether to show that the select is in an invalid state.
    */
-  error: boolean;
+  invalid: boolean;
   /**
-   * The hint that is used to inform the user of an error (displayed below the select box)
+   * The message to show when the select is invalid.
    */
-  errorHint: string;
+  invalidMessage: string;
   /**
    * The text that will be used as a field label.
    */