@ukho/admiralty-core 0.4.6 → 0.5.0

package/dist/types/components.d.ts

@@ -307,7 +307,7 @@ export namespace Components {
          */
         "width": number;
     }
-    interface AdmiraltyInputError {
+    interface AdmiraltyInputInvalid {
     }
     interface AdmiraltyLabel {
         /**
@@ -426,17 +426,17 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * If 'true', the 'error' class is added to suggest an error
+          * The text that will be used as a field label.
          */
-        "error": boolean;
+        "hint": string;
         /**
-          * The hint that is used to inform the user of an error (displayed below the select box)
+          * Whether to show that the select is in an invalid state.
          */
-        "errorHint": string;
+        "invalid": boolean;
         /**
-          * The text that will be used as a field label.
+          * The message to show when the select is invalid.
          */
-        "hint": string;
+        "invalidMessage": string;
         /**
           * The text that will be used as a field label.
          */
@@ -779,11 +779,11 @@ declare global {
         prototype: HTMLAdmiraltyInputElement;
         new (): HTMLAdmiraltyInputElement;
     };
-    interface HTMLAdmiraltyInputErrorElement extends Components.AdmiraltyInputError, HTMLStencilElement {
+    interface HTMLAdmiraltyInputInvalidElement extends Components.AdmiraltyInputInvalid, HTMLStencilElement {
     }
-    var HTMLAdmiraltyInputErrorElement: {
-        prototype: HTMLAdmiraltyInputErrorElement;
-        new (): HTMLAdmiraltyInputErrorElement;
+    var HTMLAdmiraltyInputInvalidElement: {
+        prototype: HTMLAdmiraltyInputInvalidElement;
+        new (): HTMLAdmiraltyInputInvalidElement;
     };
     interface HTMLAdmiraltyLabelElement extends Components.AdmiraltyLabel, HTMLStencilElement {
     }
@@ -968,7 +968,7 @@ declare global {
         "admiralty-hr": HTMLAdmiraltyHrElement;
         "admiralty-icon": HTMLAdmiraltyIconElement;
         "admiralty-input": HTMLAdmiraltyInputElement;
-        "admiralty-input-error": HTMLAdmiraltyInputErrorElement;
+        "admiralty-input-invalid": HTMLAdmiraltyInputInvalidElement;
         "admiralty-label": HTMLAdmiraltyLabelElement;
         "admiralty-link": HTMLAdmiraltyLinkElement;
         "admiralty-paginator": HTMLAdmiraltyPaginatorElement;
@@ -1337,7 +1337,7 @@ declare namespace LocalJSX {
          */
         "width"?: number;
     }
-    interface AdmiraltyInputError {
+    interface AdmiraltyInputInvalid {
     }
     interface AdmiraltyLabel {
         /**
@@ -1479,17 +1479,17 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * If 'true', the 'error' class is added to suggest an error
+          * The text that will be used as a field label.
          */
-        "error"?: boolean;
+        "hint"?: string;
         /**
-          * The hint that is used to inform the user of an error (displayed below the select box)
+          * Whether to show that the select is in an invalid state.
          */
-        "errorHint"?: string;
+        "invalid"?: boolean;
         /**
-          * The text that will be used as a field label.
+          * The message to show when the select is invalid.
          */
-        "hint"?: string;
+        "invalidMessage"?: string;
         /**
           * The text that will be used as a field label.
          */
@@ -1684,7 +1684,7 @@ declare namespace LocalJSX {
         "admiralty-hr": AdmiraltyHr;
         "admiralty-icon": AdmiraltyIcon;
         "admiralty-input": AdmiraltyInput;
-        "admiralty-input-error": AdmiraltyInputError;
+        "admiralty-input-invalid": AdmiraltyInputInvalid;
         "admiralty-label": AdmiraltyLabel;
         "admiralty-link": AdmiraltyLink;
         "admiralty-paginator": AdmiraltyPaginator;
@@ -1741,7 +1741,7 @@ declare module "@stencil/core" {
              * and checkbox.
              */
             "admiralty-input": LocalJSX.AdmiraltyInput & JSXBase.HTMLAttributes<HTMLAdmiraltyInputElement>;
-            "admiralty-input-error": LocalJSX.AdmiraltyInputError & JSXBase.HTMLAttributes<HTMLAdmiraltyInputErrorElement>;
+            "admiralty-input-invalid": LocalJSX.AdmiraltyInputInvalid & JSXBase.HTMLAttributes<HTMLAdmiraltyInputInvalidElement>;
             "admiralty-label": LocalJSX.AdmiraltyLabel & JSXBase.HTMLAttributes<HTMLAdmiraltyLabelElement>;
             "admiralty-link": LocalJSX.AdmiraltyLink & JSXBase.HTMLAttributes<HTMLAdmiraltyLinkElement>;
             "admiralty-paginator": LocalJSX.AdmiraltyPaginator & JSXBase.HTMLAttributes<HTMLAdmiraltyPaginatorElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukho/admiralty-core",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -43,16 +43,16 @@
     "@stencil/angular-output-target": "^0.7.1",
     "@stencil/core": "^3.4.2",
     "@stencil/sass": "^3.0.5",
-    "@storybook/addon-a11y": "^7.2.3",
-    "@storybook/addon-actions": "^7.2.3",
-    "@storybook/addon-essentials": "^7.2.3",
-    "@storybook/addon-links": "^7.2.3",
-    "@storybook/web-components": "^7.2.3",
-    "@storybook/web-components-vite": "^7.2.3",
+    "@storybook/addon-a11y": "^7.4.0",
+    "@storybook/addon-actions": "^7.4.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/web-components": "^7.4.0",
+    "@storybook/web-components-vite": "^7.4.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^18.17.0",
     "clean-css-cli": "^5.6.2",
-    "concurrently": "^8.2.0",
+    "concurrently": "^8.2.1",
     "jest": "^27.5.1",
     "jest-cli": "^27.5.1",
     "jest-environment-node": "^27.5.1",
@@ -61,11 +61,11 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.64.1",
-    "storybook": "^7.2.3",
-    "vite": "^4.4.7"
+    "storybook": "^7.4.0",
+    "vite": "^4.4.9"
   },
   "license": "MIT",
   "url": "https://github.com/UKHO/admiralty-design-system",
   "repository": "git://github.com/UKHO/admiralty-design-system.git",
-  "gitHead": "0266549980f96002ae8810433bf9adb7c674d254"
+  "gitHead": "d8bb509acdd6a493625ac0ffd9c93006168f595c"
 }

package/dist/admiralty/p-27286b0d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["textareaCss","textareaIds","TextareaComponent","this","inputId","onBlur","textareaBlur","emit","onInput","ev","input","target","value","valueChanged","nativeInput","nativeTextArea","getValue","admiraltyInput","toString","render","h","Host","class","label","for","disabled","hint","ref","textArea","invalid","style","width","maxWidth","id","maxLength","invalidMessage"],"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"],"mappings":"yDAAA,MAAMA,EAAc,g+ICGpB,IAAIC,EAAc,E,MAOLC,EAAiB,M,mHACpBC,KAAAC,QAAU,sBAAsBH,MAqEhCE,KAAAE,OAAS,KACfF,KAAKG,aAAaC,MAAM,EAGlBJ,KAAAK,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTP,KAAKS,MAAQF,EAAME,OAAS,E,cArER,G,gFAoBI,M,aAKD,M,yCAsB+B,E,CAMhDC,eACR,MAAMC,EAAcX,KAAKY,eACzB,MAAMH,EAAQT,KAAKa,WACnB,GAAIF,GAAeA,EAAYF,QAAUA,EAAO,CAC9CE,EAAYF,MAAQA,C,CAEtBT,KAAKc,eAAeV,KAAK,CAAEK,MAAOT,KAAKS,OAAS,KAAOT,KAAKa,WAAab,KAAKS,MAAMM,Y,CAc9EF,WACN,cAAcb,KAAKS,QAAU,SAAWT,KAAKS,MAAMM,YAAcf,KAAKS,OAAS,IAAIM,U,CAGrFC,SACE,MAAMP,EAAQT,KAAKa,WACnB,OACEI,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,uBACRnB,KAAKoB,MACJH,EAAA,mBAAiBI,IAAKrB,KAAKC,QAASqB,SAAUtB,KAAKsB,UAChDtB,KAAKoB,OAEN,KACHpB,KAAKuB,KAAON,EAAA,kBAAgBK,SAAUtB,KAAKsB,UAAWtB,KAAKuB,MAAyB,KACrFN,EAAA,YACEO,IAAKC,GAAazB,KAAKY,eAAiBa,EACxCN,MAAO,CAAEG,SAAUtB,KAAKsB,SAAUI,QAAS1B,KAAK0B,SAChDC,MAAO3B,KAAK4B,MAAQ,CAAEC,SAAU,GAAG7B,KAAK4B,WAAc,GACtDE,GAAI9B,KAAKC,QACTQ,MAAOA,EACPsB,UAAW/B,KAAK+B,UAChB1B,QAASL,KAAKK,QACdH,OAAQF,KAAKE,SAEdF,KAAK0B,SAAW1B,KAAKgC,eAAiBf,EAAA,6BAAwBjB,KAAKgC,gBAA0C,M"}

package/dist/admiralty/p-5d46659e.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as s,H as i,g as l}from"./p-a2b7bb90.js";const a='.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 r=class{constructor(s){t(this,s);this.admiraltyChange=e(this,"admiraltyChange",7);this.admiraltyBlur=e(this,"admiraltyBlur",7);this.id=`admiralty-select-${++o}`;this.disabled=false;this.error=false;this.errorHint=null;this.hint=null;this.label="Choose a colour";this.width=undefined;this.value=""}valueChanged(){const t=this.nativeInput;const e=this.getValue();if(t&&t.value!==e){t.value=e}this.admiraltyChange.emit({value:this.value==null?this.getValue():this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}handleSelect(t){const e=t.target;if(e){this.value=e.value||""}}handleBlur(t){this.admiraltyBlur.emit()}selectOption(){const t=this.el.querySelectorAll("option");t.forEach((t=>{t.selected=t.value===this.getValue()}))}componentWillRender(){this.selectOption()}render(){const{disabled:t,error:e,errorHint:l,hint:a,id:r,label:o}=this;const n=t?"disabled":"";return s(i,null,s("div",{class:`admiralty-select ${n}`},s("admiralty-label",{disabled:this.disabled,for:r},o),a?s("admiralty-hint",{disabled:this.disabled},a):null,s("div",{class:"select-wrapper",style:this.width?{maxWidth:`${this.width}px`}:{}},s("select",{ref:t=>this.nativeInput=t,id:r,class:{"admiralty-form-control":true,error:e,disabled:t},"aria-disabled":t?"true":"false","aria-label":o,onChange:t=>this.handleSelect(t),onBlur:t=>this.handleBlur(t),disabled:t},s("slot",null)),s("admiralty-icon",{class:`select-down-icon ${n}`,"icon-name":"angle-down"})),this.error?s("admiralty-input-error",null,l):""))}get el(){return l(this)}static get watchers(){return{value:["valueChanged"]}}};let o=0;r.style=a;export{r as admiralty_select};
-//# sourceMappingURL=p-5d46659e.entry.js.map

package/dist/admiralty/p-5d46659e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["selectCss","SelectComponent","this","id","nextId","valueChanged","nativeSelect","nativeInput","value","getValue","admiraltyChange","emit","toString","handleSelect","event","select","target","handleBlur","_event","admiraltyBlur","selectOption","options","el","querySelectorAll","forEach","option","selected","componentWillRender","render","disabled","error","errorHint","hint","label","disabledClass","h","Host","class","for","style","width","maxWidth","ref","onChange","onBlur"],"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"],"mappings":"gEAAA,MAAMA,EAAY,utB,MCQLC,EAAe,M,uHAG1BC,KAAAC,GAAa,sBAAsBC,I,cAIP,M,WAIH,M,eAIG,K,UAIL,K,WAIC,kB,gCAiBkC,E,CAGhDC,eACR,MAAMC,EAAeJ,KAAKK,YAC1B,MAAMC,EAAQN,KAAKO,WACnB,GAAIH,GAAgBA,EAAaE,QAAUA,EAAO,CAChDF,EAAaE,MAAQA,C,CAEvBN,KAAKQ,gBAAgBC,KAAK,CAAEH,MAAON,KAAKM,OAAS,KAAON,KAAKO,WAAaP,KAAKM,MAAMI,Y,CAG/EH,WACN,cAAcP,KAAKM,QAAU,SAAWN,KAAKM,MAAMI,YAAcV,KAAKM,OAAS,IAAII,U,CAGrFC,aAAaC,GACX,MAAMC,EAASD,EAAME,OACrB,GAAID,EAAQ,CACVb,KAAKM,MAAQO,EAAOP,OAAS,E,EAIjCS,WAAWC,GACThB,KAAKiB,cAAcR,M,CAGrBS,eACE,MAAMC,EAAUnB,KAAKoB,GAAGC,iBAAiB,UACzCF,EAAQG,SAAQC,IACdA,EAAOC,SAAWD,EAAOjB,QAAUN,KAAKO,UAAU,G,CAItDkB,sBACEzB,KAAKkB,c,CAGPQ,SACE,MAAMC,SAAEA,EAAQC,MAAEA,EAAKC,UAAEA,EAASC,KAAEA,EAAI7B,GAAEA,EAAE8B,MAAEA,GAAU/B,KACxD,MAAMgC,EAAgBL,EAAW,WAAa,GAC9C,OACEM,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAO,oBAAoBH,KAC9BC,EAAA,mBAAiBN,SAAU3B,KAAK2B,SAAUS,IAAKnC,GAC5C8B,GAEFD,EAAOG,EAAA,kBAAgBN,SAAU3B,KAAK2B,UAAWG,GAAyB,KAC3EG,EAAA,OAAKE,MAAM,iBAAiBE,MAAOrC,KAAKsC,MAAQ,CAAEC,SAAU,GAAGvC,KAAKsC,WAAc,IAChFL,EAAA,UACEO,IAAK3B,GAAWb,KAAKK,YAAcQ,EACnCZ,GAAIA,EACJkC,MAAO,CAAE,yBAA0B,KAAMP,MAASA,EAAOD,SAAYA,GAAU,gBAChEA,EAAW,OAAS,QAAO,aAC9BI,EACZU,SAAU7B,GAASZ,KAAKW,aAAaC,GACrC8B,OAAQ9B,GAASZ,KAAKe,WAAWH,GACjCe,SAAUA,GAEVM,EAAA,cAEFA,EAAA,kBAAgBE,MAAO,oBAAoBH,IAAe,YAAY,gBAEvEhC,KAAK4B,MAAQK,EAAA,6BAAwBJ,GAAqC,I,gFAOrF,IAAI3B,EAAS,E"}

package/dist/admiralty/p-869d7709.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s}from"./p-a2b7bb90.js";const n=".text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:#ffffff;border-color:#333333;border-width:2px;border-style:solid;color:#333333;font-size:18px;line-height:24px;font-weight:300;padding:12px}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:#e20d0d}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:#adadad;border-color:#adadad;background:#ffffff}.text-input-container.sc-admiralty-input admiralty-input-error.sc-admiralty-input{margin-top:6px}";const e=class{constructor(s){t(this,s);this.admiraltyInput=i(this,"admiraltyInput",7);this.inputId=`admiralty-input-${++a}`;this.onInput=t=>{const i=t.target;if(i){this.value=i.value||""}};this.name=this.inputId;this.label=undefined;this.hint=undefined;this.disabled=false;this.type="text";this.placeholder=undefined;this.width=undefined;this.maxLength=undefined;this.required=false;this.invalid=false;this.invalidMessage=undefined;this.autocomplete="off";this.value=""}valueChanged(){const t=this.nativeInput;const i=this.getValue();if(t&&t.value!==i){t.value=i}this.admiraltyInput.emit({value:this.value==null?this.getValue():this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}render(){const t=this.getValue();return s("div",{class:"text-input-container"},this.label?s("admiralty-label",{disabled:this.disabled,for:this.inputId},this.label):null,this.hint?s("admiralty-hint",{disabled:this.disabled},this.hint):null,s("input",{ref:t=>this.nativeInput=t,class:{disabled:this.disabled,invalid:this.invalid},disabled:this.disabled,id:this.inputId,name:this.name,type:this.type,value:t,maxLength:this.maxLength,onInput:this.onInput,placeholder:this.placeholder,autoComplete:this.autocomplete,required:this.required,style:{maxWidth:this.width?`${this.width}px`:null}}),s("admiralty-input-error",{style:{visibility:this.invalid&&this.invalidMessage?"visible":"hidden"}},this.invalidMessage))}static get watchers(){return{value:["valueChanged"]}}};let a=0;e.style=n;export{e as admiralty_input};
-//# sourceMappingURL=p-869d7709.entry.js.map

package/dist/admiralty/p-869d7709.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["inputCss","InputComponent","this","inputId","nextId","onInput","ev","input","target","value","valueChanged","nativeInput","getValue","admiraltyInput","emit","toString","render","h","class","label","disabled","for","hint","ref","invalid","id","name","type","maxLength","placeholder","autoComplete","autocomplete","required","style","maxWidth","width","visibility","invalidMessage"],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n  display: flex;\n  flex-direction: column;\n\n  input {\n    background-color: colours.$colour-white;\n    border-color: colours.$colour-text;\n    border-width: 2px;\n    border-style: solid;\n    color: colours.$colour-text;\n    font-size: 18px;\n    line-height: 24px;\n    font-weight: typography.$font-weight-light;\n\n    padding: 12px;\n\n    &:focus {\n      outline-offset: unset;\n      outline: 3px solid colours.$colour-utility-focus;\n      box-shadow: colours.$colour-text inset 0 0 0 2px;\n    }\n\n    &.invalid {\n      border-color: colours.$colour-utility-error;\n\n      &:focus-visible {\n        border-color: unset;\n        outline: 3px solid colours.$colour-utility-focus;\n      }\n    }\n\n    &.disabled {\n      color: colours.$colour-textinput-text-disabled;\n      border-color: colours.$colour-textinput-border-disabled;\n      background: colours.$colour-white;\n    }\n  }\n\n  admiralty-input-error {\n    margin-top: 6px;\n  }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n  tag: 'admiralty-input',\n  styleUrl: 'input.scss',\n  scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n  inputId: string = `admiralty-input-${++nextId}`;\n\n  private nativeInput?: HTMLInputElement;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * The label which will be used above the input to describe the input.\n   */\n  @Prop() label: string;\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The input type, options are: `text | date | time | email | password | tel | url`\n   */\n  @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * The placeholder text to show in the input\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width: number;\n\n  /**\n   * The maximum string length for the input field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * This dictates whether the input is required or not\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: string = 'off';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyInput: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n    if (nativeInput && nativeInput.value !== value) {\n      nativeInput.value = value;\n    }\n    this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n  };\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  render() {\n    const value = this.getValue();\n    return (\n      <div class=\"text-input-container\">\n        {this.label ? (\n          <admiralty-label disabled={this.disabled} for={this.inputId}>\n            {this.label}\n          </admiralty-label>\n        ) : null}\n        {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n        <input\n          ref={input => (this.nativeInput = input)}\n          class={{ disabled: this.disabled, invalid: this.invalid }}\n          disabled={this.disabled}\n          id={this.inputId}\n          name={this.name}\n          type={this.type}\n          value={value}\n          maxLength={this.maxLength}\n          onInput={this.onInput}\n          placeholder={this.placeholder}\n          autoComplete={this.autocomplete}\n          required={this.required}\n          style={{\n            maxWidth: this.width ? `${this.width}px` : null,\n          }}\n        />\n        <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"],"mappings":"kDAAA,MAAMA,EAAW,84B,MCeJC,EAAc,M,wEACzBC,KAAAC,QAAkB,qBAAqBC,IAuF/BF,KAAAG,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTL,KAAKO,MAAQF,EAAME,OAAS,E,aAnFTP,KAAKC,Q,uDAeT,M,UAK6D,O,uFAoBpD,M,aAKD,M,gDAUI,M,WAK2B,E,CAWhDO,eACR,MAAMC,EAAcT,KAAKS,YACzB,MAAMF,EAAQP,KAAKU,WACnB,GAAID,GAAeA,EAAYF,QAAUA,EAAO,CAC9CE,EAAYF,MAAQA,C,CAEtBP,KAAKW,eAAeC,KAAK,CAAEL,MAAOP,KAAKO,OAAS,KAAOP,KAAKU,WAAaV,KAAKO,MAAMM,Y,CAU9EH,WACN,cAAcV,KAAKO,QAAU,SAAWP,KAAKO,MAAMM,YAAcb,KAAKO,OAAS,IAAIM,U,CAGrFC,SACE,MAAMP,EAAQP,KAAKU,WACnB,OACEK,EAAA,OAAKC,MAAM,wBACRhB,KAAKiB,MACJF,EAAA,mBAAiBG,SAAUlB,KAAKkB,SAAUC,IAAKnB,KAAKC,SACjDD,KAAKiB,OAEN,KACHjB,KAAKoB,KAAOL,EAAA,kBAAgBG,SAAUlB,KAAKkB,UAAWlB,KAAKoB,MAAyB,KACrFL,EAAA,SACEM,IAAKhB,GAAUL,KAAKS,YAAcJ,EAClCW,MAAO,CAAEE,SAAUlB,KAAKkB,SAAUI,QAAStB,KAAKsB,SAChDJ,SAAUlB,KAAKkB,SACfK,GAAIvB,KAAKC,QACTuB,KAAMxB,KAAKwB,KACXC,KAAMzB,KAAKyB,KACXlB,MAAOA,EACPmB,UAAW1B,KAAK0B,UAChBvB,QAASH,KAAKG,QACdwB,YAAa3B,KAAK2B,YAClBC,aAAc5B,KAAK6B,aACnBC,SAAU9B,KAAK8B,SACfC,MAAO,CACLC,SAAUhC,KAAKiC,MAAQ,GAAGjC,KAAKiC,UAAY,QAG/ClB,EAAA,yBAAuBgB,MAAO,CAAEG,WAAYlC,KAAKsB,SAAWtB,KAAKmC,eAAiB,UAAY,WAAanC,KAAKmC,gB,wDAKxH,IAAIjC,EAAS,E"}

package/dist/admiralty/p-c027f79d.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as r,H as l}from"./p-a2b7bb90.js";import{a as t}from"./p-7151aba4.js";const s="p.sc-admiralty-hint{margin-top:0;margin-bottom:6px;display:block;font-weight:300}p.disabled.sc-admiralty-hint{color:#adadad}";const i=class{constructor(r){a(this,r);this.disabled=undefined}render(){return r("p",{class:{disabled:this.disabled}},r("slot",null))}};i.style=s;const n=".sc-admiralty-input-error-h{display:flex;align-items:center}admiralty-icon.sc-admiralty-input-error{color:#e20d0d}p.sc-admiralty-input-error{margin:0;color:#e20d0d}";const o=class{constructor(r){a(this,r)}render(){return r(l,null,r("admiralty-icon",{"icon-name":t.iconName,class:"error-icon"}),r("p",null,r("slot",null)))}};o.style=n;const d="label.sc-admiralty-label{margin-bottom:6px;display:inline-block;font-weight:normal}label.disabled.sc-admiralty-label{color:#adadad}";const e=class{constructor(r){a(this,r);this.disabled=undefined;this.for=undefined}render(){return r("label",{htmlFor:this.for,class:{disabled:this.disabled}},r("slot",null))}};e.style=d;export{i as admiralty_hint,o as admiralty_input_error,e as admiralty_label};
-//# sourceMappingURL=p-c027f79d.entry.js.map

package/dist/admiralty/p-c027f79d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["hintCss","HintComponent","render","h","class","disabled","this","inputErrorCss","InputError","Host","faExclamation","iconName","labelCss","LabelComponent","htmlFor","for"],"sources":["./src/components/hint/hint.scss?tag=admiralty-hint&encapsulation=scoped","./src/components/hint/hint.tsx","./src/components/input-error/input-error.scss?tag=admiralty-input-error&encapsulation=scoped","./src/components/input-error/input-error.tsx","./src/components/label/label.scss?tag=admiralty-label&encapsulation=scoped","./src/components/label/label.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/vars/typography\";\n\np {\n  margin-top: 0;\n  margin-bottom: 6px;\n  display: block;\n  font-weight: typography.$font-weight-light;\n\n  &.disabled {\n    color: colours.$colour-textinput-text-disabled;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The hint content should be placed in the slot e.g.\n * `<admiralty-hint>Enter your full name</admiralty-hint>`\n */\n@Component({\n  tag: 'admiralty-hint',\n  styleUrl: 'hint.scss',\n  scoped: true,\n})\nexport class HintComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  render() {\n    return (\n      <p class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </p>\n    );\n  }\n}\n","@use '../../scss/vars/colours';\n\n:host {\n  display: flex;\n  align-items: center;\n}\n\nadmiralty-icon {\n  color: colours.$colour-utility-error;\n}\n\np {\n  margin: 0;\n  color: colours.$colour-utility-error;\n}\n\n","import { Component, h, Host } from '@stencil/core';\nimport { faExclamation } from '@fortawesome/free-solid-svg-icons';\n\n/**\n * @slot - The error content should be placed in the slot e.g.\n * `<admiralty-input-error>This field is required</admiralty-input-error>`\n */\n@Component({\n  tag: 'admiralty-input-error',\n  styleUrl: 'input-error.scss',\n  scoped: true,\n})\nexport class InputError {\n  render() {\n    return (\n      <Host>\n        <admiralty-icon icon-name={faExclamation.iconName} class=\"error-icon\"></admiralty-icon>\n        <p>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n}\n","@use \"../../scss/vars/colours\";\n@use \"../../scss/vars/typography\";\n\nlabel {\n  margin-bottom: 6px;\n  display: inline-block;\n  font-weight: typography.$font-weight-medium;\n\n  &.disabled {\n    color: colours.$colour-textinput-text-disabled;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The label content should be placed in the slot e.g.\n * `<admiralty-label>First Name</admiralty-label>`\n */\n@Component({\n  tag: 'admiralty-label',\n  styleUrl: 'label.scss',\n  scoped: true,\n})\nexport class LabelComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * The id of the input the label is attached to\n   */\n  @Prop() for: string;\n\n  render() {\n    return (\n      <label htmlFor={this.for} class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </label>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAU,+H,MCWHC,EAAa,M,iDAMxBC,SACE,OACEC,EAAA,KAAGC,MAAO,CAAEC,SAAUC,KAAKD,WACzBF,EAAA,a,aCpBR,MAAMI,EAAgB,uK,MCYTC,EAAU,M,yBACrBN,SACE,OACEC,EAACM,EAAI,KACHN,EAAA,8BAA2BO,EAAcC,SAAUP,MAAM,eACzDD,EAAA,SACEA,EAAA,c,aClBV,MAAMS,EAAW,sI,MCWJC,EAAc,M,oEAWzBX,SACE,OACEC,EAAA,SAAOW,QAASR,KAAKS,IAAKX,MAAO,CAAEC,SAAUC,KAAKD,WAChDF,EAAA,a"}

package/dist/collection/components/input-error/input-error.e2e.js

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-describe('admiralty-input-error', () => {
-  it('renders', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<admiralty-input-error></admiralty-input-error>');
-    const element = await page.find('admiralty-input-error');
-    expect(element).toHaveClass('hydrated');
-  });
-});
-//# sourceMappingURL=input-error.e2e.js.map

package/dist/collection/components/input-error/input-error.e2e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-error.e2e.js","sourceRoot":"","sources":["../../../src/components/input-error/input-error.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;EACrC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,iDAAiD,CAAC,CAAC;IAEzE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;IACzD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('admiralty-input-error', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<admiralty-input-error></admiralty-input-error>');\n\n    const element = await page.find('admiralty-input-error');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/input-error/input-error.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-error.js","sourceRoot":"","sources":["../../../src/components/input-error/input-error.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAElE;;;GAGG;AAMH,MAAM,OAAO,UAAU;EACrB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,mCAA2B,aAAa,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,GAAkB;MACvF;QACE,eAAa,CACX,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\nimport { faExclamation } from '@fortawesome/free-solid-svg-icons';\n\n/**\n * @slot - The error content should be placed in the slot e.g.\n * `<admiralty-input-error>This field is required</admiralty-input-error>`\n */\n@Component({\n  tag: 'admiralty-input-error',\n  styleUrl: 'input-error.scss',\n  scoped: true,\n})\nexport class InputError {\n  render() {\n    return (\n      <Host>\n        <admiralty-icon icon-name={faExclamation.iconName} class=\"error-icon\"></admiralty-icon>\n        <p>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/input-error/input-error.spec.js

@@ -1,19 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { InputError } from './input-error';
-describe('input-error', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [InputError],
-      html: `<admiralty-input-error>Test</admiralty-input-error>`,
-    });
-    expect(page.root).toEqualHtml(`
-       <admiralty-input-error>
-        <admiralty-icon class="error-icon" icon-name="exclamation"></admiralty-icon>
-        <p>
-        Test
-        </p>
-</admiralty-input-error>
-    `);
-  });
-});
-//# sourceMappingURL=input-error.spec.js.map

package/dist/collection/components/input-error/input-error.spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-error.spec.js","sourceRoot":"","sources":["../../../src/components/input-error/input-error.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;EAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,qDAAqD;KAC5D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { InputError } from './input-error';\n\ndescribe('input-error', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [InputError],\n      html: `<admiralty-input-error>Test</admiralty-input-error>`,\n    });\n    expect(page.root).toEqualHtml(`\n       <admiralty-input-error>\n        <admiralty-icon class=\"error-icon\" icon-name=\"exclamation\"></admiralty-icon>\n        <p>\n        Test\n        </p>\n</admiralty-input-error>\n    `);\n  });\n});\n"]}

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

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

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

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

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

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

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

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

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

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