@ukho/admiralty-core 0.0.0

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

@@ -0,0 +1 @@
+{"file":"admiralty-textarea.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,yuGAAyuG;;ACE7vG,IAAI,WAAW,GAAG,CAAC,CAAC;MAOP,iBAAiB;;;;;;;IACpB,YAAO,GAAG,sBAAsB,WAAW,EAAE,EAAE,CAAC;IAiDhD,WAAM,GAAG;MACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,aAAQ,GAAG,CAAC,GAAQ;MAC1B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtC,CAAC;iBAlDsB,EAAE;gBAKH,EAAE;;;oBAeG,KAAK;mBAKN,KAAK;;;EA0BhC,MAAM;IACJ,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,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,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,IAAI,CACD,EACV,IAAI,CAAC,OAAO,GAAG,iCAAwB,IAAI,CAAC,cAAc,CAAyB,GAAG,IAAI,CACvF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/textarea/textarea.scss?tag=admiralty-textarea&encapsulation=shadow","./src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\r\n@use \"../../scss/base/responsive\";\r\n@use \"../../scss/base/typography\";\r\n@use \"../../scss/vars/typography\" as typography-vars;\r\n\r\n\r\n.text-area-container {\r\n  textarea {\r\n    display: block;\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 170px;\r\n    border: 2px solid colours.$colour-text;\r\n    color: colours.$colour-text;\r\n    padding: 12px 18px;\r\n    outline: none;\r\n    resize: vertical;\r\n    overflow: auto;\r\n    box-sizing: border-box;\r\n    vertical-align: top;\r\n\r\n    background-color: colours.$colour-white;\r\n\r\n    &:focus-visible {\r\n      outline: 3px solid colours.$colour-utility-focus;\r\n      box-shadow: colours.$colour-text inset 0 0 0 2px;\r\n    }\r\n\r\n    &.invalid {\r\n      border-color: colours.$colour-utility-error;\r\n\r\n      &:focus-visible {\r\n        border-color: unset;\r\n        outline: 3px solid colours.$colour-utility-focus;\r\n      }\r\n    }\r\n\r\n    &.disabled {\r\n      color: colours.$colour-textinput-text-disabled;\r\n      border-color: colours.$colour-textinput-border-disabled;\r\n      background: colours.$colour-white;\r\n    }\r\n  }\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\nlet textareaIds = 0;\n\n@Component({\n  tag: 'admiralty-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n})\nexport class TextareaComponent {\n  private inputId = `admiralty-textarea-${textareaIds++}`;\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 contents of the textarea\n   */\n  @Prop() text: 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   * 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 textareaChanged\n   */\n  @Event({ eventName: 'textareaChanged' }) textareaChanged: EventEmitter<string>;\n\n  private onBlur = () => {\n    this.textareaBlur.emit();\n  };\n\n  private onChange = (_ev: any) => {\n    this.textareaChanged.emit(this.text);\n  };\n  render() {\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            class={{ disabled: this.disabled, invalid: this.invalid }}\n            style={this.width ? { maxWidth: `${this.width}px` } : {}}\n            id={this.inputId}\n            onChange={this.onChange}\n            onBlur={this.onBlur}\n          >\n            {this.text}\n          </textarea>\n          {this.invalid ? <admiralty-input-error>{this.invalidMessage}</admiralty-input-error> : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/admiralty-type-ahead-item.d.ts

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

package/dist/components/admiralty-type-ahead-item.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const typeAheadItemCss = ".sc-admiralty-type-ahead-item-h{display:block}";
+
+const AdmiraltyTypeAheadItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.value = undefined;
+  }
+  render() {
+    return h(Host, null);
+  }
+  static get style() { return typeAheadItemCss; }
+}, [2, "admiralty-type-ahead-item", {
+    "value": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-type-ahead-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-type-ahead-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AdmiraltyTypeAheadItem$1);
+      }
+      break;
+  } });
+}
+
+const AdmiraltyTypeAheadItem = AdmiraltyTypeAheadItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyTypeAheadItem, defineCustomElement };
+
+//# sourceMappingURL=admiralty-type-ahead-item.js.map

package/dist/components/admiralty-type-ahead-item.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-type-ahead-item.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,gDAAgD;;MCO5DA,wBAAsB;;;;;;EAGjC,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;;;","names":["AdmiraltyTypeAheadItem"],"sources":["./src/components/type-ahead-item/type-ahead-item.scss?tag=admiralty-type-ahead-item&encapsulation=scoped","./src/components/type-ahead-item/type-ahead-item.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-type-ahead-item',\n  styleUrl: 'type-ahead-item.scss',\n  scoped: true,\n})\nexport class AdmiraltyTypeAheadItem {\n  @Prop() value!: string;\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}

package/dist/components/admiralty-type-ahead.d.ts

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

package/dist/components/admiralty-type-ahead.js

@@ -0,0 +1,235 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+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$2 } from './label.js';
+
+const typeAheadCss = ".visually-hidden{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}*{margin:0px;padding:0px}.text-input-wrap{height:auto !important}.filterTextInput{width:100%}.typeahead-list-container{left:0px;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:205px;overflow-y:auto;z-index:1}.typeahead-list-container .typeahead-list{list-style:none}.typeahead-list-container .typeahead-list li{cursor:pointer;transform:unset !important;padding:6px;min-height:24px}.typeahead-list-container .typeahead-list li:before{content:none}.typeahead-list-container .typeahead-list li.highlighted{background-color:#09315b;color:#ffffff}";
+
+const TypeAheadComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selectionChanged = createEvent(this, "selectionChanged", 7);
+    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this._id = `admiralty-typeahead-${++id}`;
+    this.hintId = `${this._id}-assistive-hint`;
+    this.listId = `${this._id}-list`;
+    this.filterList = [];
+    this.selectedItemIndex = -1;
+    this.isFocused = false;
+    this.isSilenced = false;
+    this.isAlternateStatusSection = false;
+    this.originalSearch = '';
+    this.hasBeenFocusedAtLeastOnce = false;
+    this.filterResult = new Array();
+    this.value = undefined;
+    this.label = undefined;
+    this.placeholder = undefined;
+    this.resultsOnInitFocus = false;
+  }
+  get inputValue() {
+    return this.inputControl.value.toString();
+  }
+  set inputValue(value) {
+    this.inputControl.value = value;
+  }
+  connectedCallback() {
+    const slotItems = this.el.querySelectorAll('admiralty-type-ahead-item');
+    slotItems.forEach(el => {
+      this.filterList.push(el.getAttribute('value'));
+    });
+  }
+  componentDidLoad() {
+    if (this.value) {
+      this.inputValue = this.value;
+    }
+  }
+  handleFocusIn() {
+    if (this.resultsOnInitFocus && !this.hasBeenFocusedAtLeastOnce) {
+      this.performFilter('');
+      this.hasBeenFocusedAtLeastOnce = true;
+    }
+    this.isFocused = true;
+    this.isSilenced = false;
+  }
+  handleFocusOut() {
+    this.isFocused = false;
+    this.statusText = null;
+    this.isSilenced = true;
+  }
+  textChanged(value) {
+    this.originalSearch = value;
+    this.performFilter(value);
+    this.isSilenced = false;
+    this.valueChanged.emit(value);
+  }
+  handleKeyPressed(event) {
+    event.stopImmediatePropagation();
+    if (event.key === Keys.UP_ARROW || event.key === Keys.DOWN_ARROW) {
+      this.navigateSuggestions(event.key);
+      this.updateScroll();
+    }
+    else if (event.key !== Keys.ENTER) {
+      this.textChanged(this.inputValue);
+      this.selectCurrentItem();
+    }
+  }
+  handleKeyDown(event) {
+    event.stopImmediatePropagation();
+    if (event.key === Keys.TAB || event.key === Keys.ENTER) {
+      this.selectCurrentItem();
+    }
+  }
+  handleItemSelected(value) {
+    this.inputValue = value;
+    this.textChanged(value);
+    this.filterResult = new Array();
+    this.selectionChanged.emit(value);
+  }
+  performFilter(value) {
+    const filter = (filterList, text) => {
+      const filterResult = filterList.filter(value => {
+        return text === null || text.length < 1 || value.toLowerCase().indexOf(text.toLowerCase()) > -1;
+      });
+      return filterResult;
+    };
+    this.filterResult = filter(this.filterList, value);
+    this.selectedItemIndex = -1;
+  }
+  addHighlight() {
+    if (this.selectedItemIndex > -1) {
+      const listItem = this.el.shadowRoot.querySelector(`#${this.getListItemId(this.selectedItemIndex)}`);
+      listItem.classList.add('highlighted');
+    }
+  }
+  removeHighlight(i) {
+    if (i > -1) {
+      const listItem = this.el.shadowRoot.querySelector(`#${this.getListItemId(i)}`);
+      listItem.classList.remove('highlighted');
+    }
+  }
+  selectCurrentItem() {
+    if (this.selectedItemIndex >= 0) {
+      const selectedItemText = this.filterResult[this.selectedItemIndex];
+      this.handleItemSelected(selectedItemText);
+    }
+  }
+  handleItemHovered(index) {
+    this.removeHighlight(this.selectedItemIndex);
+    this.selectedItemIndex = index;
+    this.addHighlight();
+  }
+  handleComponentFocusOut() {
+    var _a;
+    // Ensure dropdown closed on clicking or tabbing away from this component
+    if (((_a = this.filterResult) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this.filterResult = new Array();
+      this.hasBeenFocusedAtLeastOnce = false;
+    }
+  }
+  /**
+   * Check if the selected option is in view, and scroll if not
+   */
+  updateScroll() {
+    const container = this.listContainer;
+    const ul = container.querySelector('ul');
+    const selectedItem = Array.from(ul.childNodes).find((item) => item.ariaPosInSet === `${this.selectedItemIndex + 1}`);
+    if (container && selectedItem && container.scrollHeight + container.clientHeight) {
+      selectedItem.scrollIntoView();
+    }
+  }
+  navigateSuggestions(key) {
+    if (key === Keys.UP_ARROW) {
+      this.removeHighlight(this.selectedItemIndex);
+      this.selectedItemIndex--;
+      if (this.selectedItemIndex === -2) {
+        this.selectedItemIndex = this.filterResult.length - 1;
+      }
+    }
+    if (key === Keys.DOWN_ARROW) {
+      this.removeHighlight(this.selectedItemIndex);
+      this.selectedItemIndex++;
+      if (this.selectedItemIndex > this.filterResult.length - 1) {
+        this.selectedItemIndex = -1;
+      }
+    }
+    if (this.selectedItemIndex === -1) {
+      this.inputValue = this.originalSearch;
+    }
+    else {
+      const value = this.filterResult[this.selectedItemIndex];
+      this.inputValue = value;
+      this.addHighlight();
+    }
+  }
+  getListItemId(i) {
+    return `${this.listId}-item-${i}`;
+  }
+  render() {
+    return (h(Host, { onFocusout: _ev => this.handleComponentFocusOut() }, h("div", { class: "visually-hidden" }, h("div", { class: "results-status-a", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !this.isSilenced && this.isAlternateStatusSection ? this.statusText : ''), h("div", { class: "results-status-b", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !this.isSilenced && !this.isAlternateStatusSection ? this.statusText : '')), h("admiralty-input", { type: "text", ref: el => (this.inputControl = el), label: this.label, placeholder: this.placeholder, class: "filterTextInput", onKeyUp: ev => this.handleKeyPressed(ev), onKeyDown: ev => this.handleKeyDown(ev), onFocusin: _ev => this.handleFocusIn(), onFocusout: _ev => this.handleFocusOut(), "aria-expanded": this.isFocused && this.filterResult.length > 0 }), h("span", { id: this.hintId, class: "visually-hidden" }, "When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures."), this.filterResult.length > 0 ? (h("div", { class: "typeahead-list-container", ref: el => (this.listContainer = el) }, h("ul", { class: "typeahead-list", id: this.listId, role: "listbox" }, this.filterResult.map((item, i) => (h("li", { id: this.getListItemId(i), onMouseDown: _ev => this.handleItemSelected(item), onMouseOver: _ev => this.handleItemHovered(i), "aria-selected": i === this.selectedItemIndex, role: "option", tabindex: "-1", "aria-posinset": i + 1, "aria-setsize": this.filterResult.length }, item)))))) : null, h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return typeAheadCss; }
+}, [1, "admiralty-type-ahead", {
+    "value": [1],
+    "label": [1],
+    "placeholder": [1],
+    "resultsOnInitFocus": [4, "results-on-init-focus"],
+    "filterResult": [32]
+  }]);
+var Keys;
+(function (Keys) {
+  Keys["UP_ARROW"] = "ArrowUp";
+  Keys["DOWN_ARROW"] = "ArrowDown";
+  Keys["ENTER"] = "Enter";
+  Keys["TAB"] = "Tab";
+})(Keys || (Keys = {}));
+let id = 0;
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-type-ahead", "admiralty-hint", "admiralty-icon", "admiralty-input", "admiralty-input-error", "admiralty-label"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-type-ahead":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TypeAheadComponent);
+      }
+      break;
+    case "admiralty-hint":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "admiralty-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "admiralty-input":
+      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 AdmiraltyTypeAhead = TypeAheadComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyTypeAhead, defineCustomElement };
+
+//# sourceMappingURL=admiralty-type-ahead.js.map

package/dist/components/admiralty-type-ahead.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-type-ahead.js","mappings":"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","names":[],"sources":["./src/components/type-ahead/type-ahead.scss?tag=admiralty-type-ahead&encapsulation=shadow","./src/components/type-ahead/type-ahead.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\r\n@use \"../../scss/base/a11y\";\r\n@use \"../../scss/vars/typography\";\r\n\r\n* {\r\n  margin: 0px;\r\n  padding: 0px;\r\n}\r\n\r\n.text-input-wrap {\r\n  height: auto !important;\r\n}\r\n\r\n.filterTextInput {\r\n  width: 100%;\r\n}\r\n\r\n.typeahead-list-container {\r\n  left: 0px;\r\n  background-color: colours.$colour-white;\r\n  width: 100%;\r\n  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);\r\n  border: 2px solid colours.$colour-text;\r\n  border-top: none;\r\n  box-sizing: border-box;\r\n  max-height: 205px;\r\n  overflow-y: auto;\r\n  z-index: 1;\r\n\r\n  .typeahead-list {\r\n    list-style: none;\r\n\r\n    li {\r\n      cursor: pointer;\r\n      transform: unset !important;\r\n      padding: 6px;\r\n      min-height: 24px;\r\n    }\r\n\r\n    li:before {\r\n      content: none;\r\n    }\r\n\r\n    li.highlighted {\r\n      background-color: colours.$colour-admiralty-blue;\r\n      color: colours.$colour-white;\r\n    }\r\n  }\r\n}\r\n\r\n","import { Component, EventEmitter, Host, Prop, Event, h, State, Element } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-type-ahead',\n  styleUrl: 'type-ahead.scss',\n  shadow: true,\n})\nexport class TypeAheadComponent {\n  private _id = `admiralty-typeahead-${++id}`;\n\n  hintId = `${this._id}-assistive-hint`;\n  listId = `${this._id}-list`;\n\n  @Element() el: HTMLElement;\n\n  listContainer!: HTMLDivElement;\n  inputControl!: HTMLAdmiraltyInputElement;\n\n  @State() filterResult: string[] = new Array<string>();\n\n  filterList: Array<string> = [];\n\n  selectedItemIndex = -1;\n  isFocused = false;\n\n  isSilenced = false;\n  isAlternateStatusSection = false;\n  statusText: string;\n\n  private originalSearch = '';\n  private hasBeenFocusedAtLeastOnce = false;\n\n  private get inputValue() {\n    return this.inputControl.value.toString();\n  }\n\n  private set inputValue(value: string) {\n    this.inputControl.value = value;\n  }\n\n  /**\n   * The value of the textinput\n   */\n  @Prop() value: string;\n\n  /**\n   * The text content of the label for the input box\n   */\n  @Prop() label: string;\n\n  /**\n   * The placeholder text for the input field\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Optional property to show results when input box is initally focused\n   */\n  @Prop() resultsOnInitFocus: boolean = false;\n\n  /**\n   * Optional function that will be executed when the user selects an item from the typeahead\n   */\n  @Event() selectionChanged: EventEmitter<string>;\n\n  /**\n   * Event that is fired whenever the value of the typeahead changes\n   * e.g. selection from the dropdown or manually typed entry\n   */\n  @Event() valueChanged: EventEmitter<string>;\n\n  connectedCallback() {\n    const slotItems = this.el.querySelectorAll('admiralty-type-ahead-item');\n    slotItems.forEach(el => {\n      this.filterList.push(el.getAttribute('value'));\n    });\n  }\n\n  componentDidLoad() {\n    if (this.value) {\n      this.inputValue = this.value;\n    }\n  }\n\n  handleFocusIn() {\n    if (this.resultsOnInitFocus && !this.hasBeenFocusedAtLeastOnce) {\n      this.performFilter('');\n      this.hasBeenFocusedAtLeastOnce = true;\n    }\n\n    this.isFocused = true;\n    this.isSilenced = false;\n  }\n\n  handleFocusOut() {\n    this.isFocused = false;\n    this.statusText = null;\n    this.isSilenced = true;\n  }\n\n  private textChanged(value: string): void {\n    this.originalSearch = value;\n    this.performFilter(value);\n    this.isSilenced = false;\n    this.valueChanged.emit(value);\n  }\n\n  handleKeyPressed(event: KeyboardEvent): void {\n    event.stopImmediatePropagation();\n\n    if (event.key === Keys.UP_ARROW || event.key === Keys.DOWN_ARROW) {\n      this.navigateSuggestions(event.key);\n      this.updateScroll();\n    } else if (event.key !== Keys.ENTER) {\n      this.textChanged(this.inputValue);\n      this.selectCurrentItem();\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent): void {\n    event.stopImmediatePropagation();\n\n    if (event.key === Keys.TAB || event.key === Keys.ENTER) {\n      this.selectCurrentItem();\n    }\n  }\n\n  handleItemSelected(value: string): void {\n    this.inputValue = value;\n    this.textChanged(value);\n    this.filterResult = new Array<string>();\n    this.selectionChanged.emit(value);\n  }\n\n  private performFilter(value: string) {\n    const filter = (filterList: string[], text: string) => {\n      const filterResult = filterList.filter(value => {\n        return text === null || text.length < 1 || value.toLowerCase().indexOf(text.toLowerCase()) > -1;\n      });\n      return filterResult;\n    };\n\n    this.filterResult = filter(this.filterList, value);\n\n    this.selectedItemIndex = -1;\n  }\n\n  private addHighlight() {\n    if (this.selectedItemIndex > -1) {\n      const listItem = this.el.shadowRoot.querySelector(`#${this.getListItemId(this.selectedItemIndex)}`);\n      listItem.classList.add('highlighted');\n    }\n  }\n\n  private removeHighlight(i: number) {\n    if (i > -1) {\n      const listItem = this.el.shadowRoot.querySelector(`#${this.getListItemId(i)}`);\n      listItem.classList.remove('highlighted');\n    }\n  }\n\n  private selectCurrentItem(): void {\n    if (this.selectedItemIndex >= 0) {\n      const selectedItemText = this.filterResult[this.selectedItemIndex];\n      this.handleItemSelected(selectedItemText);\n    }\n  }\n\n  handleItemHovered(index: number): void {\n    this.removeHighlight(this.selectedItemIndex);\n    this.selectedItemIndex = index;\n    this.addHighlight();\n  }\n\n  handleComponentFocusOut() {\n    // Ensure dropdown closed on clicking or tabbing away from this component\n    if (this.filterResult?.length > 0) {\n      this.filterResult = new Array<string>();\n      this.hasBeenFocusedAtLeastOnce = false;\n    }\n  }\n\n  /**\n   * Check if the selected option is in view, and scroll if not\n   */\n  private updateScroll() {\n    const container = this.listContainer;\n\n    const ul = container.querySelector('ul');\n    const selectedItem: any = Array.from(ul.childNodes).find((item: any) => item.ariaPosInSet === `${this.selectedItemIndex + 1}`);\n\n    if (container && selectedItem && container.scrollHeight + container.clientHeight) {\n      selectedItem.scrollIntoView();\n    }\n  }\n\n  private navigateSuggestions(key: Keys) {\n    if (key === Keys.UP_ARROW) {\n      this.removeHighlight(this.selectedItemIndex);\n      this.selectedItemIndex--;\n      if (this.selectedItemIndex === -2) {\n        this.selectedItemIndex = this.filterResult.length - 1;\n      }\n    }\n    if (key === Keys.DOWN_ARROW) {\n      this.removeHighlight(this.selectedItemIndex);\n      this.selectedItemIndex++;\n      if (this.selectedItemIndex > this.filterResult.length - 1) {\n        this.selectedItemIndex = -1;\n      }\n    }\n    if (this.selectedItemIndex === -1) {\n      this.inputValue = this.originalSearch;\n    } else {\n      const value = this.filterResult[this.selectedItemIndex];\n\n      this.inputValue = value;\n\n      this.addHighlight();\n    }\n  }\n\n  private getListItemId(i: number) {\n    return `${this.listId}-item-${i}`;\n  }\n\n  render() {\n    return (\n      <Host onFocusout={_ev => this.handleComponentFocusOut()}>\n        <div class=\"visually-hidden\">\n          <div class=\"results-status-a\" role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n            {!this.isSilenced && this.isAlternateStatusSection ? this.statusText : ''}\n          </div>\n          <div class=\"results-status-b\" role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n            {!this.isSilenced && !this.isAlternateStatusSection ? this.statusText : ''}\n          </div>\n        </div>\n        <admiralty-input\n          type=\"text\"\n          ref={el => (this.inputControl = el)}\n          label={this.label}\n          placeholder={this.placeholder}\n          class=\"filterTextInput\"\n          onKeyUp={ev => this.handleKeyPressed(ev)}\n          onKeyDown={ev => this.handleKeyDown(ev)}\n          onFocusin={_ev => this.handleFocusIn()}\n          onFocusout={_ev => this.handleFocusOut()}\n          aria-expanded={this.isFocused && this.filterResult.length > 0}\n        ></admiralty-input>\n\n        <span id={this.hintId} class=\"visually-hidden\">\n          When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.\n        </span>\n        {this.filterResult.length > 0 ? (\n          <div class=\"typeahead-list-container\" ref={el => (this.listContainer = el)}>\n            <ul class=\"typeahead-list\" id={this.listId} role=\"listbox\">\n              {this.filterResult.map((item, i) => (\n                <li\n                  id={this.getListItemId(i)}\n                  onMouseDown={_ev => this.handleItemSelected(item)}\n                  onMouseOver={_ev => this.handleItemHovered(i)}\n                  aria-selected={i === this.selectedItemIndex}\n                  role=\"option\"\n                  tabindex=\"-1\"\n                  aria-posinset={i + 1}\n                  aria-setsize={this.filterResult.length}\n                >\n                  {item}\n                </li>\n              ))}\n            </ul>\n          </div>\n        ) : null}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n\nenum Keys {\n  UP_ARROW = 'ArrowUp',\n  DOWN_ARROW = 'ArrowDown',\n  ENTER = 'Enter',\n  TAB = 'Tab',\n}\n\nlet id = 0;\n"],"version":3}

package/dist/components/button.js

@@ -0,0 +1,55 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './icon.js';
+
+var ButtonVariant;
+(function (ButtonVariant) {
+  ButtonVariant["Primary"] = "primary";
+  ButtonVariant["Secondary"] = "secondary";
+  ButtonVariant["Warning"] = "warning";
+  ButtonVariant["Text"] = "text";
+  ButtonVariant["Icon"] = "icon";
+})(ButtonVariant || (ButtonVariant = {}));
+
+const buttonCss = "@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}}button.primary{display:inline-flex;align-items:center;justify-content:center;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-size:21px;font-weight:normal;background-color:unset;cursor:pointer;height:60px;padding:15px 18px;white-space:nowrap;min-width:200px;background-color:#09315b;color:#ffffff;border:2px solid #09315b}button.primary:focus{outline:3px solid #ffdd00}button.primary:disabled{cursor:default}button.primary:disabled *{pointer-events:none}button.primary i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}@media (max-width: 1023px){button.primary{min-width:unset;max-width:200px;width:100%;height:50px;padding:10px 18px}}button.primary i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}button.primary:hover{background-color:#03284f;border:2px solid #03284f}button.primary:enabled:active{background-color:#ffffff;border:2px solid #09315b;color:#09315b}button.primary:enabled:active i{color:#09315b}button.primary:enabled:active p{color:#09315b}button.primary:disabled{background-color:#adadad;border:2px solid #adadad}button.secondary{display:inline-flex;align-items:center;justify-content:center;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-size:21px;font-weight:normal;background-color:unset;cursor:pointer;height:60px;padding:15px 18px;white-space:nowrap;min-width:200px;background-color:#ffffff;color:#05284e;border:2px solid #05284e}button.secondary:focus{outline:3px solid #ffdd00}button.secondary:disabled{cursor:default}button.secondary:disabled *{pointer-events:none}button.secondary i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}@media (max-width: 1023px){button.secondary{min-width:unset;max-width:200px;width:100%;height:50px;padding:10px 18px}}button.secondary i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}button.secondary:hover{background-color:#eeeeee;border:2px solid #05284e}button.secondary:enabled:active{background-color:#05284e;border:2px solid #05284e;color:#ffffff}button.secondary:enabled:active i{color:#ffffff}button.secondary:enabled:active p{color:#ffffff}button.secondary:disabled{background-color:#adadad;border:2px solid #adadad}button.secondary i{color:#05284e}button.warning{display:inline-flex;align-items:center;justify-content:center;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-size:21px;font-weight:normal;background-color:unset;cursor:pointer;height:60px;padding:15px 18px;white-space:nowrap;min-width:200px;background-color:#e20d0d;color:#ffffff;border:2px solid #e20d0d}button.warning:focus{outline:3px solid #ffdd00}button.warning:disabled{cursor:default}button.warning:disabled *{pointer-events:none}button.warning i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}@media (max-width: 1023px){button.warning{min-width:unset;max-width:200px;width:100%;height:50px;padding:10px 18px}}button.warning i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}button.warning:hover{background-color:#bd0404;border:2px solid #bd0404}button.warning:enabled:active{background-color:#ffffff;border:2px solid #e20d0d;color:#e20d0d}button.warning:enabled:active i{color:#e20d0d}button.warning:enabled:active p{color:#e20d0d}button.warning:disabled{background-color:#adadad;border:2px solid #adadad}button.warning:disabled>*{opacity:0.5}button.warning i{color:#ffffff}button.text{display:inline-flex;align-items:center;justify-content:center;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-size:21px;font-weight:normal;background-color:unset;cursor:pointer;color:#05284e}button.text:focus{outline:3px solid #ffdd00}button.text:disabled{cursor:default}button.text:disabled *{pointer-events:none}button.text i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}button.text:enabled:active{color:#05284e}button.text:enabled:active i{color:#05284e}button.text:enabled:active p{color:#05284e}button.text:disabled{color:#adadad}button.text:disabled>*{opacity:0.5}button.text:focus{outline-offset:3px}button.text i{color:#05284e}button.icon{display:inline-flex;align-items:center;justify-content:center;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-size:21px;font-weight:normal;background-color:unset;cursor:pointer;min-height:50px;min-width:50px;padding:10px 10px;background-color:var(--button-icon-background-colour, #eeeeee);color:#09315b;border:2px solid #09315b}button.icon:focus{outline:3px solid #ffdd00}button.icon:disabled{cursor:default}button.icon:disabled *{pointer-events:none}button.icon i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}button.icon:enabled:active{background-color:#09315b;color:#ffffff}button.icon:disabled{opacity:0.3}button.icon:active:disabled{background-color:#eeeeee}button.icon i{margin:auto;font-size:unset;color:unset;padding-left:unset}";
+
+const ButtonComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.variant = undefined;
+    this.icon = undefined;
+    this.disabled = false;
+    this.type = 'submit';
+  }
+  render() {
+    return (h("button", { type: this.type, disabled: this.disabled ? true : null, class: this.variant || ButtonVariant.Primary }, h("slot", null), this.icon ? h("admiralty-icon", { "icon-name": this.icon }) : undefined));
+  }
+  static get style() { return buttonCss; }
+}, [4, "admiralty-button", {
+    "variant": [1],
+    "icon": [1],
+    "disabled": [4],
+    "type": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-button", "admiralty-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ButtonComponent);
+      }
+      break;
+    case "admiralty-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ButtonComponent as B, ButtonVariant as a, defineCustomElement as d };
+
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -0,0 +1 @@
+{"file":"button.js","mappings":";;;IAAY;AAAZ,WAAY,aAAa;EACvB,oCAAmB,CAAA;EACnB,wCAAuB,CAAA;EACvB,oCAAmB,CAAA;EACnB,8BAAa,CAAA;EACb,8BAAa,CAAA;AACf,CAAC,EANW,aAAa,KAAb,aAAa;;ACAzB,MAAM,SAAS,GAAG,02KAA02K;;MCS/2K,eAAe;;;;;;oBAaP,KAAK;gBAKsB,QAAQ;;EAEtD,MAAM;IACJ,QACE,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,aAAa,CAAC,OAAO,IAC1G,eAAa,EACZ,IAAI,CAAC,IAAI,GAAG,mCAA2B,IAAI,CAAC,IAAI,GAAmB,GAAG,SAAS,CACzE,EACT;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/button/button.types.ts","./src/components/button/button.scss?tag=admiralty-button","./src/components/button/button.tsx"],"sourcesContent":["export enum ButtonVariant {\r\n  Primary = 'primary',\r\n  Secondary = 'secondary',\r\n  Warning = 'warning',\r\n  Text = 'text',\r\n  Icon = 'icon',\r\n}\r\n","@use \"../../scss/base/responsive\";\r\n\r\n@use \"../../scss/vars/colours\";\r\n@use \"../../scss/vars/typography\";\r\n\r\n@mixin button-defaults {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  font-family: typography.$font-family;\r\n  font-size: typography.$font-size-normal;\r\n  line-height: typography.$font-line-height-normal;\r\n  font-size: 21px;\r\n  font-weight: typography.$font-weight-medium;\r\n  background-color: unset;\r\n  cursor: pointer;\r\n\r\n  &:focus {\r\n    outline: 3px solid colours.$colour-utility-focus;\r\n  }\r\n\r\n  &:disabled {\r\n    cursor: default;\r\n    * {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  i {\r\n    display: inline-block;\r\n    font-size: 24px;\r\n    color: colours.$colour-button-icon;\r\n    padding-left: 15px;\r\n  }\r\n}\r\n\r\n@mixin button {\r\n  @include button-defaults;\r\n  height: 60px;\r\n  padding: 15px 18px;\r\n  white-space: nowrap;\r\n  min-width: 200px;\r\n\r\n  @include responsive.not-desktop {\r\n    min-width: unset;\r\n    max-width: 200px;\r\n    width: 100%;\r\n    height: 50px;\r\n    padding: 10px 18px;\r\n  }\r\n\r\n  i {\r\n    display: inline-block;\r\n    font-size: 24px;\r\n    color: colours.$colour-button-icon;\r\n    padding-left: 15px;\r\n  }\r\n}\r\n\r\n/* Primary Buttons */\r\nbutton.primary {\r\n  @include button;\r\n  background-color: colours.$colour-button-standard;\r\n  color: colours.$colour-button-text;\r\n  border: 2px solid colours.$colour-button-standard;\r\n\r\n  &:hover {\r\n    background-color: colours.$colour-button-hover;\r\n    border: 2px solid colours.$colour-button-hover;\r\n  }\r\n\r\n  &:enabled:active {\r\n    background-color: colours.$colour-button-selected;\r\n    border: 2px solid colours.$colour-button-border-selected;\r\n    color: colours.$colour-button-icon-selected;\r\n\r\n    i {\r\n      color: colours.$colour-button-icon-selected;\r\n    }\r\n\r\n    p {\r\n      color: colours.$colour-button-text-selected;\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    background-color: colours.$colour-button-deselected;\r\n    border: 2px solid colours.$colour-button-deselected;\r\n  }\r\n}\r\n\r\n/* Secondary Buttons */\r\nbutton.secondary {\r\n  @include button;\r\n  background-color: colours.$colour-button-secondary-standard;\r\n  color: colours.$colour-button-secondary-text;\r\n  border: 2px solid colours.$colour-button-secondary-border-standard;\r\n\r\n  &:hover {\r\n    background-color: colours.$colour-button-secondary-hover;\r\n    border: 2px solid colours.$colour-button-secondary-border-hover;\r\n  }\r\n\r\n  &:enabled:active {\r\n    background-color: colours.$colour-button-secondary-selected;\r\n    border: 2px solid colours.$colour-button-secondary-selected;\r\n    color: colours.$colour-button-secondary-icon-selected;\r\n\r\n    i {\r\n      color: colours.$colour-button-secondary-icon-selected;\r\n    }\r\n\r\n    p {\r\n      color: colours.$colour-button-secondary-text-selected;\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    background-color: colours.$colour-button-secondary-deselected;\r\n    border: 2px solid colours.$colour-button-secondary-deselected;\r\n  }\r\n\r\n  i {\r\n    color: colours.$colour-button-secondary-icon;\r\n  }\r\n}\r\n\r\n/* Warning Buttons */\r\nbutton.warning {\r\n  @include button;\r\n  background-color: colours.$colour-utility-error;\r\n  color: colours.$colour-white;\r\n  border: 2px solid colours.$colour-utility-error;\r\n\r\n  &:hover {\r\n    background-color: colours.darken(colours.$colour-utility-error);\r\n    border: 2px solid colours.darken(colours.$colour-utility-error);\r\n  }\r\n\r\n  &:enabled:active {\r\n    background-color: colours.$colour-white;\r\n    border: 2px solid colours.$colour-utility-error;\r\n    color: colours.$colour-utility-error;\r\n\r\n    i {\r\n      color: colours.$colour-utility-error;\r\n    }\r\n\r\n    p {\r\n      color: colours.$colour-utility-error;\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    background-color: colours.$colour-button-secondary-deselected;\r\n    border: 2px solid colours.$colour-button-secondary-deselected;\r\n    & > * {\r\n      opacity: 0.5;\r\n    }\r\n  }\r\n\r\n  i {\r\n    color: colours.$colour-white;\r\n  }\r\n}\r\n\r\n/* Text Buttons */\r\nbutton.text {\r\n  @include button-defaults;\r\n  color: colours.$colour-button-secondary-text;\r\n\r\n  &:enabled:active {\r\n    color: colours.$colour-button-secondary-text;\r\n\r\n    i {\r\n      color: colours.$colour-button-secondary-text;\r\n    }\r\n\r\n    p {\r\n      color: colours.$colour-button-secondary-text;\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    color: colours.$colour-button-secondary-deselected;\r\n    & > * {\r\n      opacity: 0.5;\r\n    }\r\n  }\r\n\r\n  &:focus {\r\n    outline-offset: 3px;\r\n  }\r\n\r\n  i {\r\n    color: colours.$colour-button-secondary-icon;\r\n  }\r\n}\r\n\r\n/* Icon Buttons */\r\nbutton.icon {\r\n  @include button-defaults;\r\n  min-height: 50px;\r\n  min-width: 50px;\r\n  padding: 10px 10px;\r\n\r\n  background-color: var(--button-icon-background-colour, colours.$colour-bg-grey);\r\n  color: colours.$colour-admiralty-blue;\r\n  border: 2px solid colours.$colour-admiralty-blue;\r\n\r\n  &:enabled:active {\r\n    background-color: colours.$colour-admiralty-blue;\r\n    color: colours.$colour-white;\r\n  }\r\n\r\n  &:disabled {\r\n    opacity: 0.3;\r\n  }\r\n\r\n  &:active:disabled {\r\n    background-color: colours.$colour-bg-grey;\r\n  }\r\n\r\n  i {\r\n    margin: auto;\r\n    font-size: unset;\r\n    color: unset;\r\n    padding-left: unset;\r\n  }\r\n}\r\n","import { Component, Prop, h } from '@stencil/core';\nimport { ButtonVariant } from './button.types';\nimport { IconName } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n  tag: 'admiralty-button',\n  styleUrl: 'button.scss',\n  shadow: false,\n})\nexport class ButtonComponent {\n  /**\n   * The type of button to render. Valid values are `primary`, `secondary`, `warning`, `text` and `icon`.\n   * Default value is `primary`.\n   */\n  @Prop() variant: ButtonVariant;\n  /**\n   * When passed Font Awesome Icon name, then an icon will be rendered.\n   */\n  @Prop() icon: IconName;\n  /**\n   * Determines whether the button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop() disabled = false;\n  /**\n   * The default behavior of the button. Valid values are `button`, `submit` and `reset`.\n   * Default value is `submit`.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'submit';\n\n  render() {\n    return (\n      <button type={this.type} disabled={this.disabled ? true : null} class={this.variant || ButtonVariant.Primary}>\n        <slot></slot>\n        {this.icon ? <admiralty-icon icon-name={this.icon}></admiralty-icon> : undefined}\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/components/expansion.js

@@ -0,0 +1,62 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { g as faChevronUp, h as faChevronDown, d as defineCustomElement$1 } from './icon.js';
+
+const expansionCss = "admiralty-expansion section.expansion{padding:2px 0;border-bottom:1px solid transparent}admiralty-expansion section.expansion.bordered{border-bottom:1px solid #d8d8d8}admiralty-expansion section.expansion .expansion-content{display:none;max-height:0;overflow:visible}admiralty-expansion section.expansion.expanded .expansion-content{display:block;max-height:initial;padding-bottom:12px}admiralty-expansion section.expansion button{background-color:transparent;border:none;height:initial;min-width:unset;max-width:unset;white-space:unset;color:initial;font-size:16px;cursor:pointer;margin:10px 0 22px;padding:0;display:flex;align-items:baseline;width:100%;text-align:left;position:relative}admiralty-expansion section.expansion button .expansion-heading-icon{color:#09315b;margin-left:30px}admiralty-expansion section.expansion button:focus{outline:none}admiralty-expansion section.expansion button h3,admiralty-expansion section.expansion button button{flex-grow:1;margin-bottom:0}admiralty-expansion section.expansion button h3.expansion-heading-right-align,admiralty-expansion section.expansion button button.expansion-heading-right-align{text-align:right}admiralty-expansion section.expansion button:focus h3::before,admiralty-expansion section.expansion button:focus button::before{content:\"\";position:absolute;top:0;bottom:0;right:-3px;left:-3px;box-shadow:0 0 0 3px #ffdd00}";
+
+let nextId = 0;
+const ExpansionComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.toggled = createEvent(this, "toggled", 7);
+    this.id = `admiralty-expansion-${++nextId}`;
+    this.headerId = `${this.id}-header`;
+    this.contentId = `${this.id}-content`;
+    this.heading = undefined;
+    this.expanded = false;
+    this.alignHeadingRight = false;
+    this.hideBorder = false;
+  }
+  onToggle() {
+    this.expanded = !this.expanded;
+    this.toggled.emit(this.expanded);
+  }
+  getExpansionIcon() {
+    return this.expanded ? faChevronUp : faChevronDown;
+  }
+  render() {
+    return (h("section", { class: {
+        expansion: true,
+        expanded: this.expanded,
+        bordered: !this.hideBorder,
+      } }, h("button", { id: this.headerId, type: "button", "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "expansion-heading-button", onClick: this.onToggle.bind(this) }, h("h3", { class: { 'expansion-heading-right-align': this.alignHeadingRight } }, this.heading), h("span", { class: "visually-hidden" }, ", ", this.expanded ? 'Hide' : 'Show', " this section"), h("admiralty-icon", { class: "expansion-heading-icon", "icon-name": this.getExpansionIcon().iconName })), h("div", { class: "expansion-content", id: this.contentId, "aria-labelledby": this.headerId, hidden: !this.expanded }, h("slot", null))));
+  }
+  static get style() { return expansionCss; }
+}, [4, "admiralty-expansion", {
+    "heading": [1],
+    "expanded": [1540],
+    "alignHeadingRight": [4, "align-heading-right"],
+    "hideBorder": [4, "hide-border"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-expansion", "admiralty-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-expansion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ExpansionComponent);
+      }
+      break;
+    case "admiralty-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ExpansionComponent as E, defineCustomElement as d };
+
+//# sourceMappingURL=expansion.js.map

package/dist/components/expansion.js.map

@@ -0,0 +1 @@
+{"file":"expansion.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,w2CAAw2C;;ACI73C,IAAI,MAAM,GAAG,CAAC,CAAC;MAOF,kBAAkB;;;;;IA0B7B,OAAE,GAAW,uBAAuB,EAAE,MAAM,EAAE,CAAC;IAE/C,aAAQ,GAAW,GAAG,IAAI,CAAC,EAAE,SAAS,CAAC;IACvC,cAAS,GAAW,GAAG,IAAI,CAAC,EAAE,UAAU,CAAC;;oBApBU,KAAK;6BAK5B,KAAK;sBAKZ,KAAK;;EAY1B,QAAQ;IACN,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GAClC;EAED,gBAAgB;IACd,OAAO,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,aAAa,CAAC;GACpD;EAED,MAAM;IACJ,QACE,eACE,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU;OAC3B,IAED,cAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ,mBAAgB,IAAI,CAAC,QAAQ,mBAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IACtK,UAAI,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAG,IAAI,CAAC,OAAO,CAAM,EAC3F,YAAM,KAAK,EAAC,iBAAiB,UAAI,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,MAAM,kBAAqB,EACrF,sBAAgB,KAAK,EAAC,wBAAwB,eAAY,IAAI,CAAC,gBAAgB,EAAE,CAAC,QAAQ,GAAmB,CACtG,EACT,WAAK,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS,qBAAmB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IACvG,eAAa,CACT,CACE,EACV;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/expansion/expansion.scss?tag=admiralty-expansion","./src/components/expansion/expansion.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n\nadmiralty-expansion {\n  section.expansion {\n    padding: 2px 0;\n    border-bottom: 1px solid transparent;\n    &.bordered {\n      border-bottom: 1px solid colours.$colour-divider;\n    }\n\n    .expansion-content {\n      display: none;\n      max-height: 0;\n      overflow: visible;\n    }\n    &.expanded .expansion-content {\n      display: block;\n      max-height: initial;\n      padding-bottom: 12px;\n    }\n\n    button {\n      @extend h3;\n      background-color: transparent;\n      border: none;\n      height: initial;\n      min-width: unset;\n      max-width: unset;\n      white-space: unset;\n      color: initial;\n      font-size: 16px;\n      cursor: pointer;\n      margin: 10px 0 22px;\n      padding: 0;\n      display: flex;\n      align-items: baseline;\n      width: 100%;\n      text-align: left;\n      position: relative;\n\n      .expansion-heading-icon {\n        color: colours.$colour-admiralty-blue;\n        margin-left: 30px;\n      }\n      &:focus {\n        outline: none;\n      }\n      h3 {\n        flex-grow: 1;\n        margin-bottom: 0;\n\n        &.expansion-heading-right-align {\n          text-align: right;\n        }\n      }\n      &:focus h3::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        right: -3px;\n        left: -3px;\n        box-shadow: 0 0 0 3px colours.$colour-utility-focus;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\n\nlet nextId = 0;\n\n@Component({\n  tag: 'admiralty-expansion',\n  styleUrl: 'expansion.scss',\n  shadow: false,\n})\nexport class ExpansionComponent {\n  /**\n   * The text to display in the heading of the expansion component.\n   */\n  @Prop() heading: string;\n\n  /**\n   * Whether the component is expanded.\n   */\n  @Prop({ mutable: true, reflect: true }) expanded = false;\n\n  /**\n   * CWhether the heading should be right aligned.\n   */\n  @Prop() alignHeadingRight = false;\n\n  /**\n   * Whether the border on the bottom of the component should be hidden.\n   */\n  @Prop() hideBorder = false;\n\n  /**\n   * The event that is dispatched when the expanded status is toggled.\n   */\n  @Event() toggled: EventEmitter<boolean>;\n\n  id: string = `admiralty-expansion-${++nextId}`;\n\n  headerId: string = `${this.id}-header`;\n  contentId: string = `${this.id}-content`;\n\n  onToggle() {\n    this.expanded = !this.expanded;\n    this.toggled.emit(this.expanded);\n  }\n\n  getExpansionIcon(): IconDefinition {\n    return this.expanded ? faChevronUp : faChevronDown;\n  }\n\n  render() {\n    return (\n      <section\n        class={{\n          expansion: true,\n          expanded: this.expanded,\n          bordered: !this.hideBorder,\n        }}\n      >\n        <button id={this.headerId} type=\"button\" aria-expanded={this.expanded} aria-controls={this.contentId} class=\"expansion-heading-button\" onClick={this.onToggle.bind(this)}>\n          <h3 class={{ 'expansion-heading-right-align': this.alignHeadingRight }}>{this.heading}</h3>\n          <span class=\"visually-hidden\">, {this.expanded ? 'Hide' : 'Show'} this section</span>\n          <admiralty-icon class=\"expansion-heading-icon\" icon-name={this.getExpansionIcon().iconName}></admiralty-icon>\n        </button>\n        <div class=\"expansion-content\" id={this.contentId} aria-labelledby={this.headerId} hidden={!this.expanded}>\n          <slot></slot>\n        </div>\n      </section>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hint.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const hintCss = "p{margin-top:0;margin-bottom:6px;display:block;font-weight:300}p.disabled{color:#adadad}";
+
+const HintComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.disabled = undefined;
+  }
+  render() {
+    return (h("p", { class: { disabled: this.disabled } }, h("slot", null)));
+  }
+  static get style() { return hintCss; }
+}, [1, "admiralty-hint", {
+    "disabled": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-hint"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-hint":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HintComponent);
+      }
+      break;
+  } });
+}
+
+export { HintComponent as H, defineCustomElement as d };
+
+//# sourceMappingURL=hint.js.map

package/dist/components/hint.js.map

@@ -0,0 +1 @@
+{"file":"hint.js","mappings":";;AAAA,MAAM,OAAO,GAAG,0FAA0F;;MCW7F,aAAa;;;;;;;EAMxB,MAAM;IACJ,QACE,SAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IACnC,eAAa,CACX,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/hint/hint.scss?tag=admiralty-hint&encapsulation=shadow","./src/components/hint/hint.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\r\n@use \"../../scss/vars/typography\";\r\n\r\np {\r\n  margin-top: 0;\r\n  margin-bottom: 6px;\r\n  display: block;\r\n  font-weight: typography.$font-weight-light;\r\n\r\n  &.disabled {\r\n    color: colours.$colour-textinput-text-disabled;\r\n  }\r\n}\r\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  shadow: 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"],"version":3}