@ukho/admiralty-core 0.0.0

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

@@ -0,0 +1 @@
+{"file":"admiralty-select.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,4kBAA4kB;;MCQjlB,eAAe;;;;;;;IAE1B,OAAE,GAAW,oBAAoB,EAAE,MAAM,EAAE,CAAC;oBAIhB,KAAK;iBAIR,KAAK;qBAIF,IAAI;gBAIT,IAAI;iBAIH,iBAAiB;;;EAczC,mBAAmB;IACjB,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAID,YAAY,CAAC,KAAY;IACvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;GACzC;EAED,UAAU,CAAC,MAAkB;IAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;GAC3B;;;;;EAMD,UAAU;IACR,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,EAAE,CAAC;;IAGnB,WAAW,CAAC,OAAO,CAAC,IAAI;;MAEtB,IAAI,CAAC,MAAM,EAAE,CAAC;MAEd,OAAO,CAAC,IAAI,CAAC;QACX,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAC,CAAC;IAEH,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;GACxB;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAC7D,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC;IAEjD,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,oBAAoB,aAAa,EAAE,IAC7C,uBAAiB,GAAG,EAAE,EAAE,IAAG,KAAK,CAAmB,EACnD,0BAAiB,IAAI,CAAkB,EACvC,WAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,GAAG,EAAE,IAClF,cACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,mBAChE,QAAQ,GAAG,MAAM,GAAG,OAAO,gBAC9B,KAAK,EACjB,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACvC,QAAQ,EAAE,QAAQ,IAEjB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtB,cAAQ,KAAK,EAAE,MAAM,CAAC,KAAK,IAAG,MAAM,CAAC,IAAI,CAAU,CACpD,CAAC,CACK,EACT,sBAAgB,KAAK,EAAE,oBAAoB,aAAa,EAAE,eAAY,YAAY,GAAkB,CAChG,EACL,IAAI,CAAC,KAAK,GAAG,iCAAwB,SAAS,CAAyB,GAAG,EAAE,CACzE,CACD,EACP;GACH;;;;;;;;;;;AAGH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/select/select.scss?tag=admiralty-select&encapsulation=shadow","./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 } from '@stencil/core';\nimport { UKHOOptions } from './select.types';\n\n@Component({\n  tag: 'admiralty-select',\n  styleUrl: 'select.scss',\n  shadow: true,\n})\nexport class SelectComponent {\n  @Element() el: HTMLElement;\n  id: string = `admiralty-select-${++nextId}`;\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * If 'true', the 'error' class is added to suggest an error\n   */\n  @Prop() error: boolean = false;\n  /**\n   * The hint that is used to inform the user of an error (displayed below the select box)\n   */\n  @Prop() errorHint: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() hint: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() label: string = 'Choose a colour';\n  /**\n   * The maximum width (px) for the input field.\n   */\n  @Prop() width?: number;\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyChange: EventEmitter<EventTarget>;\n  /**\n   * Emitted when the component loses focus.\n   */\n  @Event() admiraltyBlur: EventEmitter<void>;\n\n  componentWillRender() {\n    this.getOptions();\n  }\n\n  options: Array<UKHOOptions>;\n\n  handleSelect(event: Event) {\n    this.admiraltyChange.emit(event.target);\n  }\n\n  handleBlur(_event: FocusEvent): void {\n    this.admiraltyBlur.emit();\n  }\n\n  /**\n   *  Summary. gets the options passed the user passes through the slots and\n   *  extracs the text and value\n   */\n  getOptions() {\n    const slotOptions = this.el.querySelectorAll('option');\n    const options = [];\n\n    // grab all the data from the slot and extract the data to be inserted into the template\n    slotOptions.forEach(slot => {\n      // remove the slotted option to keep the shadowDom clean\n      slot.remove();\n\n      options.push({\n        text: slot.text,\n        value: slot.value,\n      });\n    });\n\n    this.options = options;\n  }\n\n  render() {\n    const { disabled, error, errorHint, hint, id, label } = this;\n    const disabledClass = disabled ? 'disabled' : '';\n\n    return (\n      <Host>\n        <div class={`admiralty-select ${disabledClass}`}>\n          <admiralty-label for={id}>{label}</admiralty-label>\n          <admiralty-hint>{hint}</admiralty-hint>\n          <div class=\"select-wrapper\" style={this.width ? { maxWidth: `${this.width}px` } : {}}>\n            <select\n              id={id}\n              class={{ 'admiralty-form-control': true, 'error': error, 'disabled': disabled }}\n              aria-disabled={disabled ? 'true' : 'false'}\n              aria-label={label}\n              onChange={event => this.handleSelect(event)}\n              onBlur={event => this.handleBlur(event)}\n              disabled={disabled}\n            >\n              {this.options.map(option => (\n                <option value={option.value}>{option.text}</option>\n              ))}\n            </select>\n            <admiralty-icon class={`select-down-icon ${disabledClass}`} icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          {this.error ? <admiralty-input-error>{errorHint}</admiralty-input-error> : ''}\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"version":3}

package/dist/components/admiralty-side-nav-item.d.ts

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

package/dist/components/admiralty-side-nav-item.js

@@ -0,0 +1,56 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const sideNavItemCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-side-nav-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-side-nav-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-side-nav-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-side-nav-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-side-nav-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-side-nav-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-side-nav-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-side-nav-item{display:none}}a.section.sc-admiralty-side-nav-item{cursor:pointer;padding:0px 10px;display:flex;flex-direction:column;justify-content:center;height:42px;max-width:fit-content;box-sizing:border-box;user-select:none;text-align:center;text-decoration:none;color:#09315b;font-weight:normal;font-size:16px}a.section.sc-admiralty-side-nav-item:hover{background-color:#f0f0f0}a.section.sc-admiralty-side-nav-item:focus{outline-offset:-2px}a.section.navActive.sc-admiralty-side-nav-item{background-color:#09315b;color:#ffffff}";
+
+const SideNavItemComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.sideNavItemSelected = createEvent(this, "sideNavItemSelected", 7);
+    this.sideNavItemId = undefined;
+    this.headingTitle = undefined;
+    this.navActive = false;
+  }
+  handleClickAction() {
+    this.emitSideNavItemSelected();
+  }
+  handleKeyUpAction(ev) {
+    if (ev.key === 'Enter') {
+      this.emitSideNavItemSelected();
+    }
+  }
+  emitSideNavItemSelected() {
+    this.sideNavItemSelected.emit(this.sideNavItemId);
+  }
+  render() {
+    return (h("a", { class: {
+        section: true,
+        navActive: this.navActive,
+      }, tabindex: "0", role: "button", onClick: this.handleClickAction.bind(this), onKeyUp: this.handleKeyUpAction.bind(this) }, this.headingTitle));
+  }
+  static get style() { return sideNavItemCss; }
+}, [2, "admiralty-side-nav-item", {
+    "sideNavItemId": [1, "side-nav-item-id"],
+    "headingTitle": [1, "heading-title"],
+    "navActive": [4, "nav-active"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-side-nav-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-side-nav-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SideNavItemComponent);
+      }
+      break;
+  } });
+}
+
+const AdmiraltySideNavItem = SideNavItemComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltySideNavItem, defineCustomElement };
+
+//# sourceMappingURL=admiralty-side-nav-item.js.map

package/dist/components/admiralty-side-nav-item.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-side-nav-item.js","mappings":";;AAAA,MAAM,cAAc,GAAG,0sCAA0sC;;MCOptC,oBAAoB;;;;;;;qBAiBF,KAAK;;EAOlC,iBAAiB;IACf,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAChC;EAED,iBAAiB,CAAC,EAAiB;IACjC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,EAAE;MACtB,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;GACF;EAED,uBAAuB;IACrB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GACnD;EAED,MAAM;IACJ,QACE,SACE,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,IAAI,CAAC,SAAS;OAC1B,EACD,QAAQ,EAAC,GAAG,EACZ,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC1C,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,IAEzC,IAAI,CAAC,YAAY,CAChB,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-nav-item/side-nav-item.scss?tag=admiralty-side-nav-item&encapsulation=scoped","./src/components/side-nav-item/side-nav-item.tsx"],"sourcesContent":["@use \"../../scss/base/responsive\";\r\n@use \"../../scss/vars/colours\";\r\n\r\na.section {\r\n  cursor: pointer;\r\n  padding: 0px 10px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  height: 42px;\r\n  max-width: fit-content;\r\n  box-sizing: border-box;\r\n  user-select: none;\r\n\r\n  text-align: center;\r\n  text-decoration: none;\r\n  color: colours.$colour-admiralty-blue;\r\n  font-weight: normal;\r\n  font-size: 16px;\r\n\r\n  &:hover {\r\n    background-color: colours.$colour-nav-bg-hover;\r\n  }\r\n\r\n  &:focus {\r\n    outline-offset: -2px;\r\n  }\r\n\r\n  &.navActive {\r\n    background-color: colours.$colour-admiralty-blue;\r\n    color: colours.$colour-white;\r\n  }\r\n}\r\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-side-nav-item',\n  styleUrl: 'side-nav-item.scss',\n  scoped: true,\n})\nexport class SideNavItemComponent {\n  /**\n   * A unique id for this SideNavItem\n   */\n  @Prop() sideNavItemId: string;\n\n  /**\n   * The text that is displayed in the SideNavItem\n   */\n  @Prop() headingTitle: string;\n\n  /**\n   * Represents whether this SideNavItem is 'active'\n   * and will be styled differently than SideNavItems that are not 'active'.\n   * The intent behind the design for SideNav is for there to only be ONE\n   * SideNavItem that is 'active' per SideNav\n   */\n  @Prop() navActive: boolean = false;\n\n  /**\n   * An event emitted when this Side Nav item is selected containing the sideNavItemId\n   */\n  @Event() sideNavItemSelected: EventEmitter<string>;\n\n  handleClickAction() {\n    this.emitSideNavItemSelected();\n  }\n\n  handleKeyUpAction(ev: KeyboardEvent) {\n    if (ev.key === 'Enter') {\n      this.emitSideNavItemSelected();\n    }\n  }\n\n  emitSideNavItemSelected() {\n    this.sideNavItemSelected.emit(this.sideNavItemId);\n  }\n\n  render() {\n    return (\n      <a\n        class={{\n          section: true,\n          navActive: this.navActive,\n        }}\n        tabindex=\"0\"\n        role=\"button\"\n        onClick={this.handleClickAction.bind(this)}\n        onKeyUp={this.handleKeyUpAction.bind(this)}\n      >\n        {this.headingTitle}\n      </a>\n    );\n  }\n}\n"],"version":3}

package/dist/components/admiralty-side-nav-wrapper.d.ts

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

package/dist/components/admiralty-side-nav-wrapper.js

@@ -0,0 +1,40 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const SideNavWrapperComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  onSideNavItemSelected(event) {
+    const sideNavItemId = event.detail;
+    const sideNav = this.el.querySelector('admiralty-side-nav');
+    const sideNavItems = sideNav.querySelectorAll('admiralty-side-nav-item');
+    sideNavItems.forEach(sideNavItem => {
+      sideNavItem.navActive = sideNavItem.sideNavItemId === sideNavItemId;
+    });
+  }
+  render() {
+    return (h("div", null, h("slot", null)));
+  }
+  get el() { return this; }
+}, [4, "admiralty-side-nav-wrapper", undefined, [[0, "sideNavItemSelected", "onSideNavItemSelected"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-side-nav-wrapper"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-side-nav-wrapper":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SideNavWrapperComponent);
+      }
+      break;
+  } });
+}
+
+const AdmiraltySideNavWrapper = SideNavWrapperComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltySideNavWrapper, defineCustomElement };
+
+//# sourceMappingURL=admiralty-side-nav-wrapper.js.map

package/dist/components/admiralty-side-nav-wrapper.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-side-nav-wrapper.js","mappings":";;MAWa,uBAAuB;;;;;EAIlC,qBAAqB,CAAC,KAA0B;IAC9C,MAAM,aAAa,GAAW,KAAK,CAAC,MAAM,CAAC;IAC3C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAC5D,MAAM,YAAY,GAAG,OAAO,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,CAAC;IAEzE,YAAY,CAAC,OAAO,CAAC,WAAW;MAC9B,WAAW,CAAC,SAAS,GAAG,WAAW,CAAC,aAAa,KAAK,aAAa,CAAC;KACrE,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,eACE,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-nav/side-nav.stories.data.tsx"],"sourcesContent":["import { Component, Element, h, Listen } from '@stencil/core';\n\n/**\n * @internal\n * Wrapper for the Side Nav + Side Nav Items to demonstrate how\n * the sideNavItemSelected event can be handled and navActive can be set.\n */\n@Component({\n  tag: 'admiralty-side-nav-wrapper',\n  shadow: false,\n})\nexport class SideNavWrapperComponent {\n  @Element() el!: HTMLElement;\n\n  @Listen('sideNavItemSelected')\n  onSideNavItemSelected(event: CustomEvent<string>) {\n    const sideNavItemId: string = event.detail;\n    const sideNav = this.el.querySelector('admiralty-side-nav');\n    const sideNavItems = sideNav.querySelectorAll('admiralty-side-nav-item');\n\n    sideNavItems.forEach(sideNavItem => {\n      sideNavItem.navActive = sideNavItem.sideNavItemId === sideNavItemId;\n    });\n  }\n\n  render() {\n    return (\n      <div>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/admiralty-side-nav.d.ts

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

package/dist/components/admiralty-side-nav.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const sideNavCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-side-nav{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-side-nav{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-side-nav{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-side-nav{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-side-nav{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-side-nav{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-side-nav{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-side-nav{display:none}}nav.side-nav.sc-admiralty-side-nav{display:flex;flex-direction:column}";
+
+const SideNavComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.label = undefined;
+  }
+  render() {
+    return (h("nav", { class: "side-nav", "aria-label": this.label }, h("slot", null)));
+  }
+  static get style() { return sideNavCss; }
+}, [6, "admiralty-side-nav", {
+    "label": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-side-nav"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-side-nav":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SideNavComponent);
+      }
+      break;
+  } });
+}
+
+const AdmiraltySideNav = SideNavComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltySideNav, defineCustomElement };
+
+//# sourceMappingURL=admiralty-side-nav.js.map

package/dist/components/admiralty-side-nav.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-side-nav.js","mappings":";;AAAA,MAAM,UAAU,GAAG,gvBAAgvB;;MCOtvB,gBAAgB;;;;;;EAO3B,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,UAAU,gBAAa,IAAI,CAAC,KAAK,IAC1C,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-nav/side-nav.scss?tag=admiralty-side-nav&encapsulation=scoped","./src/components/side-nav/side-nav.tsx"],"sourcesContent":["@use \"../../scss/base/responsive\";\r\n@use \"../../scss/vars/colours\";\r\n\r\nnav.side-nav {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-side-nav',\n  styleUrl: 'side-nav.scss',\n  scoped: true,\n})\nexport class SideNavComponent {\n  /**\n   * A label for accessibility purposes to describe what this Side Nav navigation is for\n   * e.g. Product Menu, Map Tool Menu etc.\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <nav class=\"side-nav\" aria-label={this.label}>\n        <slot></slot>\n      </nav>\n    );\n  }\n}\n"],"version":3}

package/dist/components/admiralty-table-body.d.ts

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

package/dist/components/admiralty-table-body.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableBodyCss = ".sc-admiralty-table-body-h{display:table-row-group}.sc-admiralty-table-body-s>:nth-child(odd){background-color:#ffffff}.sc-admiralty-table-body-s>:nth-child(even){background-color:#eef3f4}";
+
+const TableBody = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+  static get style() { return tableBodyCss; }
+}, [6, "admiralty-table-body"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-table-body"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-table-body":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableBody);
+      }
+      break;
+  } });
+}
+
+const AdmiraltyTableBody = TableBody;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyTableBody, defineCustomElement };
+
+//# sourceMappingURL=admiralty-table-body.js.map

package/dist/components/admiralty-table-body.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-table-body.js","mappings":";;AAAA,MAAM,YAAY,GAAG,8LAA8L;;MCWtM,SAAS;;;;;EACpB,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/table-body/table-body.scss?tag=admiralty-table-body&encapsulation=scoped","./src/components/table-body/table-body.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\r\n\r\n:host {\r\n  display: table-row-group;\r\n}\r\n\r\n::slotted(:nth-child(odd)) {\r\n  background-color: colours.$colour-table-row-bg;\r\n}\r\n\r\n::slotted(:nth-child(even)) {\r\n  background-color: colours.$colour-table-row-alt-bg;\r\n}\r\n\r\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * The table body element is a wrapper for a standard html table body and should be used to wrap rows\n * @slot - Table rows should be placed in the slot\n */\n@Component({\n  tag: 'admiralty-table-body',\n  styleUrl: 'table-body.scss',\n  scoped: true,\n})\nexport class TableBody {\n  render() {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/admiralty-table-cell.d.ts

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

package/dist/components/admiralty-table-cell.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableCellCss = ".sc-admiralty-table-cell-h{display:table-cell;box-sizing:border-box;color:#09315b;font-size:18px;line-height:30px;padding:6px 20px;border-right:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;font-weight:300}";
+
+const TableCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, { role: "cell" }, h("slot", null)));
+  }
+  static get style() { return tableCellCss; }
+}, [6, "admiralty-table-cell"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-table-cell"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-table-cell":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableCell);
+      }
+      break;
+  } });
+}
+
+const AdmiraltyTableCell = TableCell;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyTableCell, defineCustomElement };
+
+//# sourceMappingURL=admiralty-table-cell.js.map

package/dist/components/admiralty-table-cell.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-table-cell.js","mappings":";;AAAA,MAAM,YAAY,GAAG,oNAAoN;;MCW5N,SAAS;;;;;EACpB,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,MAAM,IACf,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/table-cell/table-cell.scss?tag=admiralty-table-cell&encapsulation=scoped","./src/components/table-cell/table-cell.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\r\n@use '../../scss/vars/typography';\r\n\r\n:host {\r\n  display: table-cell;\r\n  box-sizing: border-box;\r\n  color: colours.$colour-admiralty-blue;\r\n  font-size: 18px;\r\n  line-height: 30px;\r\n  padding: 6px 20px;\r\n  border-right: 1px solid colours.$colour-divider;\r\n  border-bottom: 1px solid colours.$colour-divider;\r\n  font-weight: typography.$font-weight-light;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * The table cell is a wrapper for a standard <td> element and should be used inside of table rows\n * @slot - The content you wish to display in the table\n */\n@Component({\n  tag: 'admiralty-table-cell',\n  styleUrl: 'table-cell.scss',\n  scoped: true,\n})\nexport class TableCell {\n  render() {\n    return (\n      <Host role=\"cell\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/admiralty-table-header-cell.d.ts

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

package/dist/components/admiralty-table-header-cell.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableHeaderCellCss = ".sc-admiralty-table-header-cell-h{display:table-cell;color:#09315b;font-size:18px;line-height:30px;padding:6px 20px;text-align:left;font-weight:normal;border-bottom:5px solid #09315b}";
+
+const TableHeaderCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, { role: "columnheader" }, h("slot", null)));
+  }
+  static get style() { return tableHeaderCellCss; }
+}, [6, "admiralty-table-header-cell"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-table-header-cell"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-table-header-cell":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableHeaderCell);
+      }
+      break;
+  } });
+}
+
+const AdmiraltyTableHeaderCell = TableHeaderCell;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyTableHeaderCell, defineCustomElement };
+
+//# sourceMappingURL=admiralty-table-header-cell.js.map

package/dist/components/admiralty-table-header-cell.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-table-header-cell.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,yLAAyL;;MCWvM,eAAe;;;;;EAC1B,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,cAAc,IACvB,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/table-header-cell/table-header-cell.scss?tag=admiralty-table-header-cell&encapsulation=scoped","./src/components/table-header-cell/table-header-cell.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\r\n@use '../../scss/vars/typography';\r\n\r\n:host {\r\n  display: table-cell;\r\n  color: colours.$colour-admiralty-blue;\r\n  font-size: 18px;\r\n  line-height: 30px;\r\n  padding: 6px 20px;\r\n  text-align: left;\r\n  font-weight: typography.$font-weight-medium;\r\n  border-bottom: 5px solid colours.$colour-admiralty-blue;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * The table header cell element is used for showing headings for the columns\n * @slot - The content you wish to show as part of the header\n */\n@Component({\n  tag: 'admiralty-table-header-cell',\n  styleUrl: 'table-header-cell.scss',\n  scoped: true,\n})\nexport class TableHeaderCell {\n  render() {\n    return (\n      <Host role=\"columnheader\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/admiralty-table-header.d.ts

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

package/dist/components/admiralty-table-header.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableHeaderCss = ".sc-admiralty-table-header-h{display:table-header-group}";
+
+const TableHeader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+  static get style() { return tableHeaderCss; }
+}, [6, "admiralty-table-header"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-table-header"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-table-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableHeader);
+      }
+      break;
+  } });
+}
+
+const AdmiraltyTableHeader = TableHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyTableHeader, defineCustomElement };
+
+//# sourceMappingURL=admiralty-table-header.js.map

package/dist/components/admiralty-table-header.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-table-header.js","mappings":";;AAAA,MAAM,cAAc,GAAG,0DAA0D;;MCWpE,WAAW;;;;;EACtB,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/table-header/table-header.scss?tag=admiralty-table-header&encapsulation=scoped","./src/components/table-header/table-header.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\r\n\r\n:host {\r\n  display: table-header-group;\r\n}\r\n\r\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * The table header should be used inside a table element to give headers to all the columns\n * @slot - Table header cells should be placed in the slot\n */\n@Component({\n  tag: 'admiralty-table-header',\n  styleUrl: 'table-header.scss',\n  scoped: true,\n})\nexport class TableHeader {\n  render() {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/admiralty-table-row.d.ts

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

package/dist/components/admiralty-table-row.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableRowCss = ".sc-admiralty-table-row-h{display:table-row}";
+
+const TableRow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, { role: "row" }, h("slot", null)));
+  }
+  static get style() { return tableRowCss; }
+}, [6, "admiralty-table-row"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-table-row"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-table-row":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableRow);
+      }
+      break;
+  } });
+}
+
+const AdmiraltyTableRow = TableRow;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyTableRow, defineCustomElement };
+
+//# sourceMappingURL=admiralty-table-row.js.map

package/dist/components/admiralty-table-row.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-table-row.js","mappings":";;AAAA,MAAM,WAAW,GAAG,8CAA8C;;MCWrD,QAAQ;;;;;EACnB,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,KAAK,IACd,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/table-row/table-row.scss?tag=admiralty-table-row&encapsulation=scoped","./src/components/table-row/table-row.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\r\n\r\n:host {\r\n  display: table-row;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * The table row element should be used to define rows within the table body\n * @slot - Table cells should be placed inside the slot\n */\n@Component({\n  tag: 'admiralty-table-row',\n  styleUrl: 'table-row.scss',\n  scoped: true,\n})\nexport class TableRow {\n  render() {\n    return (\n      <Host role=\"row\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/admiralty-table.d.ts

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

package/dist/components/admiralty-table.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const tableCss = ".sc-admiralty-table-h{display:table}caption.sc-admiralty-table{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:30px;font-weight:normal;color:#09315b;margin-bottom:30px;text-align:left}";
+
+const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.caption = undefined;
+  }
+  render() {
+    return (h(Host, { role: "table" }, this.caption && h("caption", null, this.caption), h("slot", null)));
+  }
+  static get style() { return tableCss; }
+}, [6, "admiralty-table", {
+    "caption": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-table"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Table);
+      }
+      break;
+  } });
+}
+
+const AdmiraltyTable = Table;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyTable, defineCustomElement };
+
+//# sourceMappingURL=admiralty-table.js.map

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

@@ -0,0 +1 @@
+{"file":"admiralty-table.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,uMAAuM;;MCW3M,KAAK;;;;;;EAGhB,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,OAAO,IACf,IAAI,CAAC,OAAO,IAAI,mBAAU,IAAI,CAAC,OAAO,CAAW,EAClD,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/table/table.scss?tag=admiralty-table&encapsulation=scoped","./src/components/table/table.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\r\n@use '../../scss/vars/typography';\r\n\r\n\r\n:host{\r\n  display: table;\r\n}\r\n\r\ncaption {\r\n  font-family: typography.$font-family;\r\n  font-size: 30px;\r\n  font-weight: typography.$font-weight-medium;\r\n  color: colours.$colour-admiralty-blue;\r\n  margin-bottom: 30px;\r\n  text-align: left;\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * Use tables to make information easier for users to scan and compare\n * @slot - Table elements should be placed in the slot\n */\n@Component({\n  tag: 'admiralty-table',\n  styleUrl: 'table.scss',\n  scoped: true,\n})\nexport class Table {\n  @Prop() caption: string;\n\n  render() {\n    return (\n      <Host role=\"table\">\n        {this.caption && <caption>{this.caption}</caption>}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/admiralty-textarea.d.ts

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

package/dist/components/admiralty-textarea.js

@@ -0,0 +1,84 @@
+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$2 } from './label.js';
+
+const textareaCss = "@charset \"UTF-8\";@media (max-width: 1023px){.desktop-only{display:none}}@media (min-width: 1024px){.not-desktop{display:none}}@media (min-width: 1024px){.tablet-only{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop{display:none}}@media (min-width: 1024px){.phone-or-tablet{display:none}}@media (min-width: 1024px){.phone-only{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only{display:none}}*{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300;color:#333333}@media (max-width: 1023px){*{font-size:16px}}a{color:#09315b}a:focus{outline:3px solid #ffdd00;outline-offset:1px}h1{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{font-size:46px;line-height:54px}}h2{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{font-size:34px;line-height:42px}}h3,h4,h5{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,h4,h5{font-size:20px;line-height:30px}}h6{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{font-size:16px}}p{font-family:\"JohnstonITC\", Helvetica, sans-serif;margin-bottom:30px}.intro{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:28px;line-height:36px;margin-bottom:30px}@media (max-width: 1023px){.intro{font-size:26px}}.small{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:16px}@media (max-width: 1023px){.small{font-size:14px;line-height:22px}}blockquote{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{line-height:24px}}ul{font-family:\"JohnstonITC\", Helvetica, sans-serif;list-style:none}ul a{font-weight:300}ul li{margin-bottom:12px}ul li:before{content:\"■\";font-size:18px;color:#09315b;vertical-align:text-bottom;margin-right:12px}@media (max-width: 1023px){ul li:before{font-size:8px}}ol{font-family:\"JohnstonITC\", Helvetica, sans-serif;list-style:none;counter-reset:li}ol a{font-weight:300}ol li:before{content:counter(li) \".\";color:#03284f;font-size:18px;margin-right:12px}ol li{counter-increment:li;margin-bottom:12px}.white-text *{color:#ffffff}.text-area-container 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 textarea:focus-visible{outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-area-container textarea.invalid{border-color:#e20d0d}.text-area-container textarea.invalid:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-area-container textarea.disabled{color:#adadad;border-color:#adadad;background:#ffffff}";
+
+let textareaIds = 0;
+const TextareaComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.textareaBlur = createEvent(this, "textareaBlur", 7);
+    this.textareaChanged = createEvent(this, "textareaChanged", 7);
+    this.inputId = `admiralty-textarea-${textareaIds++}`;
+    this.onBlur = () => {
+      this.textareaBlur.emit();
+    };
+    this.onChange = (_ev) => {
+      this.textareaChanged.emit(this.text);
+    };
+    this.label = '';
+    this.text = '';
+    this.hint = undefined;
+    this.width = undefined;
+    this.disabled = false;
+    this.invalid = false;
+    this.invalidMessage = undefined;
+  }
+  render() {
+    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", { class: { disabled: this.disabled, invalid: this.invalid }, style: this.width ? { maxWidth: `${this.width}px` } : {}, id: this.inputId, onChange: this.onChange, onBlur: this.onBlur }, this.text), this.invalid ? h("admiralty-input-error", null, this.invalidMessage) : null)));
+  }
+  static get style() { return textareaCss; }
+}, [1, "admiralty-textarea", {
+    "label": [1],
+    "text": [1],
+    "hint": [1],
+    "width": [2],
+    "disabled": [4],
+    "invalid": [4],
+    "invalidMessage": [1, "invalid-message"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-textarea", "admiralty-hint", "admiralty-icon", "admiralty-input-error", "admiralty-label"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-textarea":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TextareaComponent);
+      }
+      break;
+    case "admiralty-hint":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "admiralty-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "admiralty-input-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "admiralty-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const AdmiraltyTextarea = TextareaComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyTextarea, defineCustomElement };
+
+//# sourceMappingURL=admiralty-textarea.js.map