@ukho/admiralty-core 0.0.0

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

@@ -0,0 +1,294 @@
+import { Host, h } from '@stencil/core';
+export class TypeAheadComponent {
+  constructor() {
+    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)));
+  }
+  static get is() { return "admiralty-type-ahead"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["type-ahead.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["type-ahead.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the textinput"
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text content of the label for the input box"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The placeholder text for the input field"
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "resultsOnInitFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Optional property to show results when input box is initally focused"
+        },
+        "attribute": "results-on-init-focus",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "filterResult": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectionChanged",
+        "name": "selectionChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Optional function that will be executed when the user selects an item from the typeahead"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "valueChanged",
+        "name": "valueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event that is fired whenever the value of the typeahead changes\ne.g. selection from the dropdown or manually typed entry"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}
+var Keys;
+(function (Keys) {
+  Keys["UP_ARROW"] = "ArrowUp";
+  Keys["DOWN_ARROW"] = "ArrowDown";
+  Keys["ENTER"] = "Enter";
+  Keys["TAB"] = "Tab";
+})(Keys || (Keys = {}));
+let id = 0;
+//# sourceMappingURL=type-ahead.js.map

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

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

package/dist/collection/components/type-ahead-item/type-ahead-item.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,43 @@
+import { Host, h } from '@stencil/core';
+export class AdmiraltyTypeAheadItem {
+  constructor() {
+    this.value = undefined;
+  }
+  render() {
+    return h(Host, null);
+  }
+  static get is() { return "admiralty-type-ahead-item"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["type-ahead-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["type-ahead-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=type-ahead-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"type-ahead-item.js","sourceRoot":"","sources":["../../../src/components/type-ahead-item/type-ahead-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,sBAAsB;;;;EAGjC,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/index.js

@@ -0,0 +1,2 @@
+//export { Components, JSX } from './components';
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,iDAAiD","sourcesContent":["//export { Components, JSX } from './components';\r\n"]}

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

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

package/dist/components/admiralty-breadcrumb.js

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { f as faChevronRight, d as defineCustomElement$2 } from './icon.js';
+
+const breadcrumbCss = "@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}}:host{display:flex;align-items:center}.breadcrumb-icon{margin:0 10px;font-size:12px}a{display:inline-block;font-size:14px;font-weight:300;text-decoration:none;color:#333333;margin:10px 2px}a:hover{color:#09315b}a.active{color:#09315b;font-weight:normal}";
+
+const BreadcrumbComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.active = false;
+    this.first = undefined;
+    this.href = undefined;
+  }
+  render() {
+    return (h(Host, null, !this.first && h("admiralty-icon", { class: "breadcrumb-icon", "icon-name": faChevronRight.iconName }), h("a", { class: { active: this.active }, href: this.href || '#' }, h("slot", null))));
+  }
+  static get style() { return breadcrumbCss; }
+}, [1, "admiralty-breadcrumb", {
+    "active": [4],
+    "first": [4],
+    "href": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-breadcrumb", "admiralty-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-breadcrumb":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BreadcrumbComponent);
+      }
+      break;
+    case "admiralty-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const AdmiraltyBreadcrumb = BreadcrumbComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyBreadcrumb, defineCustomElement };
+
+//# sourceMappingURL=admiralty-breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"file":"admiralty-breadcrumb.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,uvBAAuvB;;MCQhwB,mBAAmB;;;;;kBAMb,KAAK;;;;EAatB,MAAM;IACJ,QACE,EAAC,IAAI,QACF,CAAC,IAAI,CAAC,KAAK,IAAI,sBAAgB,KAAK,EAAC,iBAAiB,eAAY,cAAc,CAAC,QAAQ,GAAmB,EAC7G,SAAG,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,GAAG,IACvD,eAAa,CACX,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/breadcrumb/breadcrumb.scss?tag=admiralty-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"../../scss/base/responsive\";\r\n\r\n@use \"../../scss/vars/colours\";\r\n@use \"../../scss/vars/typography\";\r\n\r\n:host {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.breadcrumb-icon {\r\n  margin: 0 10px;\r\n  font-size: 12px;\r\n}\r\n\r\na {\r\n  display: inline-block;\r\n  font-size: 14px;\r\n  font-weight: typography.$font-weight-light;\r\n  text-decoration: none;\r\n  color: colours.$colour-nav-item;\r\n  margin: 10px 2px;\r\n\r\n  &:hover {\r\n    color: colours.$colour-admiralty-blue;\r\n  }\r\n\r\n  &.active {\r\n    color: colours.$colour-admiralty-blue;\r\n    font-weight: typography.$font-weight-medium;\r\n  }\r\n}\r\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  tag: 'admiralty-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true,\n})\nexport class BreadcrumbComponent {\n  /**\n   * When `true` the breadcrumb will by styled to show that it is the\n   * currently active breadcrumb. Defaults to `true` for the\n   * last breadcrumb if it is not set on any.\n   */\n  @Prop() active = false;\n\n  /**\n   * @internal\n   * When set to `true` the breadcrumb will not be prefixed with a chevron.\n   */\n  @Prop() first!: boolean;\n\n  /**\n   * Contains a URL or a URL fragment that the hyperlink points to.\n   */\n  @Prop() href: string | undefined;\n\n  render() {\n    return (\n      <Host>\n        {!this.first && <admiralty-icon class=\"breadcrumb-icon\" icon-name={faChevronRight.iconName}></admiralty-icon>}\n        <a class={{ active: this.active }} href={this.href || '#'}>\n          <slot></slot>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/admiralty-breadcrumbs.js

@@ -0,0 +1,62 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const breadcrumbsCss = ".breadcrumbs{width:100%;box-sizing:border-box;display:inline-flex;border-bottom:1px solid #d8d8d8;background-color:#ffffff;padding:0 20px}";
+
+const BreadcrumbsComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.breadcrumbsInit = () => {
+      this.setActiveBreadcrumb();
+    };
+    this.setActiveBreadcrumb = () => {
+      const breadcrumbs = this.getBreadcrumbs();
+      // Check if an active breadcrumb exists already
+      const active = breadcrumbs.find(breadcrumb => breadcrumb.active);
+      // Set the active status
+      for (const breadcrumb of breadcrumbs) {
+        const isFirst = breadcrumb === breadcrumbs[0];
+        const isLast = breadcrumb === breadcrumbs[breadcrumbs.length - 1];
+        if (isFirst) {
+          breadcrumb.first = true;
+        }
+        // When no active breadcrumb, set the last one to active
+        if (!active && isLast) {
+          breadcrumb.active = true;
+        }
+      }
+    };
+    this.getBreadcrumbs = () => {
+      return Array.from(this.el.querySelectorAll('admiralty-breadcrumb'));
+    };
+  }
+  componentWillLoad() {
+    this.breadcrumbsInit();
+  }
+  render() {
+    return (h("nav", { class: "breadcrumbs", "aria-label": "breadcrumbs" }, h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return breadcrumbsCss; }
+}, [1, "admiralty-breadcrumbs"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-breadcrumbs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-breadcrumbs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BreadcrumbsComponent);
+      }
+      break;
+  } });
+}
+
+const AdmiraltyBreadcrumbs = BreadcrumbsComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyBreadcrumbs, defineCustomElement };
+
+//# sourceMappingURL=admiralty-breadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"file":"admiralty-breadcrumbs.js","mappings":";;AAAA,MAAM,cAAc,GAAG,4IAA4I;;MCOtJ,oBAAoB;EALjC;;;;IAYU,oBAAe,GAAG;MACxB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B,CAAC;IAEM,wBAAmB,GAAG;MAC5B,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;;MAG1C,MAAM,MAAM,GAAG,WAAW,CAAC,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC;;MAGjE,KAAK,MAAM,UAAU,IAAI,WAAW,EAAE;QACpC,MAAM,OAAO,GAAG,UAAU,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC;QAC9C,MAAM,MAAM,GAAG,UAAU,KAAK,WAAW,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAElE,IAAI,OAAO,EAAE;UACX,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC;SACzB;;QAGD,IAAI,CAAC,MAAM,IAAI,MAAM,EAAE;UACrB,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC;SAC1B;OACF;KACF,CAAC;IAEM,mBAAc,GAAG;MACvB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC,CAAC;KACrE,CAAC;GASH;EAzCC,iBAAiB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAgCD,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,aAAa,gBAAY,aAAa,IAC/C,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/breadcrumbs/breadcrumbs.scss?tag=admiralty-breadcrumbs&encapsulation=shadow","./src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\r\n\r\n.breadcrumbs {\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  display: inline-flex;\r\n  border-bottom: 1px solid colours.$colour-divider;\r\n  background-color: colours.$colour-bg;\r\n  padding: 0 20px;\r\n}\r\n","import { Component, Element, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-breadcrumbs',\n  styleUrl: 'breadcrumbs.scss',\n  shadow: true,\n})\nexport class BreadcrumbsComponent {\n  @Element() el!: HTMLElement;\n\n  componentWillLoad() {\n    this.breadcrumbsInit();\n  }\n\n  private breadcrumbsInit = () => {\n    this.setActiveBreadcrumb();\n  };\n\n  private setActiveBreadcrumb = () => {\n    const breadcrumbs = this.getBreadcrumbs();\n\n    // Check if an active breadcrumb exists already\n    const active = breadcrumbs.find(breadcrumb => breadcrumb.active);\n\n    // Set the active status\n    for (const breadcrumb of breadcrumbs) {\n      const isFirst = breadcrumb === breadcrumbs[0];\n      const isLast = breadcrumb === breadcrumbs[breadcrumbs.length - 1];\n\n      if (isFirst) {\n        breadcrumb.first = true;\n      }\n\n      // When no active breadcrumb, set the last one to active\n      if (!active && isLast) {\n        breadcrumb.active = true;\n      }\n    }\n  };\n\n  private getBreadcrumbs = (): HTMLAdmiraltyBreadcrumbElement[] => {\n    return Array.from(this.el.querySelectorAll('admiralty-breadcrumb'));\n  };\n\n  render() {\n    return (\n      <nav class=\"breadcrumbs\" aria-label=\"breadcrumbs\">\n        <slot></slot>\n      </nav>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/admiralty-button.js

@@ -0,0 +1,8 @@
+import { B as ButtonComponent, d as defineCustomElement$1 } from './button.js';
+
+const AdmiraltyButton = ButtonComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyButton, defineCustomElement };
+
+//# sourceMappingURL=admiralty-button.js.map

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

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

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

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

package/dist/components/admiralty-card.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const cardCss = "@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}}admiralty-card .card{display:flex;flex-direction:column;border:1px solid #d8d8d8}admiralty-card .card>h6{height:60px;line-height:60px;border:1px solid #09315b;color:#ffffff;background-color:#09315b;margin:0;padding:0 30px}@media (max-width: 1023px){admiralty-card .card>h6{padding:0px 18px;height:48px;line-height:48px}}admiralty-card .card>div{border-top:none;flex-grow:1;padding:30px}@media (max-width: 1023px){admiralty-card .card>div{padding:24px 18px}}admiralty-card .text-input-form .text-input-wrap{margin-bottom:30px}admiralty-card .text-input-form .text-input-wrap:last-child{margin-bottom:0}";
+
+const CardComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.heading = undefined;
+  }
+  render() {
+    return (h("section", { class: "card" }, this.heading ? h("h6", null, this.heading) : null, h("div", null, h("slot", null))));
+  }
+  static get style() { return cardCss; }
+}, [4, "admiralty-card", {
+    "heading": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CardComponent);
+      }
+      break;
+  } });
+}
+
+const AdmiraltyCard = CardComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyCard, defineCustomElement };
+
+//# sourceMappingURL=admiralty-card.js.map

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

@@ -0,0 +1 @@
+{"file":"admiralty-card.js","mappings":";;AAAA,MAAM,OAAO,GAAG,mlCAAmlC;;MCOtlC,aAAa;;;;;;EAMxB,MAAM;IACJ,QACE,eAAS,KAAK,EAAC,MAAM,IAClB,IAAI,CAAC,OAAO,GAAG,cAAK,IAAI,CAAC,OAAO,CAAM,GAAG,IAAI,EAC9C,eACE,eAAa,CACT,CACE,EACV;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/card/card.scss?tag=admiralty-card","./src/components/card/card.tsx"],"sourcesContent":["@use \"../../scss/base/responsive\";\n\n@use \"../../scss/vars/colours\";\n\nadmiralty-card {\n  .card {\n    display: flex;\n    flex-direction: column;\n    border: 1px solid colours.$colour-divider;\n\n    & > h6 {\n      height: 60px;\n      line-height: 60px;\n      border: 1px solid colours.$colour-admiralty-blue;\n      color: colours.$colour-white;\n      background-color: colours.$colour-admiralty-blue;\n      margin: 0;\n      padding: 0 30px;\n      @include responsive.not-desktop {\n        padding: 0px 18px;\n        height: 48px;\n        line-height: 48px;\n      }\n    }\n\n    & > div {\n      border-top: none;\n      flex-grow: 1;\n      padding: 30px;\n      @include responsive.not-desktop {\n        padding: 24px 18px;\n      }\n    }\n  }\n\n  .text-input-form {\n    .text-input-wrap {\n      margin-bottom: 30px;\n    }\n\n    .text-input-wrap:last-child {\n      margin-bottom: 0;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-card',\n  styleUrl: 'card.scss',\n  shadow: false,\n})\nexport class CardComponent {\n  /**\n   * The title of the card.\n   */\n  @Prop() heading: string;\n\n  render() {\n    return (\n      <section class=\"card\">\n        {this.heading ? <h6>{this.heading}</h6> : null}\n        <div>\n          <slot></slot>\n        </div>\n      </section>\n    );\n  }\n}\n"],"version":3}

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

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