@ukho/admiralty-core 0.4.6 → 0.5.0

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

@@ -21,6 +21,7 @@ describe('admiralty-select', () => {
             </select>
             <admiralty-icon class="select-down-icon" icon-name="angle-down"></admiralty-icon>
           </div>
+          <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
         </div>
       </admiralty-select>
     `);
@@ -47,6 +48,7 @@ describe('admiralty-select', () => {
             </select>
             <admiralty-icon class="select-down-icon" icon-name="angle-down"></admiralty-icon>
           </div>
+          <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
         </div>
       </admiralty-select>
     `);
@@ -73,6 +75,7 @@ describe('admiralty-select', () => {
             </select>
             <admiralty-icon class="select-down-icon" icon-name="angle-down"></admiralty-icon>
           </div>
+          <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
         </div>
       </admiralty-select>
     `);
@@ -81,11 +84,11 @@ describe('admiralty-select', () => {
     const page = await newSpecPage({
       components: [SelectComponent],
       html: `
-      <admiralty-select error="true" error-hint="The colour must be green" hint="Select an option from the list" label="Choose a colour">
+      <admiralty-select hint="Select an option from the list" invalid="true" invalid-message="The colour must be green" label="Choose a colour">
       </admiralty-select>`,
     });
     expect(page.root).toMatchInlineSnapshot(`
-      <admiralty-select error="true" error-hint="The colour must be green" hint="Select an option from the list" label="Choose a colour">
+      <admiralty-select hint="Select an option from the list" invalid="true" invalid-message="The colour must be green" label="Choose a colour">
         <!---->
         <div class="admiralty-select">
           <admiralty-label for="admiralty-select-4">
@@ -95,13 +98,13 @@ describe('admiralty-select', () => {
             Select an option from the list
           </admiralty-hint>
           <div class="select-wrapper">
-            <select aria-disabled="false" aria-label="Choose a colour" class="admiralty-form-control error" id="admiralty-select-4">
+            <select aria-disabled="false" aria-label="Choose a colour" class="admiralty-form-control invalid" id="admiralty-select-4">
             </select>
             <admiralty-icon class="select-down-icon" icon-name="angle-down"></admiralty-icon>
           </div>
-          <admiralty-input-error>
+          <admiralty-input-invalid style="visibility: visible;">
             The colour must be green
-          </admiralty-input-error>
+          </admiralty-input-invalid>
         </div>
       </admiralty-select>
     `);
@@ -128,6 +131,7 @@ describe('admiralty-select', () => {
             </select>
             <admiralty-icon class="disabled select-down-icon" icon-name="angle-down"></admiralty-icon>
           </div>
+          <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
         </div>
       </admiralty-select>
     `);
@@ -154,6 +158,7 @@ describe('admiralty-select', () => {
             </select>
             <admiralty-icon class="select-down-icon" icon-name="angle-down"></admiralty-icon>
           </div>
+          <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
         </div>
       </admiralty-select>
     `);

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

@@ -1 +1 @@
-{"version":3,"file":"select.spec.js","sourceRoot":"","sources":["../../../src/components/select/select.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;EAChC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,4DAA4D;KACnE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;KAiBvC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;IACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE;;0BAEc;KACrB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;KAiBvC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;IACrC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE;;0BAEc;KACrB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;KAiBvC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;IACrC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE;;0BAEc;KACrB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;KAoBvC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;IACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE;;0BAEc;KACrB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;KAiBvC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE;IACnC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE;;0BAEc;KACrB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;KAiBvC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,oFAAoF;KAC3F,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,QAAQ,CAAC;IAC3B,MAAM,mBAAmB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAEtC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,mBAAmB,CAAC,CAAC;IAClE,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjD,MAAM,CAAC,KAAK,GAAG,SAAS,CAAC;IAEzB,MAAM,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,mBAAmB,CAAC,CAAC,UAAU,EAAE,CAAC;EAC3C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SelectComponent } from './select';\n\ndescribe('admiralty-select', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SelectComponent],\n      html: `<admiralty-select><option>Test</option></admiralty-select>`,\n    });\n\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-select>\n        <!---->\n        <div class=\"admiralty-select\">\n          <admiralty-label for=\"admiralty-select-1\">\n            Choose a colour\n          </admiralty-label>\n          <div class=\"select-wrapper\">\n            <select aria-disabled=\"false\" aria-label=\"Choose a colour\" class=\"admiralty-form-control\" id=\"admiralty-select-1\">\n              <option>\n                Test\n              </option>\n            </select>\n            <admiralty-icon class=\"select-down-icon\" icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n        </div>\n      </admiralty-select>\n    `);\n  });\n\n  it('renders with basic args', async () => {\n    const page = await newSpecPage({\n      components: [SelectComponent],\n      html: `\n      <admiralty-select hint=\"Select an option from the list\" label=\"Choose a colour\">\n      </admiralty-select>`,\n    });\n\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-select hint=\"Select an option from the list\" label=\"Choose a colour\">\n        <!---->\n        <div class=\"admiralty-select\">\n          <admiralty-label for=\"admiralty-select-2\">\n            Choose a colour\n          </admiralty-label>\n          <admiralty-hint>\n            Select an option from the list\n          </admiralty-hint>\n          <div class=\"select-wrapper\">\n            <select aria-disabled=\"false\" aria-label=\"Choose a colour\" class=\"admiralty-form-control\" id=\"admiralty-select-2\">\n            </select>\n            <admiralty-icon class=\"select-down-icon\" icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n        </div>\n      </admiralty-select>\n    `);\n  });\n\n  it('renders with no error', async () => {\n    const page = await newSpecPage({\n      components: [SelectComponent],\n      html: `\n      <admiralty-select error=\"false\" error-hint=\"The colour must be green\" hint=\"Select an option from the list\" label=\"Choose a colour\">\n      </admiralty-select>`,\n    });\n\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-select error=\"false\" error-hint=\"The colour must be green\" hint=\"Select an option from the list\" label=\"Choose a colour\">\n        <!---->\n        <div class=\"admiralty-select\">\n          <admiralty-label for=\"admiralty-select-3\">\n            Choose a colour\n          </admiralty-label>\n          <admiralty-hint>\n            Select an option from the list\n          </admiralty-hint>\n          <div class=\"select-wrapper\">\n            <select aria-disabled=\"false\" aria-label=\"Choose a colour\" class=\"admiralty-form-control\" id=\"admiralty-select-3\">\n            </select>\n            <admiralty-icon class=\"select-down-icon\" icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n        </div>\n      </admiralty-select>\n    `);\n  });\n\n  it('renders with an error', async () => {\n    const page = await newSpecPage({\n      components: [SelectComponent],\n      html: `\n      <admiralty-select error=\"true\" error-hint=\"The colour must be green\" hint=\"Select an option from the list\" label=\"Choose a colour\">\n      </admiralty-select>`,\n    });\n\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-select error=\"true\" error-hint=\"The colour must be green\" hint=\"Select an option from the list\" label=\"Choose a colour\">\n        <!---->\n        <div class=\"admiralty-select\">\n          <admiralty-label for=\"admiralty-select-4\">\n            Choose a colour\n          </admiralty-label>\n          <admiralty-hint>\n            Select an option from the list\n          </admiralty-hint>\n          <div class=\"select-wrapper\">\n            <select aria-disabled=\"false\" aria-label=\"Choose a colour\" class=\"admiralty-form-control error\" id=\"admiralty-select-4\">\n            </select>\n            <admiralty-icon class=\"select-down-icon\" icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          <admiralty-input-error>\n            The colour must be green\n          </admiralty-input-error>\n        </div>\n      </admiralty-select>\n    `);\n  });\n\n  it('renders in disabled state', async () => {\n    const page = await newSpecPage({\n      components: [SelectComponent],\n      html: `\n      <admiralty-select disabled=\"true\" error-hint=\"The colour must be green\" hint=\"Select an option from the list\" label=\"Choose a colour\">\n      </admiralty-select>`,\n    });\n\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-select disabled=\"true\" error-hint=\"The colour must be green\" hint=\"Select an option from the list\" label=\"Choose a colour\">\n        <!---->\n        <div class=\"admiralty-select disabled\">\n          <admiralty-label disabled=\"\" for=\"admiralty-select-5\">\n            Choose a colour\n          </admiralty-label>\n          <admiralty-hint disabled=\"\">\n            Select an option from the list\n          </admiralty-hint>\n          <div class=\"select-wrapper\">\n            <select aria-disabled=\"true\" aria-label=\"Choose a colour\" class=\"admiralty-form-control disabled\" disabled=\"\" id=\"admiralty-select-5\">\n            </select>\n            <admiralty-icon class=\"disabled select-down-icon\" icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n        </div>\n      </admiralty-select>\n    `);\n  });\n\n  it('renders fixed width', async () => {\n    const page = await newSpecPage({\n      components: [SelectComponent],\n      html: `\n      <admiralty-select hint=\"Select an option from the list\" label=\"Choose a colour\" width=\"150\">\n      </admiralty-select>`,\n    });\n\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-select hint=\"Select an option from the list\" label=\"Choose a colour\" width=\"150\">\n        <!---->\n        <div class=\"admiralty-select\">\n          <admiralty-label for=\"admiralty-select-6\">\n            Choose a colour\n          </admiralty-label>\n          <admiralty-hint>\n            Select an option from the list\n          </admiralty-hint>\n          <div class=\"select-wrapper\" style=\"max-width: 150px;\">\n            <select aria-disabled=\"false\" aria-label=\"Choose a colour\" class=\"admiralty-form-control\" id=\"admiralty-select-6\">\n            </select>\n            <admiralty-icon class=\"select-down-icon\" icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n        </div>\n      </admiralty-select>\n    `);\n  });\n\n  it('fires event on selection changed', async () => {\n    const page = await newSpecPage({\n      components: [SelectComponent],\n      html: `<admiralty-select><option>first</option><option>second</option></admiralty-select>`,\n    });\n\n    const testValue = 'second';\n    const selectedListenerSpy = jest.fn();\n\n    page.doc.addEventListener('admiraltyChange', selectedListenerSpy);\n    const select = page.root.querySelector('select');\n    select.value = testValue;\n\n    select.dispatchEvent(new Event('change'));\n    await page.waitForChanges();\n    expect(selectedListenerSpy).toBeCalled();\n  });\n});\n"]}
+{"version":3,"file":"select.spec.js","sourceRoot":"","sources":["../../../src/components/select/select.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SelectComponent } from './select';\n\ndescribe('admiralty-select', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SelectComponent],\n      html: `<admiralty-select><option>Test</option></admiralty-select>`,\n    });\n\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-select>\n        <!---->\n        <div class=\"admiralty-select\">\n          <admiralty-label for=\"admiralty-select-1\">\n            Choose a colour\n          </admiralty-label>\n          <div class=\"select-wrapper\">\n            <select aria-disabled=\"false\" aria-label=\"Choose a colour\" class=\"admiralty-form-control\" id=\"admiralty-select-1\">\n              <option>\n                Test\n              </option>\n            </select>\n            <admiralty-icon class=\"select-down-icon\" icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n        </div>\n      </admiralty-select>\n    `);\n  });\n\n  it('renders with basic args', async () => {\n    const page = await newSpecPage({\n      components: [SelectComponent],\n      html: `\n      <admiralty-select hint=\"Select an option from the list\" label=\"Choose a colour\">\n      </admiralty-select>`,\n    });\n\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-select hint=\"Select an option from the list\" label=\"Choose a colour\">\n        <!---->\n        <div class=\"admiralty-select\">\n          <admiralty-label for=\"admiralty-select-2\">\n            Choose a colour\n          </admiralty-label>\n          <admiralty-hint>\n            Select an option from the list\n          </admiralty-hint>\n          <div class=\"select-wrapper\">\n            <select aria-disabled=\"false\" aria-label=\"Choose a colour\" class=\"admiralty-form-control\" id=\"admiralty-select-2\">\n            </select>\n            <admiralty-icon class=\"select-down-icon\" icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n        </div>\n      </admiralty-select>\n    `);\n  });\n\n  it('renders with no error', async () => {\n    const page = await newSpecPage({\n      components: [SelectComponent],\n      html: `\n      <admiralty-select error=\"false\" error-hint=\"The colour must be green\" hint=\"Select an option from the list\" label=\"Choose a colour\">\n      </admiralty-select>`,\n    });\n\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-select error=\"false\" error-hint=\"The colour must be green\" hint=\"Select an option from the list\" label=\"Choose a colour\">\n        <!---->\n        <div class=\"admiralty-select\">\n          <admiralty-label for=\"admiralty-select-3\">\n            Choose a colour\n          </admiralty-label>\n          <admiralty-hint>\n            Select an option from the list\n          </admiralty-hint>\n          <div class=\"select-wrapper\">\n            <select aria-disabled=\"false\" aria-label=\"Choose a colour\" class=\"admiralty-form-control\" id=\"admiralty-select-3\">\n            </select>\n            <admiralty-icon class=\"select-down-icon\" icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n        </div>\n      </admiralty-select>\n    `);\n  });\n\n  it('renders with an error', async () => {\n    const page = await newSpecPage({\n      components: [SelectComponent],\n      html: `\n      <admiralty-select hint=\"Select an option from the list\" invalid=\"true\" invalid-message=\"The colour must be green\" label=\"Choose a colour\">\n      </admiralty-select>`,\n    });\n\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-select hint=\"Select an option from the list\" invalid=\"true\" invalid-message=\"The colour must be green\" label=\"Choose a colour\">\n        <!---->\n        <div class=\"admiralty-select\">\n          <admiralty-label for=\"admiralty-select-4\">\n            Choose a colour\n          </admiralty-label>\n          <admiralty-hint>\n            Select an option from the list\n          </admiralty-hint>\n          <div class=\"select-wrapper\">\n            <select aria-disabled=\"false\" aria-label=\"Choose a colour\" class=\"admiralty-form-control invalid\" id=\"admiralty-select-4\">\n            </select>\n            <admiralty-icon class=\"select-down-icon\" icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          <admiralty-input-invalid style=\"visibility: visible;\">\n            The colour must be green\n          </admiralty-input-invalid>\n        </div>\n      </admiralty-select>\n    `);\n  });\n\n  it('renders in disabled state', async () => {\n    const page = await newSpecPage({\n      components: [SelectComponent],\n      html: `\n      <admiralty-select disabled=\"true\" error-hint=\"The colour must be green\" hint=\"Select an option from the list\" label=\"Choose a colour\">\n      </admiralty-select>`,\n    });\n\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-select disabled=\"true\" error-hint=\"The colour must be green\" hint=\"Select an option from the list\" label=\"Choose a colour\">\n        <!---->\n        <div class=\"admiralty-select disabled\">\n          <admiralty-label disabled=\"\" for=\"admiralty-select-5\">\n            Choose a colour\n          </admiralty-label>\n          <admiralty-hint disabled=\"\">\n            Select an option from the list\n          </admiralty-hint>\n          <div class=\"select-wrapper\">\n            <select aria-disabled=\"true\" aria-label=\"Choose a colour\" class=\"admiralty-form-control disabled\" disabled=\"\" id=\"admiralty-select-5\">\n            </select>\n            <admiralty-icon class=\"disabled select-down-icon\" icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n        </div>\n      </admiralty-select>\n    `);\n  });\n\n  it('renders fixed width', async () => {\n    const page = await newSpecPage({\n      components: [SelectComponent],\n      html: `\n      <admiralty-select hint=\"Select an option from the list\" label=\"Choose a colour\" width=\"150\">\n      </admiralty-select>`,\n    });\n\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-select hint=\"Select an option from the list\" label=\"Choose a colour\" width=\"150\">\n        <!---->\n        <div class=\"admiralty-select\">\n          <admiralty-label for=\"admiralty-select-6\">\n            Choose a colour\n          </admiralty-label>\n          <admiralty-hint>\n            Select an option from the list\n          </admiralty-hint>\n          <div class=\"select-wrapper\" style=\"max-width: 150px;\">\n            <select aria-disabled=\"false\" aria-label=\"Choose a colour\" class=\"admiralty-form-control\" id=\"admiralty-select-6\">\n            </select>\n            <admiralty-icon class=\"select-down-icon\" icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n        </div>\n      </admiralty-select>\n    `);\n  });\n\n  it('fires event on selection changed', async () => {\n    const page = await newSpecPage({\n      components: [SelectComponent],\n      html: `<admiralty-select><option>first</option><option>second</option></admiralty-select>`,\n    });\n\n    const testValue = 'second';\n    const selectedListenerSpy = jest.fn();\n\n    page.doc.addEventListener('admiraltyChange', selectedListenerSpy);\n    const select = page.root.querySelector('select');\n    select.value = testValue;\n\n    select.dispatchEvent(new Event('change'));\n    await page.waitForChanges();\n    expect(selectedListenerSpy).toBeCalled();\n  });\n});\n"]}

package/dist/collection/components/textarea/textarea.js

@@ -37,7 +37,7 @@ export class TextareaComponent {
   }
   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 is() { return "admiralty-textarea"; }
   static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["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":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/textarea/textarea.spec.js

@@ -18,6 +18,7 @@ describe('admiralty-textarea', () => {
             Please enter description
           </admiralty-hint>
           <textarea id="admiralty-textarea-${compId}" value=""></textarea>
+          <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
         </div>
       </admiralty-textarea>
     `);
@@ -33,6 +34,7 @@ describe('admiralty-textarea', () => {
       <admiralty-textarea value="${testText}">
         <div class="text-area-container">
           <textarea id="admiralty-textarea-${compId}" value="${testText}"></textarea>
+          <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
         </div>
       </admiralty-textarea>
     `);
@@ -48,6 +50,7 @@ describe('admiralty-textarea', () => {
         <div class="text-area-container">
           <admiralty-label disabled="" for="admiralty-textarea-${compId}">Description</admiralty-label>
           <textarea class="disabled" id="admiralty-textarea-${compId}" value=""></textarea>
+          <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
         </div>
       </admiralty-textarea>
     `);
@@ -63,14 +66,14 @@ describe('admiralty-textarea', () => {
         <div class="text-area-container">
           <admiralty-label for="admiralty-textarea-${compId}">Description</admiralty-label>
           <textarea class="invalid" id="admiralty-textarea-${compId}" value=""></textarea>
-          <admiralty-input-error>
+          <admiralty-input-invalid style="visibility: visible;">
             BAD
-          </admiralty-input-error>
+          </admiralty-input-invalid>
         </div>
       </admiralty-textarea>
     `);
   });
-  it('should not show admiralty-input-error when invalid but no message provided', async () => {
+  it('should not show admiralty-input-invalid when invalid but no message provided', async () => {
     ++compId;
     const page = await newSpecPage({
       components: [TextareaComponent],
@@ -81,6 +84,7 @@ describe('admiralty-textarea', () => {
         <div class="text-area-container">
           <admiralty-label for="admiralty-textarea-${compId}">Description</admiralty-label>
           <textarea class="invalid" id="admiralty-textarea-${compId}" value=""></textarea>
+          <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
         </div>
       </admiralty-textarea>
     `);

package/dist/collection/components/textarea/textarea.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.spec.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE/C,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC;AAEhB,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAClC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,EAAE,MAAM,CAAC;IAET,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,+FAA+F;KACtG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;qDAGmB,MAAM;;;;;;6CAMd,MAAM;;;KAG9C,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,EAAE,MAAM,CAAC;IAET,MAAM,QAAQ,GAAG,WAAW,CAAC;IAE7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,8BAA8B,QAAQ,yBAAyB;KACtE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;mCACC,QAAQ;;6CAEE,MAAM,YAAY,QAAQ;;;KAGlE,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,EAAE,MAAM,CAAC;IAET,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,+EAA+E;KACtF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;iEAG+B,MAAM;8DACT,MAAM;;;KAG/D,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC3C,EAAE,MAAM,CAAC;IAET,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,oGAAoG;KAC3G,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;qDAGmB,MAAM;6DACE,MAAM;;;;;;KAM9D,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4EAA4E,EAAE,KAAK,IAAI,EAAE;IAC1F,EAAE,MAAM,CAAC;IAET,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,gGAAgG;KACvG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;qDAGmB,MAAM;6DACE,MAAM;;;KAG9D,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { TextareaComponent } from './textarea';\n\nlet compId = -1;\n\ndescribe('admiralty-textarea', () => {\n  it('renders', async () => {\n    ++compId;\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea label=\"Description\" hint=\"Please enter description\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea label=\"Description\" hint=\"Please enter description\">\n        <div class=\"text-area-container\">\n          <admiralty-label for=\"admiralty-textarea-${compId}\">\n            Description\n          </admiralty-label>\n          <admiralty-hint>\n            Please enter description\n          </admiralty-hint>\n          <textarea id=\"admiralty-textarea-${compId}\" value=\"\"></textarea>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n\n  it('should reflect textarea Text', async () => {\n    ++compId;\n\n    const testText = 'Test Text';\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea value=\"${testText}\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea value=\"${testText}\">\n        <div class=\"text-area-container\">\n          <textarea id=\"admiralty-textarea-${compId}\" value=\"${testText}\"></textarea>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n\n  it('should render disabled state', async () => {\n    ++compId;\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea label=\"Description\" disabled=\"true\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea label=\"Description\" disabled=\"true\">\n        <div class=\"text-area-container\">\n          <admiralty-label disabled=\"\" for=\"admiralty-textarea-${compId}\">Description</admiralty-label>\n          <textarea class=\"disabled\" id=\"admiralty-textarea-${compId}\" value=\"\"></textarea>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n\n  it('should render invalid state', async () => {\n    ++compId;\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea label=\"Description\" invalid=\"true\" invalid-message=\"BAD\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea label=\"Description\" invalid=\"true\" invalid-message=\"BAD\">\n        <div class=\"text-area-container\">\n          <admiralty-label for=\"admiralty-textarea-${compId}\">Description</admiralty-label>\n          <textarea class=\"invalid\" id=\"admiralty-textarea-${compId}\" value=\"\"></textarea>\n          <admiralty-input-error>\n            BAD\n          </admiralty-input-error>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n\n  it('should not show admiralty-input-error when invalid but no message provided', async () => {\n    ++compId;\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea label=\"Description\" invalid=\"true\" invalidMessage=\"\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea label=\"Description\" invalid=\"true\" invalidMessage=\"\">\n        <div class=\"text-area-container\">\n          <admiralty-label for=\"admiralty-textarea-${compId}\">Description</admiralty-label>\n          <textarea class=\"invalid\" id=\"admiralty-textarea-${compId}\" value=\"\"></textarea>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"textarea.spec.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE/C,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC;AAEhB,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAClC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,EAAE,MAAM,CAAC;IAET,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,+FAA+F;KACtG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;qDAGmB,MAAM;;;;;;6CAMd,MAAM;;;;KAI9C,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,EAAE,MAAM,CAAC;IAET,MAAM,QAAQ,GAAG,WAAW,CAAC;IAE7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,8BAA8B,QAAQ,yBAAyB;KACtE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;mCACC,QAAQ;;6CAEE,MAAM,YAAY,QAAQ;;;;KAIlE,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,EAAE,MAAM,CAAC;IAET,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,+EAA+E;KACtF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;iEAG+B,MAAM;8DACT,MAAM;;;;KAI/D,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC3C,EAAE,MAAM,CAAC;IAET,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,oGAAoG;KAC3G,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;qDAGmB,MAAM;6DACE,MAAM;;;;;;KAM9D,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8EAA8E,EAAE,KAAK,IAAI,EAAE;IAC5F,EAAE,MAAM,CAAC;IAET,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,gGAAgG;KACvG,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;qDAGmB,MAAM;6DACE,MAAM;;;;KAI9D,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { TextareaComponent } from './textarea';\n\nlet compId = -1;\n\ndescribe('admiralty-textarea', () => {\n  it('renders', async () => {\n    ++compId;\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea label=\"Description\" hint=\"Please enter description\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea label=\"Description\" hint=\"Please enter description\">\n        <div class=\"text-area-container\">\n          <admiralty-label for=\"admiralty-textarea-${compId}\">\n            Description\n          </admiralty-label>\n          <admiralty-hint>\n            Please enter description\n          </admiralty-hint>\n          <textarea id=\"admiralty-textarea-${compId}\" value=\"\"></textarea>\n          <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n\n  it('should reflect textarea Text', async () => {\n    ++compId;\n\n    const testText = 'Test Text';\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea value=\"${testText}\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea value=\"${testText}\">\n        <div class=\"text-area-container\">\n          <textarea id=\"admiralty-textarea-${compId}\" value=\"${testText}\"></textarea>\n          <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n\n  it('should render disabled state', async () => {\n    ++compId;\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea label=\"Description\" disabled=\"true\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea label=\"Description\" disabled=\"true\">\n        <div class=\"text-area-container\">\n          <admiralty-label disabled=\"\" for=\"admiralty-textarea-${compId}\">Description</admiralty-label>\n          <textarea class=\"disabled\" id=\"admiralty-textarea-${compId}\" value=\"\"></textarea>\n          <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n\n  it('should render invalid state', async () => {\n    ++compId;\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea label=\"Description\" invalid=\"true\" invalid-message=\"BAD\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea label=\"Description\" invalid=\"true\" invalid-message=\"BAD\">\n        <div class=\"text-area-container\">\n          <admiralty-label for=\"admiralty-textarea-${compId}\">Description</admiralty-label>\n          <textarea class=\"invalid\" id=\"admiralty-textarea-${compId}\" value=\"\"></textarea>\n          <admiralty-input-invalid style=\"visibility: visible;\">\n            BAD\n          </admiralty-input-invalid>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n\n  it('should not show admiralty-input-invalid when invalid but no message provided', async () => {\n    ++compId;\n\n    const page = await newSpecPage({\n      components: [TextareaComponent],\n      html: `<admiralty-textarea label=\"Description\" invalid=\"true\" invalidMessage=\"\"></admiralty-textarea>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <admiralty-textarea label=\"Description\" invalid=\"true\" invalidMessage=\"\">\n        <div class=\"text-area-container\">\n          <admiralty-label for=\"admiralty-textarea-${compId}\">Description</admiralty-label>\n          <textarea class=\"invalid\" id=\"admiralty-textarea-${compId}\" value=\"\"></textarea>\n          <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n        </div>\n      </admiralty-textarea>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AdmiraltyInputInvalid extends Components.AdmiraltyInputInvalid, HTMLElement {}
+export const AdmiraltyInputInvalid: {
+  prototype: AdmiraltyInputInvalid;
+  new (): AdmiraltyInputInvalid;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,8 @@
+import { I as InputInvalidComponent, d as defineCustomElement$1 } from './input-invalid.js';
+
+const AdmiraltyInputInvalid = InputInvalidComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyInputInvalid, defineCustomElement };
+
+//# sourceMappingURL=admiralty-input-invalid.js.map

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

@@ -0,0 +1 @@
+{"file":"admiralty-input-invalid.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 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';
 
 const radioGroupCss = ".radio-group.sc-admiralty-radio-group{display:flex;flex-direction:row}.radio-group.sc-admiralty-radio-group-s>*,.radio-group .sc-admiralty-radio-group-s>*{margin-right:2em !important}.stack.sc-admiralty-radio-group{flex-direction:column}.stack.sc-admiralty-radio-group-s>*,.stack .sc-admiralty-radio-group-s>*{margin-bottom:10px !important}";
 
@@ -65,7 +65,7 @@ const RadioGroupComponent = /*@__PURE__*/ proxyCustomElement(class RadioGroupCom
   }
   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 this; }
   static get watchers() { return {
@@ -85,7 +85,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["admiralty-radio-group", "admiralty-icon", "admiralty-input-error"];
+  const components = ["admiralty-radio-group", "admiralty-icon", "admiralty-input-invalid"];
   components.forEach(tagName => { switch (tagName) {
     case "admiralty-radio-group":
       if (!customElements.get(tagName)) {
@@ -97,7 +97,7 @@ function defineCustomElement$1() {
         defineCustomElement$3();
       }
       break;
-    case "admiralty-input-error":
+    case "admiralty-input-invalid":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

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

@@ -1 +1 @@
-{"file":"admiralty-radio-group.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.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/components/admiralty-select.js

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$5 } from './hint.js';
 import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './input-error.js';
+import { d as defineCustomElement$3 } from './input-invalid.js';
 import { d as defineCustomElement$2 } from './label.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 = /*@__PURE__*/ proxyCustomElement(class SelectComponent extends HTMLElement {
   constructor() {
@@ -14,8 +14,8 @@ const SelectComponent = /*@__PURE__*/ proxyCustomElement(class SelectComponent e
     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;
@@ -51,9 +51,9 @@ const SelectComponent = /*@__PURE__*/ proxyCustomElement(class SelectComponent e
     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 this; }
   static get watchers() { return {
@@ -62,8 +62,8 @@ const SelectComponent = /*@__PURE__*/ proxyCustomElement(class SelectComponent e
   static get style() { return selectCss; }
 }, [6, "admiralty-select", {
     "disabled": [4],
-    "error": [4],
-    "errorHint": [1, "error-hint"],
+    "invalid": [4],
+    "invalidMessage": [1, "invalid-message"],
     "hint": [1],
     "label": [1],
     "width": [2],
@@ -74,7 +74,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["admiralty-select", "admiralty-hint", "admiralty-icon", "admiralty-input-error", "admiralty-label"];
+  const components = ["admiralty-select", "admiralty-hint", "admiralty-icon", "admiralty-input-invalid", "admiralty-label"];
   components.forEach(tagName => { switch (tagName) {
     case "admiralty-select":
       if (!customElements.get(tagName)) {
@@ -91,7 +91,7 @@ function defineCustomElement$1() {
         defineCustomElement$4();
       }
       break;
-    case "admiralty-input-error":
+    case "admiralty-input-invalid":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/admiralty-select.js.map

@@ -1 +1 @@
-{"file":"admiralty-select.js","mappings":"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","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.js","mappings":"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","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/components/admiralty-textarea.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$5 } from './hint.js';
 import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './input-error.js';
+import { d as defineCustomElement$3 } from './input-invalid.js';
 import { d as defineCustomElement$2 } from './label.js';
 
 const textareaCss = "@charset \"UTF-8\";@media (max-width: 1023px){.desktop-only.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-textarea{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-textarea{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-textarea{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-textarea{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-textarea{display:none}}*.sc-admiralty-textarea{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300;color:#333333}@media (max-width: 1023px){*.sc-admiralty-textarea{font-size:16px}}a.sc-admiralty-textarea{color:#09315b}a.sc-admiralty-textarea:focus{outline:3px solid #ffdd00;outline-offset:1px}h1.sc-admiralty-textarea{font-family:\"JohnstonITC\", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:48px;line-height:60px;margin:0 0 30px 0}@media (max-width: 1023px){h1.sc-admiralty-textarea{font-size:46px;line-height:54px}}h2.sc-admiralty-textarea{font-family:\"JohnstonITC\", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:36px;line-height:48px;margin-bottom:18px}@media (max-width: 1023px){h2.sc-admiralty-textarea{font-size:34px;line-height:42px}}h3.sc-admiralty-textarea,h4.sc-admiralty-textarea,h5.sc-admiralty-textarea{font-family:\"JohnstonITC\", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:21px;line-height:30px;margin-bottom:12px}@media (max-width: 1023px){h3.sc-admiralty-textarea,h4.sc-admiralty-textarea,h5.sc-admiralty-textarea{font-size:20px;line-height:30px}}h6.sc-admiralty-textarea{font-family:\"JohnstonITC\", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:18px;line-height:24px;margin-bottom:12px}@media (max-width: 1023px){h6.sc-admiralty-textarea{font-size:16px}}p.sc-admiralty-textarea{font-family:\"JohnstonITC\", Helvetica, sans-serif;margin-bottom:30px}.intro.sc-admiralty-textarea{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:28px;line-height:36px;margin-bottom:30px}@media (max-width: 1023px){.intro.sc-admiralty-textarea{font-size:26px}}.small.sc-admiralty-textarea{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:16px}@media (max-width: 1023px){.small.sc-admiralty-textarea{font-size:14px;line-height:22px}}blockquote.sc-admiralty-textarea{font-family:\"JohnstonITC\", Helvetica, sans-serif;line-height:30px;width:100%;padding:24px 18px;border-left:5px solid #09315b;margin-bottom:30px;background:#eeeeee}@media (max-width: 1023px){blockquote.sc-admiralty-textarea{line-height:24px}}ul.sc-admiralty-textarea{font-family:\"JohnstonITC\", Helvetica, sans-serif;list-style:none}ul.sc-admiralty-textarea a.sc-admiralty-textarea{font-weight:300}ul.sc-admiralty-textarea li.sc-admiralty-textarea{margin-bottom:12px}ul.sc-admiralty-textarea li.sc-admiralty-textarea:before{content:\"■\";font-size:18px;color:#09315b;vertical-align:text-bottom;margin-right:12px}@media (max-width: 1023px){ul.sc-admiralty-textarea li.sc-admiralty-textarea:before{font-size:8px}}ol.sc-admiralty-textarea{font-family:\"JohnstonITC\", Helvetica, sans-serif;list-style:none;counter-reset:li}ol.sc-admiralty-textarea a.sc-admiralty-textarea{font-weight:300}ol.sc-admiralty-textarea li.sc-admiralty-textarea:before{content:counter(li) \".\";color:#03284f;font-size:18px;margin-right:12px}ol.sc-admiralty-textarea li.sc-admiralty-textarea{counter-increment:li;margin-bottom:12px}.white-text.sc-admiralty-textarea *.sc-admiralty-textarea{color:#ffffff}.text-area-container.sc-admiralty-textarea textarea.sc-admiralty-textarea{display:block;position:relative;width:100%;min-height:170px;border:2px solid #333333;color:#333333;padding:12px 18px;outline:none;resize:vertical;overflow:auto;box-sizing:border-box;vertical-align:top;background-color:#ffffff}.text-area-container.sc-admiralty-textarea textarea.sc-admiralty-textarea:focus-visible{outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-area-container.sc-admiralty-textarea textarea.invalid.sc-admiralty-textarea{border-color:#e20d0d}.text-area-container.sc-admiralty-textarea textarea.invalid.sc-admiralty-textarea:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-area-container.sc-admiralty-textarea textarea.disabled.sc-admiralty-textarea{color:#adadad;border-color:#adadad;background:#ffffff}";
@@ -48,7 +48,7 @@ const TextareaComponent = /*@__PURE__*/ proxyCustomElement(class TextareaCompone
   }
   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"]
@@ -68,7 +68,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["admiralty-textarea", "admiralty-hint", "admiralty-icon", "admiralty-input-error", "admiralty-label"];
+  const components = ["admiralty-textarea", "admiralty-hint", "admiralty-icon", "admiralty-input-invalid", "admiralty-label"];
   components.forEach(tagName => { switch (tagName) {
     case "admiralty-textarea":
       if (!customElements.get(tagName)) {
@@ -85,7 +85,7 @@ function defineCustomElement$1() {
         defineCustomElement$4();
       }
       break;
-    case "admiralty-input-error":
+    case "admiralty-input-invalid":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/admiralty-textarea.js.map

@@ -1 +1 @@
-{"file":"admiralty-textarea.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.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/components/admiralty-type-ahead.js

@@ -3,7 +3,7 @@ import { K as Keys } from './Keys.js';
 import { d as defineCustomElement$6 } from './hint.js';
 import { d as defineCustomElement$5 } from './icon.js';
 import { d as defineCustomElement$4 } from './input.js';
-import { d as defineCustomElement$3 } from './input-error.js';
+import { d as defineCustomElement$3 } from './input-invalid.js';
 import { d as defineCustomElement$2 } from './label.js';
 
 const typeAheadCss = "@charset \"UTF-8\";.visually-hidden.sc-admiralty-type-ahead{position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}@media (max-width: 1023px){.desktop-only.sc-admiralty-type-ahead{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-type-ahead{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-type-ahead{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-type-ahead{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-type-ahead{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-type-ahead{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-type-ahead{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-type-ahead{display:none}}*.sc-admiralty-type-ahead{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300;color:#333333}@media (max-width: 1023px){*.sc-admiralty-type-ahead{font-size:16px}}a.sc-admiralty-type-ahead{color:#09315b}a.sc-admiralty-type-ahead:focus{outline:3px solid #ffdd00;outline-offset:1px}h1.sc-admiralty-type-ahead{font-family:\"JohnstonITC\", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:48px;line-height:60px;margin:0 0 30px 0}@media (max-width: 1023px){h1.sc-admiralty-type-ahead{font-size:46px;line-height:54px}}h2.sc-admiralty-type-ahead{font-family:\"JohnstonITC\", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:36px;line-height:48px;margin-bottom:18px}@media (max-width: 1023px){h2.sc-admiralty-type-ahead{font-size:34px;line-height:42px}}h3.sc-admiralty-type-ahead,h4.sc-admiralty-type-ahead,h5.sc-admiralty-type-ahead{font-family:\"JohnstonITC\", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:21px;line-height:30px;margin-bottom:12px}@media (max-width: 1023px){h3.sc-admiralty-type-ahead,h4.sc-admiralty-type-ahead,h5.sc-admiralty-type-ahead{font-size:20px;line-height:30px}}h6.sc-admiralty-type-ahead{font-family:\"JohnstonITC\", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:18px;line-height:24px;margin-bottom:12px}@media (max-width: 1023px){h6.sc-admiralty-type-ahead{font-size:16px}}p.sc-admiralty-type-ahead{font-family:\"JohnstonITC\", Helvetica, sans-serif;margin-bottom:30px}.intro.sc-admiralty-type-ahead{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:28px;line-height:36px;margin-bottom:30px}@media (max-width: 1023px){.intro.sc-admiralty-type-ahead{font-size:26px}}.small.sc-admiralty-type-ahead{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:16px}@media (max-width: 1023px){.small.sc-admiralty-type-ahead{font-size:14px;line-height:22px}}blockquote.sc-admiralty-type-ahead{font-family:\"JohnstonITC\", Helvetica, sans-serif;line-height:30px;width:100%;padding:24px 18px;border-left:5px solid #09315b;margin-bottom:30px;background:#eeeeee}@media (max-width: 1023px){blockquote.sc-admiralty-type-ahead{line-height:24px}}ul.sc-admiralty-type-ahead{font-family:\"JohnstonITC\", Helvetica, sans-serif;list-style:none}ul.sc-admiralty-type-ahead a.sc-admiralty-type-ahead{font-weight:300}ul.sc-admiralty-type-ahead li.sc-admiralty-type-ahead{margin-bottom:12px}ul.sc-admiralty-type-ahead li.sc-admiralty-type-ahead:before{content:\"■\";font-size:18px;color:#09315b;vertical-align:text-bottom;margin-right:12px}@media (max-width: 1023px){ul.sc-admiralty-type-ahead li.sc-admiralty-type-ahead:before{font-size:8px}}ol.sc-admiralty-type-ahead{font-family:\"JohnstonITC\", Helvetica, sans-serif;list-style:none;counter-reset:li}ol.sc-admiralty-type-ahead a.sc-admiralty-type-ahead{font-weight:300}ol.sc-admiralty-type-ahead li.sc-admiralty-type-ahead:before{content:counter(li) \".\";color:#03284f;font-size:18px;margin-right:12px}ol.sc-admiralty-type-ahead li.sc-admiralty-type-ahead{counter-increment:li;margin-bottom:12px}.white-text.sc-admiralty-type-ahead *.sc-admiralty-type-ahead{color:#ffffff}*.sc-admiralty-type-ahead{margin:0px;padding:0px}.text-input-wrap.sc-admiralty-type-ahead{height:auto !important}.filterTextInput.sc-admiralty-type-ahead{width:100%}.typeahead-list-container.sc-admiralty-type-ahead{position:relative}.typeahead-list-container.sc-admiralty-type-ahead .typeahead-list.sc-admiralty-type-ahead{position:absolute;left:0px;top:-24px;background-color:#ffffff;width:100%;box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);border:2px solid #333333;border-top:none;box-sizing:border-box;max-height:180px;overflow-y:auto;z-index:1;list-style:none}.typeahead-list-container.sc-admiralty-type-ahead .typeahead-list.sc-admiralty-type-ahead li.sc-admiralty-type-ahead{cursor:pointer;transform:unset !important;padding:6px;min-height:24px;margin:0}.typeahead-list-container.sc-admiralty-type-ahead .typeahead-list.sc-admiralty-type-ahead li.sc-admiralty-type-ahead:before{content:none}.typeahead-list-container.sc-admiralty-type-ahead .typeahead-list.sc-admiralty-type-ahead li.highlighted.sc-admiralty-type-ahead{background-color:#09315b;color:#ffffff}";
@@ -205,7 +205,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["admiralty-type-ahead", "admiralty-hint", "admiralty-icon", "admiralty-input", "admiralty-input-error", "admiralty-label"];
+  const components = ["admiralty-type-ahead", "admiralty-hint", "admiralty-icon", "admiralty-input", "admiralty-input-invalid", "admiralty-label"];
   components.forEach(tagName => { switch (tagName) {
     case "admiralty-type-ahead":
       if (!customElements.get(tagName)) {
@@ -227,7 +227,7 @@ function defineCustomElement$1() {
         defineCustomElement$4();
       }
       break;
-    case "admiralty-input-error":
+    case "admiralty-input-invalid":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }