@ukho/admiralty-core 0.0.0

package/dist/cjs/admiralty-input.cjs.entry.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+
+const inputCss = ".text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input input.sc-admiralty-input{border-color:#333333;border-width:2px;border-style:solid;color:#333333;font-size:18px;line-height:24px;font-weight:300;padding:12px}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-input-container.sc-admiralty-input .form-field.sc-admiralty-input{background-color:#ffffff}.text-input-container.sc-admiralty-input .form-field.sc-admiralty-input:focus-visible{outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-input-container.sc-admiralty-input .form-field.invalid.sc-admiralty-input{border-color:#e20d0d}.text-input-container.sc-admiralty-input .form-field.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-input-container.sc-admiralty-input .form-field.disabled.sc-admiralty-input{color:#adadad;border-color:#adadad;background:#ffffff}.text-input-container.sc-admiralty-input admiralty-input-error.sc-admiralty-input{margin-top:6px}";
+
+const InputComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.admiraltyChange = index.createEvent(this, "admiraltyChange", 7);
+    this.inputId = `admiralty-input-${++nextId}`;
+    this.onInput = (ev) => {
+      const input = ev.target;
+      if (input) {
+        this.value = input.value || '';
+      }
+    };
+    this.name = this.inputId;
+    this.label = undefined;
+    this.hint = undefined;
+    this.disabled = false;
+    this.type = 'text';
+    this.placeholder = undefined;
+    this.width = undefined;
+    this.required = false;
+    this.invalid = false;
+    this.invalidMessage = undefined;
+    this.autocomplete = 'off';
+    this.value = '';
+  }
+  /**
+   * Update the native input element when the value changes
+   */
+  valueChanged() {
+    const nativeInput = this.nativeInput;
+    const value = this.getValue();
+    if (nativeInput && nativeInput.value !== value) {
+      nativeInput.value = value;
+    }
+    this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });
+  }
+  getValue() {
+    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
+  }
+  render() {
+    const value = this.getValue();
+    return (index.h("div", { class: "text-input-container" }, this.label ? (index.h("admiralty-label", { disabled: this.disabled, for: this.inputId }, this.label)) : null, this.hint ? index.h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, index.h("input", { ref: input => (this.nativeInput = input), disabled: this.disabled, id: this.inputId, name: this.name, type: this.type, value: value, onInput: this.onInput, placeholder: this.placeholder, autoComplete: this.autocomplete, required: this.required, style: {
+        maxWidth: this.width ? `${this.width}px` : null,
+      } }), this.invalid ? index.h("admiralty-input-error", null, this.invalidMessage) : null));
+  }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+};
+let nextId = 0;
+InputComponent.style = inputCss;
+
+exports.admiralty_input = InputComponent;
+
+//# sourceMappingURL=admiralty-input.cjs.entry.js.map

package/dist/cjs/admiralty-input.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-input.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,0nCAA0nC;;MCe9nC,cAAc;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAkFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBAhFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;oBAe1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACpG;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACEA,iBAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACTA,6BAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAGA,4BAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzFA,mBACE,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAChD,GACD,EACD,IAAI,CAAC,OAAO,GAAGA,uCAAwB,IAAI,CAAC,cAAc,CAAyB,GAAG,IAAI,CACvF,EACN;GACH;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":["h"],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/vars/typography\";\n\n.text-input-container {\n  display: flex;\n  flex-direction: column;\n\n  input {\n    border-color: colours.$colour-text;\n    border-width: 2px;\n    border-style: solid;\n    color: colours.$colour-text;\n    font-size: 18px;\n    line-height: 24px;\n    font-weight: typography.$font-weight-light;\n\n    padding: 12px;\n\n    &:focus {\n      outline-offset: unset;\n      outline: 3px solid colours.$colour-utility-focus;\n      box-shadow: colours.$colour-text inset 0 0 0 2px;\n    }\n  }\n\n  .form-field {\n    background-color: colours.$colour-white;\n\n    &:focus-visible {\n      outline: 3px solid colours.$colour-utility-focus;\n      box-shadow: colours.$colour-text inset 0 0 0 2px;\n    }\n\n    &.invalid {\n      border-color: colours.$colour-utility-error;\n\n      &:focus-visible {\n        border-color: unset;\n        outline: 3px solid colours.$colour-utility-focus;\n      }\n    }\n\n    &.disabled {\n      color: colours.$colour-textinput-text-disabled;\n      border-color: colours.$colour-textinput-border-disabled;\n      background: colours.$colour-white;\n    }\n  }\n\n  admiralty-input-error {\n    margin-top: 6px;\n  }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n  tag: 'admiralty-input',\n  styleUrl: 'input.scss',\n  scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n  inputId: string = `admiralty-input-${++nextId}`;\n\n  private nativeInput?: HTMLInputElement;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * The label which will be used above the input to describe the input.\n   */\n  @Prop() label: string;\n\n  /**\n   * The hint which will be used under the label to describe the input.\n   */\n  @Prop() hint: string;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The input type, options are: `text | date | time | email | password | tel | url`\n   */\n  @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * The placeholder text to show in the input\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * The maximum width for the input field.\n   */\n  @Prop() width: number;\n\n  /**\n   * This dictates whether the input is required or not\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether to show the input in an invalid state\n   */\n  @Prop() invalid: boolean = false;\n\n  /**\n   * The message to show when the input is invalid\n   */\n  @Prop() invalidMessage: string;\n\n  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: string = 'off';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | number | null = '';\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyChange: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n    if (nativeInput && nativeInput.value !== value) {\n      nativeInput.value = value;\n    }\n    this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n  }\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n  };\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  render() {\n    const value = this.getValue();\n    return (\n      <div class=\"text-input-container\">\n        {this.label ? (\n          <admiralty-label disabled={this.disabled} for={this.inputId}>\n            {this.label}\n          </admiralty-label>\n        ) : null}\n        {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n        <input\n          ref={input => (this.nativeInput = input)}\n          disabled={this.disabled}\n          id={this.inputId}\n          name={this.name}\n          type={this.type}\n          value={value}\n          onInput={this.onInput}\n          placeholder={this.placeholder}\n          autoComplete={this.autocomplete}\n          required={this.required}\n          style={{\n            maxWidth: this.width ? `${this.width}px` : null,\n          }}\n        />\n        {this.invalid ? <admiralty-input-error>{this.invalidMessage}</admiralty-input-error> : null}\n      </div>\n    );\n  }\n}\nlet nextId = 0;\n"],"version":3}

package/dist/cjs/admiralty-link.cjs.entry.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+
+const LinkComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.href = undefined;
+    this.newTab = false;
+  }
+  render() {
+    return (index.h("a", { href: this.href, target: this.newTab ? '_blank' : '_self' }, index.h("slot", null)));
+  }
+};
+
+exports.admiralty_link = LinkComponent;
+
+//# sourceMappingURL=admiralty-link.cjs.entry.js.map

package/dist/cjs/admiralty-link.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-link.entry.cjs.js","mappings":";;;;;;MAMa,aAAa;;;;kBAQP,KAAK;;EAEtB,MAAM;IACJ,QACEA,eAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,OAAO,IAC1DA,qBAAa,CACX,EACJ;GACH;;;;;","names":["h"],"sources":["./src/components/link/link.tsx"],"sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-link',\n  shadow: false,\n})\nexport class LinkComponent {\n  /**\n   * The URL that the link will navigate to.\n   */\n  @Prop() href: string;\n  /**\n   * Whether to open the URL in a new tab.\n   */\n  @Prop() newTab = false;\n\n  render() {\n    return (\n      <a href={this.href} target={this.newTab ? '_blank' : '_self'}>\n        <slot></slot>\n      </a>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/admiralty-paginator-wrapper.cjs.entry.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+
+const PaginatorWrapperComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  pageChangedHandler(event) {
+    const page = event.detail;
+    const paginator = this.el.querySelector('admiralty-paginator');
+    const perPage = 6;
+    const first = page == 1 ? 1 : perPage * (page - 1) + 1;
+    const last = page == 8 ? 45 : perPage * page;
+    const total = 45;
+    const label = `Showing ${first}-${last} of ${total}`;
+    if (paginator.label) {
+      paginator.label = label;
+    }
+    paginator.currentPage = page;
+  }
+  render() {
+    return (index.h("div", null, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+
+exports.admiralty_paginator_wrapper = PaginatorWrapperComponent;
+
+//# sourceMappingURL=admiralty-paginator-wrapper.cjs.entry.js.map

package/dist/cjs/admiralty-paginator-wrapper.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-paginator-wrapper.entry.cjs.js","mappings":";;;;;;MAWa,yBAAyB;;;;EAIpC,kBAAkB,CAAC,KAAuB;IACxC,MAAM,IAAI,GAAW,KAAK,CAAC,MAAM,CAAC;IAClC,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAE/D,MAAM,OAAO,GAAG,CAAC,CAAC;IAClB,MAAM,KAAK,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,OAAO,IAAI,IAAI,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IACvD,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,OAAO,GAAG,IAAI,CAAC;IAC7C,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,MAAM,KAAK,GAAG,WAAW,KAAK,IAAI,IAAI,OAAO,KAAK,EAAE,CAAC;IAErD,IAAI,SAAS,CAAC,KAAK,EAAE;MACnB,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC;KACzB;IACD,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;GAC9B;EAED,MAAM;IACJ,QACEA,qBACEA,qBAAa,CACT,EACN;GACH;;;;;;","names":["h"],"sources":["./src/components/paginator/paginator.stories.data.tsx"],"sourcesContent":["import { Component, Element, h, Listen } from '@stencil/core';\n\n/**\n * @internal\n * Wrapper for the Paginator to demonstrate how the label and current page properties\n * can be updated.\n */\n@Component({\n  tag: 'admiralty-paginator-wrapper',\n  shadow: false,\n})\nexport class PaginatorWrapperComponent {\n  @Element() el!: HTMLElement;\n\n  @Listen('pageChange')\n  pageChangedHandler(event: CustomEvent<any>) {\n    const page: number = event.detail;\n    const paginator = this.el.querySelector('admiralty-paginator');\n\n    const perPage = 6;\n    const first = page == 1 ? 1 : perPage * (page - 1) + 1;\n    const last = page == 8 ? 45 : perPage * page;\n    const total = 45;\n    const label = `Showing ${first}-${last} of ${total}`;\n\n    if (paginator.label) {\n      paginator.label = label;\n    }\n    paginator.currentPage = page;\n  }\n\n  render() {\n    return (\n      <div>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/admiralty-paginator.cjs.entry.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+const button_types = require('./button.types-0549d311.js');
+const index$1 = require('./index-18b58c3d.js');
+
+const paginatorCss = "admiralty-paginator nav.standard{display:flex;flex-direction:row;align-items:center}admiralty-paginator nav.standard admiralty-button{margin:6px}admiralty-paginator nav.standard p{padding:0px 18px 0px 0px;margin-bottom:0px}";
+
+const PaginatorComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.pageChange = index.createEvent(this, "pageChange", 7);
+    this.maxLength = 7;
+    this.pages = 1;
+    this.currentPage = 1;
+    this.label = '';
+  }
+  pageChanged(page) {
+    this.pageChange.emit(page);
+  }
+  onKeydown(event, navFn) {
+    if (event.key === 'Enter' || event.key === 'Enter') {
+      navFn();
+    }
+  }
+  prev() {
+    if (this.currentPage > 1) {
+      this.pageChanged(this.currentPage - 1);
+    }
+  }
+  next() {
+    if (this.currentPage < this.pages) {
+      this.pageChanged(this.currentPage + 1);
+    }
+  }
+  render() {
+    return (index.h("nav", { "aria-label": "pagination", class: "standard" }, index.h("p", { "aria-live": "polite" }, this.label), index.h("admiralty-button", { variant: button_types.ButtonVariant.Icon, icon: index$1.faChevronLeft.iconName, disabled: this.currentPage === 1, tabindex: 0, "aria-disabled": this.currentPage === 1, onClick: this.prev.bind(this), onKeyDown: e => this.onKeydown(e, this.prev.bind(this)), "aria-label": "Previous Page" }), index.h("admiralty-button", { variant: button_types.ButtonVariant.Icon, icon: index$1.faChevronRight.iconName, disabled: this.currentPage === this.pages, tabindex: 0, "aria-disabled": this.currentPage === this.pages, onClick: this.next.bind(this), onKeyDown: e => this.onKeydown(e, this.next.bind(this)), "aria-label": "Next Page" })));
+  }
+};
+PaginatorComponent.style = paginatorCss;
+
+exports.admiralty_paginator = PaginatorComponent;
+
+//# sourceMappingURL=admiralty-paginator.cjs.entry.js.map

package/dist/cjs/admiralty-paginator.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-paginator.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,iOAAiO;;MCSzO,kBAAkB;;;;IAmBpB,cAAS,GAAG,CAAC,CAAC;iBAfP,CAAC;uBAIK,CAAC;iBAIC,EAAE;;EASnB,WAAW,CAAC,IAAY;IAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC5B;EAED,SAAS,CAAC,KAAoB,EAAE,KAAe;IAC7C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;MAClD,KAAK,EAAE,CAAC;KACT;GACF;EAED,IAAI;IACF,IAAI,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE;MACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;KACxC;GACF;EAED,IAAI;IACF,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,EAAE;MACjC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;KACxC;GACF;EAED,MAAM;IACJ,QACEA,+BAAgB,YAAY,EAAC,KAAK,EAAC,UAAU,IAC3CA,4BAAa,QAAQ,IAAE,IAAI,CAAC,KAAK,CAAK,EACtCA,8BACE,OAAO,EAAEC,0BAAa,CAAC,IAAI,EAC3B,IAAI,EAAEC,qBAAa,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,CAAC,EAChC,QAAQ,EAAE,CAAC,mBACI,IAAI,CAAC,WAAW,KAAK,CAAC,EACrC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAC7B,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAC5C,eAAe,GACR,EACpBF,8BACE,OAAO,EAAEC,0BAAa,CAAC,IAAI,EAC3B,IAAI,EAAEE,sBAAc,CAAC,QAAQ,EAC7B,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,EACzC,QAAQ,EAAE,CAAC,mBACI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,EAC9C,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAC7B,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAC5C,WAAW,GACJ,CAChB,EACN;GACH;;;;;;","names":["h","ButtonVariant","faChevronLeft","faChevronRight"],"sources":["./src/components/paginator/paginator.scss?tag=admiralty-paginator","./src/components/paginator/paginator.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n\nadmiralty-paginator nav.standard {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  admiralty-button {\n    margin: 6px;\n  }\n\n  p {\n    padding: 0px 18px 0px 0px;\n    margin-bottom: 0px;\n  }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ButtonVariant } from '../button/button.types';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  tag: 'admiralty-paginator',\n  styleUrl: 'paginator.scss',\n  shadow: false,\n})\nexport class PaginatorComponent {\n  /**\n   * The total number of pages. Defaults to 1.\n   */\n  @Prop() pages = 1;\n  /**\n   * The current page. Defaults to 1.\n   */\n  @Prop() currentPage = 1;\n  /**\n   * The label to display.\n   */\n  @Prop() label: string = '';\n  /**\n   * Dispatched when the previous or next button is pressed. The event detail contains\n   * the requested page number.\n   */\n  @Event() pageChange: EventEmitter<number>;\n\n  readonly maxLength = 7;\n\n  public pageChanged(page: number) {\n    this.pageChange.emit(page);\n  }\n\n  onKeydown(event: KeyboardEvent, navFn: Function) {\n    if (event.key === 'Enter' || event.key === 'Enter') {\n      navFn();\n    }\n  }\n\n  prev() {\n    if (this.currentPage > 1) {\n      this.pageChanged(this.currentPage - 1);\n    }\n  }\n\n  next() {\n    if (this.currentPage < this.pages) {\n      this.pageChanged(this.currentPage + 1);\n    }\n  }\n\n  render() {\n    return (\n      <nav aria-label=\"pagination\" class=\"standard\">\n        <p aria-live=\"polite\">{this.label}</p>\n        <admiralty-button\n          variant={ButtonVariant.Icon}\n          icon={faChevronLeft.iconName}\n          disabled={this.currentPage === 1}\n          tabindex={0}\n          aria-disabled={this.currentPage === 1}\n          onClick={this.prev.bind(this)}\n          onKeyDown={e => this.onKeydown(e, this.prev.bind(this))}\n          aria-label=\"Previous Page\"\n        ></admiralty-button>\n        <admiralty-button\n          variant={ButtonVariant.Icon}\n          icon={faChevronRight.iconName}\n          disabled={this.currentPage === this.pages}\n          tabindex={0}\n          aria-disabled={this.currentPage === this.pages}\n          onClick={this.next.bind(this)}\n          onKeyDown={e => this.onKeydown(e, this.next.bind(this))}\n          aria-label=\"Next Page\"\n        ></admiralty-button>\n      </nav>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/admiralty-phase-banner.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+
+const phaseBannerCss = "@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-phase-banner .phase-banner{display:block;line-height:40px;width:100%;padding:0 18px}@media (min-width: 1024px){admiralty-phase-banner .phase-banner{padding:0 20px}}admiralty-phase-banner .phase-banner strong{border:2px solid;font-weight:bold;text-transform:uppercase;letter-spacing:1px;color:#09315b;padding:6px 8px 3px;margin-right:10px}";
+
+const PhaseBannerComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.phase = 'alpha';
+    this.link = undefined;
+  }
+  render() {
+    return (index.h("div", { class: "phase-banner" }, index.h("strong", null, this.phase), index.h("span", null, "This service is in ", this.phase, " phase - please provide", ' ', index.h("a", { href: this.link, target: "_blank" }, "feedback"), ' ', "to help us improve it")));
+  }
+};
+PhaseBannerComponent.style = phaseBannerCss;
+
+exports.admiralty_phase_banner = PhaseBannerComponent;
+
+//# sourceMappingURL=admiralty-phase-banner.cjs.entry.js.map

package/dist/cjs/admiralty-phase-banner.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-phase-banner.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,s1BAAs1B;;MCOh2B,oBAAoB;;;iBAIG,OAAO;;;EAOzC,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,cAAc,IACvBA,wBAAS,IAAI,CAAC,KAAK,CAAU,EAC7BA,6CACsB,IAAI,CAAC,KAAK,6BAAyB,GAAG,EAC1DA,eAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAC,QAAQ,eAE/B,EAAC,GAAG,0BAEH,CACH,EACN;GACH;;;;;;","names":["h"],"sources":["./src/components/phase-banner/phase-banner.scss?tag=admiralty-phase-banner","./src/components/phase-banner/phase-banner.tsx"],"sourcesContent":["@use \"../../scss/base/responsive\";\n@use \"../../scss/vars/colours\";\n\nadmiralty-phase-banner .phase-banner {\n  display: block;\n  line-height: 40px;\n  width: 100%;\n  padding: 0 18px;\n  @include responsive.desktop-only {\n    padding: 0 20px;\n  }\n\n  strong {\n    border: 2px solid;\n    font-weight: bold;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    color: colours.$colour-admiralty-blue;\n    padding: 6px 8px 3px;\n    margin-right: 10px;\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-phase-banner',\n  styleUrl: 'phase-banner.scss',\n  shadow: false,\n})\nexport class PhaseBannerComponent {\n  /**\n   * The phase for the phase banner\n   */\n  @Prop() phase: 'alpha' | 'beta' = 'alpha';\n\n  /**\n   * A link to where the end user can provide feedback\n   */\n  @Prop() link: string;\n\n  render() {\n    return (\n      <div class=\"phase-banner\">\n        <strong>{this.phase}</strong>\n        <span>\n          This service is in {this.phase} phase - please provide{' '}\n          <a href={this.link} target=\"_blank\">\n            feedback\n          </a>{' '}\n          to help us improve it\n        </span>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/admiralty-progress-bar.cjs.entry.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+
+const progressBarCss = "progress.sc-admiralty-progress-bar{appearance:none;background:#eeeeee;border:none;box-sizing:border-box;color:#09315b;display:inline-block;font-size:18px;flex:1;height:1em;width:100%}progress[value].error.sc-admiralty-progress-bar::-webkit-progress-value{background-color:#e20d0d}progress[value].sc-admiralty-progress-bar::-webkit-progress-value{background-color:#47a234}";
+
+const ProgressBarComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.id = `admiralty-progress-${++progressId}`;
+    this.label = undefined;
+    this.progression = 0;
+    this.error = false;
+    this.progressionValue = this.progression;
+  }
+  render() {
+    const { id, label, error, progressionValue } = this;
+    return (index.h("div", { class: "admiralty-progress" }, label ? index.h("admiralty-label", { for: id }, label) : null, index.h("progress", { id: id, class: { error: error }, value: progressionValue, max: "100" })));
+  }
+};
+let progressId = 0;
+ProgressBarComponent.style = progressBarCss;
+
+exports.admiralty_progress_bar = ProgressBarComponent;
+
+//# sourceMappingURL=admiralty-progress-bar.cjs.entry.js.map

package/dist/cjs/admiralty-progress-bar.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-progress-bar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,qXAAqX;;MCO/X,oBAAoB;;;IACvB,OAAE,GAAG,sBAAsB,EAAE,UAAU,EAAE,CAAC;;uBASpB,CAAC;iBAKN,KAAK;4BAKM,IAAI,CAAC,WAAW;;EAEpD,MAAM;IACJ,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;IAEpD,QACEA,iBAAK,KAAK,EAAC,oBAAoB,IAC5B,KAAK,GAAGA,6BAAiB,GAAG,EAAE,EAAE,IAAG,KAAK,CAAmB,GAAG,IAAI,EACnEA,sBAAU,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAC,KAAK,GAAG,CAC5E,EACN;GACH;;AAGH,IAAI,UAAU,GAAG,CAAC,CAAC;;;;;","names":["h"],"sources":["./src/components/progress-bar/progress-bar.scss?tag=admiralty-progress-bar&encapsulation=scoped","./src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\r\n\r\nprogress {\r\n  appearance: none;\r\n  background: colours.$colour-button-secondary-hover;\r\n  border: none;\r\n  box-sizing: border-box;\r\n  color: colours.$colour-admiralty-blue;\r\n  display: inline-block;\r\n  font-size: 18px;\r\n  flex: 1;\r\n  height: 1em;\r\n  width: 100%;\r\n\r\n  &[value].error::-webkit-progress-value {\r\n    background-color: colours.$colour-utility-error;\r\n  }\r\n\r\n  &[value]::-webkit-progress-value {\r\n    background-color: colours.$colour-utility-success;\r\n  }\r\n}\r\n","import { Component, h, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  scoped: true,\n})\nexport class ProgressBarComponent {\n  private id = `admiralty-progress-${++progressId}`;\n\n  /**\n   * If set, adds a label above the progress bar\n   */\n  @Prop() label?: string;\n\n  /**   * A value from 0 - 100 that visually represents the current progression\n   */\n  @Prop() progression: number = 0;\n\n  /**\n   * Set to true to indicate an error (turns the progress bar red)\n   */\n  @Prop() error: boolean = false;\n\n  /**\n   * Progress value, min:0, max: 100\n   */\n  @State() progressionValue: number = this.progression;\n\n  render() {\n    const { id, label, error, progressionValue } = this;\n\n    return (\n      <div class=\"admiralty-progress\">\n        {label ? <admiralty-label for={id}>{label}</admiralty-label> : null}\n        <progress id={id} class={{ error: error }} value={progressionValue} max=\"100\" />\n      </div>\n    );\n  }\n}\n\nlet progressId = 0;\n"],"version":3}

package/dist/cjs/admiralty-radio-group.cjs.entry.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+
+const radioGroupCss = ".radio-group.sc-admiralty-radio-group{display:flex;flex-direction:row}.radio-group.sc-admiralty-radio-group-s>*,.radio-group .sc-admiralty-radio-group-s>*{margin-right:2em !important}.stack.sc-admiralty-radio-group{flex-direction:column}.stack.sc-admiralty-radio-group-s>*,.stack .sc-admiralty-radio-group-s>*{margin-bottom:10px !important}";
+
+const RadioGroupComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.radioChange = index.createEvent(this, "radioChange", 7);
+    this.inputId = `admiralty-rg-${radioGroupIds++}`;
+    this.setRadioTabindex = (value) => {
+      const radios = this.getRadios();
+      // Get the first radio that is not disabled and the checked one
+      const first = radios.find(radio => !radio.disabled);
+      const checked = radios.find(radio => radio.value === value && !radio.disabled);
+      if (!first && !checked) {
+        return;
+      }
+      // If an enabled checked radio exists, set it to be the focusable radio
+      // otherwise we default to focus the first radio
+      const focusable = checked || first;
+      for (const radio of radios) {
+        const tabindex = radio === focusable ? 0 : -1;
+        radio.setButtonTabindex(tabindex);
+      }
+    };
+    this.onClick = (e) => {
+      const selectedRadio = e.target && e.target.closest('admiralty-radio');
+      if (selectedRadio) {
+        const currentValue = this.value;
+        const newValue = selectedRadio.value;
+        if (newValue !== currentValue) {
+          this.value = newValue;
+        }
+        else {
+          this.value = undefined;
+        }
+      }
+    };
+    this.name = this.inputId;
+    this.value = undefined;
+    this.displayVertical = false;
+  }
+  valueChanged(value) {
+    this.setRadioTabindex(value);
+    this.radioChange.emit({ value });
+  }
+  componentDidLoad() {
+    this.setRadioTabindex(this.value);
+  }
+  getRadios() {
+    return Array.from(this.el.querySelectorAll('admiralty-radio'));
+  }
+  render() {
+    const { displayVertical } = this;
+    return (index.h(index.Host, null, index.h("div", { class: { 'radio-group': true, 'stack': displayVertical }, role: "radiogroup", onClick: this.onClick }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+};
+let radioGroupIds = 0;
+RadioGroupComponent.style = radioGroupCss;
+
+exports.admiralty_radio_group = RadioGroupComponent;
+
+//# sourceMappingURL=admiralty-radio-group.cjs.entry.js.map

package/dist/cjs/admiralty-radio-group.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-radio-group.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,sVAAsV;;MCO/V,mBAAmB;;;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;IAmC5C,qBAAgB,GAAG,CAAC,KAAsB;MAChD,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;;MAGhC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MACpD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MAE/E,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,EAAE;QACtB,OAAO;OACR;;;MAID,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,CAAC;MAEnC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;QAC1B,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9C,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;OACnC;KACF,CAAC;IAKM,YAAO,GAAG,CAAC,CAAQ;MACzB,MAAM,aAAa,GAAG,CAAC,CAAC,MAAM,IAAK,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;MAEvF,IAAI,aAAa,EAAE;QACjB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC;QAErC,IAAI,QAAQ,KAAK,YAAY,EAAE;UAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;SACvB;aAAM;UACL,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;SACxB;OACF;KACF,CAAC;gBAjEqB,IAAI,CAAC,OAAO;;2BAUA,KAAK;;EAGxC,YAAY,CAAC,KAAU;IACrB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAE7B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;GAClC;EAOD,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;EAuBO,SAAS;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;GAChE;EAgBD,MAAM;IACJ,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAEjC,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACpGA,qBAAa,CACT,CACD,EACP;GACH;;;;;;AAGH,IAAI,aAAa,GAAW,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["./src/components/radio-group/radio-group.scss?tag=admiralty-radio-group&encapsulation=scoped","./src/components/radio-group/radio-group.tsx"],"sourcesContent":[".radio-group {\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  ::slotted(*) {\r\n    margin-right: 2em !important;\r\n  }\r\n}\r\n\r\n.stack {\r\n  flex-direction: column;\r\n\r\n  ::slotted(*) {\r\n    margin-bottom: 10px !important;\r\n  }\r\n}\r\n\r\n","import { Component, Host, h, Prop, Element, Event, EventEmitter, ComponentInterface, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-radio-group',\n  styleUrl: 'radio-group.scss',\n  scoped: true,\n})\nexport class RadioGroupComponent implements ComponentInterface {\n  private inputId = `admiralty-rg-${radioGroupIds++}`;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * The name of the control, which is submitted with the form data\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * The value of the radio group\n   */\n  @Prop({ mutable: true }) value: any | null;\n\n  /**\n   * Setting this true displays the radio options vertically (defaults to false)\n   */\n  @Prop() displayVertical: boolean = false;\n\n  @Watch('value')\n  valueChanged(value: any) {\n    this.setRadioTabindex(value);\n\n    this.radioChange.emit({ value });\n  }\n\n  /**\n   * Event fired when the checked radio button changes\n   */\n  @Event() radioChange: EventEmitter<any>;\n\n  componentDidLoad(): void {\n    this.setRadioTabindex(this.value);\n  }\n\n  private setRadioTabindex = (value: any | undefined) => {\n    const radios = this.getRadios();\n\n    // Get the first radio that is not disabled and the checked one\n    const first = radios.find(radio => !radio.disabled);\n    const checked = radios.find(radio => radio.value === value && !radio.disabled);\n\n    if (!first && !checked) {\n      return;\n    }\n\n    // If an enabled checked radio exists, set it to be the focusable radio\n    // otherwise we default to focus the first radio\n    const focusable = checked || first;\n\n    for (const radio of radios) {\n      const tabindex = radio === focusable ? 0 : -1;\n      radio.setButtonTabindex(tabindex);\n    }\n  };\n\n  private getRadios(): any {\n    return Array.from(this.el.querySelectorAll('admiralty-radio'));\n  }\n  private onClick = (e: Event) => {\n    const selectedRadio = e.target && (e.target as HTMLElement).closest('admiralty-radio');\n\n    if (selectedRadio) {\n      const currentValue = this.value;\n      const newValue = selectedRadio.value;\n\n      if (newValue !== currentValue) {\n        this.value = newValue;\n      } else {\n        this.value = undefined;\n      }\n    }\n  };\n\n  render() {\n    const { displayVertical } = this;\n\n    return (\n      <Host>\n        <div class={{ 'radio-group': true, 'stack': displayVertical }} role=\"radiogroup\" onClick={this.onClick}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet radioGroupIds: number = 0;\n"],"version":3}

package/dist/cjs/admiralty-radio.cjs.entry.js

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+
+const radioCss = ".admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio{appearance:none;border:2px solid #09315b;border-radius:1rem;height:1.5rem;width:1.5rem;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:18px}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:checked:after{border-radius:100%;background-color:#09315b;width:0.8rem;height:0.8rem;content:\" \"}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:disabled{border:2px solid #adadad}.admiralty-radio.sc-admiralty-radio input.sc-admiralty-radio:focus{outline:3px solid #ffdd00;outline-offset:0}.admiralty-radio.sc-admiralty-radio label.sc-admiralty-radio{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-weight:300;position:relative;top:2px}";
+
+const RadioComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.admiraltyFocus = index.createEvent(this, "admiraltyFocus", 7);
+    this.admiraltyBlur = index.createEvent(this, "admiraltyBlur", 7);
+    this.inputId = `admiralty-radio-${radioButtonIds++}`;
+    this.radioGroup = null;
+    this.updateState = () => {
+      if (this.radioGroup) {
+        this.checked = this.radioGroup.value === this.value;
+      }
+    };
+    this.onClick = () => {
+      this.checked = this.nativeInput.checked;
+    };
+    this.onFocus = () => {
+      this.admiraltyFocus.emit();
+    };
+    this.onBlur = () => {
+      this.admiraltyBlur.emit();
+    };
+    this.buttonTabindex = -1;
+    this.name = this.inputId;
+    this.value = undefined;
+    this.disabled = false;
+    this.checked = false;
+  }
+  connectedCallback() {
+    if (this.value === undefined) {
+      this.value = this.inputId;
+    }
+    const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));
+    if (radioGroup) {
+      this.updateState();
+    }
+  }
+  /** @internal */
+  async setButtonTabindex(value) {
+    this.buttonTabindex = value;
+  }
+  render() {
+    const { buttonTabindex, checked, disabled, inputId, name, value } = this;
+    return (index.h(index.Host, null, index.h("div", { class: "admiralty-radio" }, index.h("input", { "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, "aria-labelledby": inputId, id: inputId, name: name, tabindex: buttonTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: "admiralty-radio", type: "radio", value: value, checked: checked, disabled: disabled ? true : null, ref: nativeEl => (this.nativeInput = nativeEl) }), index.h("label", { htmlFor: inputId }, index.h("slot", null)))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "checked": ["render"],
+    "disabled": ["render"]
+  }; }
+};
+let radioButtonIds = 0;
+RadioComponent.style = radioCss;
+
+exports.admiralty_radio = RadioComponent;
+
+//# sourceMappingURL=admiralty-radio.cjs.entry.js.map

package/dist/cjs/admiralty-radio.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-radio.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,mwBAAmwB;;MCOvwB,cAAc;;;;;IACjB,YAAO,GAAG,mBAAmB,cAAc,EAAE,EAAE,CAAC;IAEhD,eAAU,GAA0C,IAAI,CAAC;IAuDzD,gBAAW,GAAG;MACpB,IAAI,IAAI,CAAC,UAAU,EAAE;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;OACrD;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;KACzC,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;KAC5B,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B,CAAC;0BA/DwB,CAAC,CAAC;gBAKL,IAAI,CAAC,OAAO;;oBAQN,KAAK;mBAKW,KAAK;;EAYlD,iBAAiB;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;KAC3B;IACD,MAAM,UAAU,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAEhF,IAAI,UAAU,EAAE;MACd,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;GACF;;EAID,MAAM,iBAAiB,CAAC,KAAa;IACnC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;GAC7B;EAsBD,MAAM;IACJ,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEzE,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,mCACgB,GAAG,OAAO,EAAE,iBACb,QAAQ,GAAG,MAAM,GAAG,IAAI,qBACpB,OAAO,EACxB,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,cAAc,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,EAChC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,WAAW,GAAG,QAA4B,CAAC,GAClE,EACFA,mBAAO,OAAO,EAAE,OAAO,IACrBA,qBAAQ,CACF,CACJ,CACD,EACP;GACH;;;;;;;AAGH,IAAI,cAAc,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["./src/components/radio/radio.scss?tag=admiralty-radio&encapsulation=scoped","./src/components/radio/radio.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\n@use \"../../scss/vars/typography\" as typography;\n\n.admiralty-radio {\n  input {\n    appearance: none;\n    border: 2px solid colours.$colour-admiralty-blue;\n    border-radius: 1rem;\n    height: 1.5rem;\n    width: 1.5rem;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n    margin-right: 18px;\n\n    &:checked:after {\n        border-radius: 100%;\n        background-color: colours.$colour-admiralty-blue;\n        width: .8rem;\n        height: .8rem;\n        content: \" \";\n      }\n\n      &:disabled {\n        border: 2px solid colours.$colour-textinput-text-disabled;\n      }\n\n      &:focus {\n        outline: 3px solid colours.$colour-utility-focus;\n        outline-offset: 0;\n      }\n  }\n\n  label {\n    font-family: typography.$font-family;\n    font-weight: typography.$font-weight-light;\n    position: relative;\n    top: 2px;\n  }\n}\n","import { Element, Component, Event, h, Prop, Watch, Host, State, Method, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-radio',\n  styleUrl: 'radio.scss',\n  scoped: true,\n})\nexport class RadioComponent {\n  private inputId = `admiralty-radio-${radioButtonIds++}`;\n  private nativeInput!: HTMLInputElement;\n  private radioGroup: HTMLAdmiraltyRadioGroupElement | null = null;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * The tabindex of the radio button.\n   * @internal\n   */\n  @State() buttonTabindex = -1;\n\n  /**\n   * The name of the radio button for use on selection within a radio group\n   */\n  @Prop() name: string = this.inputId;\n  /**\n   * The value of the radio button for use on selection within a radio group\n   */\n  @Prop({ mutable: true }) value: string | null;\n  /**\n   * Determines whether the radio button is disabled. A button in disabled state will not fire click output events.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Determines whether the radio button is selected (or checked)\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * Emitted when the radio button gains focus.\n   */\n  @Event() admiraltyFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the radio button loses focus.\n   */\n  @Event() admiraltyBlur!: EventEmitter<void>;\n\n  connectedCallback() {\n    if (this.value === undefined) {\n      this.value = this.inputId;\n    }\n    const radioGroup = (this.radioGroup = this.el.closest('admiralty-radio-group'));\n\n    if (radioGroup) {\n      this.updateState();\n    }\n  }\n\n  /** @internal */\n  @Method()\n  async setButtonTabindex(value: number) {\n    this.buttonTabindex = value;\n  }\n\n  private updateState = () => {\n    if (this.radioGroup) {\n      this.checked = this.radioGroup.value === this.value;\n    }\n  };\n\n  private onClick = () => {\n    this.checked = this.nativeInput.checked;\n  };\n\n  private onFocus = () => {\n    this.admiraltyFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.admiraltyBlur.emit();\n  };\n\n  @Watch('checked')\n  @Watch('disabled')\n  render() {\n    const { buttonTabindex, checked, disabled, inputId, name, value } = this;\n\n    return (\n      <Host>\n        <div class=\"admiralty-radio\">\n          <input\n            aria-checked={`${checked}`}\n            aria-hidden={disabled ? 'true' : null}\n            aria-labelledby={inputId}\n            id={inputId}\n            name={name}\n            tabindex={buttonTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n            class=\"admiralty-radio\"\n            type=\"radio\"\n            value={value}\n            checked={checked}\n            disabled={disabled ? true : null}\n            ref={nativeEl => (this.nativeInput = nativeEl as HTMLInputElement)}\n          />\n          <label htmlFor={inputId}>\n            <slot />\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet radioButtonIds = 0;\n"],"version":3}

package/dist/cjs/admiralty-select.cjs.entry.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+
+const selectCss = ".disabled{color:#adadad}.select-wrapper{position:relative}admiralty-icon{font-size:24px;font-weight:normal;pointer-events:none;position:absolute;right:12px;top:12px}select{appearance:none;background-color:#ffffff;border:2px solid #333333;box-sizing:border-box;color:#333333;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;margin-bottom:6px;position:relative;font-weight:300;padding:12px;width:100%}select.error{border-color:#e20d0d}select:focus-visible{outline:3px solid #ffdd00;box-shadow:inset 0 0 0 2px #333333}select.disabled{border-color:#adadad}";
+
+const SelectComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.admiraltyChange = index.createEvent(this, "admiraltyChange", 7);
+    this.admiraltyBlur = index.createEvent(this, "admiraltyBlur", 7);
+    this.id = `admiralty-select-${++nextId}`;
+    this.disabled = false;
+    this.error = false;
+    this.errorHint = null;
+    this.hint = null;
+    this.label = 'Choose a colour';
+    this.width = undefined;
+  }
+  componentWillRender() {
+    this.getOptions();
+  }
+  handleSelect(event) {
+    this.admiraltyChange.emit(event.target);
+  }
+  handleBlur(_event) {
+    this.admiraltyBlur.emit();
+  }
+  /**
+   *  Summary. gets the options passed the user passes through the slots and
+   *  extracs the text and value
+   */
+  getOptions() {
+    const slotOptions = this.el.querySelectorAll('option');
+    const options = [];
+    // grab all the data from the slot and extract the data to be inserted into the template
+    slotOptions.forEach(slot => {
+      // remove the slotted option to keep the shadowDom clean
+      slot.remove();
+      options.push({
+        text: slot.text,
+        value: slot.value,
+      });
+    });
+    this.options = options;
+  }
+  render() {
+    const { disabled, error, errorHint, hint, id, label } = this;
+    const disabledClass = disabled ? 'disabled' : '';
+    return (index.h(index.Host, null, index.h("div", { class: `admiralty-select ${disabledClass}` }, index.h("admiralty-label", { for: id }, label), index.h("admiralty-hint", null, hint), index.h("div", { class: "select-wrapper", style: this.width ? { maxWidth: `${this.width}px` } : {} }, index.h("select", { id: id, class: { 'admiralty-form-control': true, 'error': error, 'disabled': disabled }, "aria-disabled": disabled ? 'true' : 'false', "aria-label": label, onChange: event => this.handleSelect(event), onBlur: event => this.handleBlur(event), disabled: disabled }, this.options.map(option => (index.h("option", { value: option.value }, option.text)))), index.h("admiralty-icon", { class: `select-down-icon ${disabledClass}`, "icon-name": "angle-down" })), this.error ? index.h("admiralty-input-error", null, errorHint) : '')));
+  }
+  get el() { return index.getElement(this); }
+};
+let nextId = 0;
+SelectComponent.style = selectCss;
+
+exports.admiralty_select = SelectComponent;
+
+//# sourceMappingURL=admiralty-select.cjs.entry.js.map

package/dist/cjs/admiralty-select.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-select.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,4kBAA4kB;;MCQjlB,eAAe;;;;;IAE1B,OAAE,GAAW,oBAAoB,EAAE,MAAM,EAAE,CAAC;oBAIhB,KAAK;iBAIR,KAAK;qBAIF,IAAI;gBAIT,IAAI;iBAIH,iBAAiB;;;EAczC,mBAAmB;IACjB,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAID,YAAY,CAAC,KAAY;IACvB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;GACzC;EAED,UAAU,CAAC,MAAkB;IAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;GAC3B;;;;;EAMD,UAAU;IACR,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,EAAE,CAAC;;IAGnB,WAAW,CAAC,OAAO,CAAC,IAAI;;MAEtB,IAAI,CAAC,MAAM,EAAE,CAAC;MAEd,OAAO,CAAC,IAAI,CAAC;QACX,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAC,CAAC;IAEH,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;GACxB;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAC7D,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC;IAEjD,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,oBAAoB,aAAa,EAAE,IAC7CA,6BAAiB,GAAG,EAAE,EAAE,IAAG,KAAK,CAAmB,EACnDA,gCAAiB,IAAI,CAAkB,EACvCA,iBAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,GAAG,EAAE,IAClFA,oBACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,mBAChE,QAAQ,GAAG,MAAM,GAAG,OAAO,gBAC9B,KAAK,EACjB,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACvC,QAAQ,EAAE,QAAQ,IAEjB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtBA,oBAAQ,KAAK,EAAE,MAAM,CAAC,KAAK,IAAG,MAAM,CAAC,IAAI,CAAU,CACpD,CAAC,CACK,EACTA,4BAAgB,KAAK,EAAE,oBAAoB,aAAa,EAAE,eAAY,YAAY,GAAkB,CAChG,EACL,IAAI,CAAC,KAAK,GAAGA,uCAAwB,SAAS,CAAyB,GAAG,EAAE,CACzE,CACD,EACP;GACH;;;AAGH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["./src/components/select/select.scss?tag=admiralty-select&encapsulation=shadow","./src/components/select/select.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/vars/typography\";\n\n.disabled {\n  color: colours.$colour-textinput-text-disabled;\n}\n\n.select-wrapper {\n  position: relative;\n}\n\nadmiralty-icon {\n  font-size: 24px;\n  font-weight: typography.$font-weight-medium;\n  pointer-events: none;\n  position: absolute;\n  right: 12px;\n  top: 12px;\n}\n\n\nselect {\n  appearance: none;\n  background-color: colours.$colour-white;\n  border: 2px solid colours.$colour-text;\n  box-sizing: border-box;\n  color: colours.$colour-text;\n  font-family: typography.$font-family;\n  font-size: typography.$font-size-normal;\n  line-height: 24px;\n  margin-bottom: 6px;\n  position: relative;\n  font-weight: typography.$font-weight-light;\n  padding: 12px;\n  width: 100%;\n\n  &.error {\n    border-color: colours.$colour-utility-error;\n  }\n\n  &:focus-visible {\n    outline: 3px solid colours.$colour-utility-focus;\n    box-shadow: inset 0 0 0 2px colours.$colour-text;\n  }\n\n  &.disabled {\n    border-color: colours.$colour-textinput-text-disabled;\n  }\n}\n\n\n","import { Component, Event, Prop, Element, EventEmitter, h, Host } from '@stencil/core';\nimport { UKHOOptions } from './select.types';\n\n@Component({\n  tag: 'admiralty-select',\n  styleUrl: 'select.scss',\n  shadow: true,\n})\nexport class SelectComponent {\n  @Element() el: HTMLElement;\n  id: string = `admiralty-select-${++nextId}`;\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop() disabled: boolean = false;\n  /**\n   * If 'true', the 'error' class is added to suggest an error\n   */\n  @Prop() error: boolean = false;\n  /**\n   * The hint that is used to inform the user of an error (displayed below the select box)\n   */\n  @Prop() errorHint: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() hint: string = null;\n  /**\n   * The text that will be used as a field label.\n   */\n  @Prop() label: string = 'Choose a colour';\n  /**\n   * The maximum width (px) for the input field.\n   */\n  @Prop() width?: number;\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() admiraltyChange: EventEmitter<EventTarget>;\n  /**\n   * Emitted when the component loses focus.\n   */\n  @Event() admiraltyBlur: EventEmitter<void>;\n\n  componentWillRender() {\n    this.getOptions();\n  }\n\n  options: Array<UKHOOptions>;\n\n  handleSelect(event: Event) {\n    this.admiraltyChange.emit(event.target);\n  }\n\n  handleBlur(_event: FocusEvent): void {\n    this.admiraltyBlur.emit();\n  }\n\n  /**\n   *  Summary. gets the options passed the user passes through the slots and\n   *  extracs the text and value\n   */\n  getOptions() {\n    const slotOptions = this.el.querySelectorAll('option');\n    const options = [];\n\n    // grab all the data from the slot and extract the data to be inserted into the template\n    slotOptions.forEach(slot => {\n      // remove the slotted option to keep the shadowDom clean\n      slot.remove();\n\n      options.push({\n        text: slot.text,\n        value: slot.value,\n      });\n    });\n\n    this.options = options;\n  }\n\n  render() {\n    const { disabled, error, errorHint, hint, id, label } = this;\n    const disabledClass = disabled ? 'disabled' : '';\n\n    return (\n      <Host>\n        <div class={`admiralty-select ${disabledClass}`}>\n          <admiralty-label for={id}>{label}</admiralty-label>\n          <admiralty-hint>{hint}</admiralty-hint>\n          <div class=\"select-wrapper\" style={this.width ? { maxWidth: `${this.width}px` } : {}}>\n            <select\n              id={id}\n              class={{ 'admiralty-form-control': true, 'error': error, 'disabled': disabled }}\n              aria-disabled={disabled ? 'true' : 'false'}\n              aria-label={label}\n              onChange={event => this.handleSelect(event)}\n              onBlur={event => this.handleBlur(event)}\n              disabled={disabled}\n            >\n              {this.options.map(option => (\n                <option value={option.value}>{option.text}</option>\n              ))}\n            </select>\n            <admiralty-icon class={`select-down-icon ${disabledClass}`} icon-name=\"angle-down\"></admiralty-icon>\n          </div>\n          {this.error ? <admiralty-input-error>{errorHint}</admiralty-input-error> : ''}\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"version":3}

package/dist/cjs/admiralty-side-nav-item.cjs.entry.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+
+const sideNavItemCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-side-nav-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-side-nav-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-side-nav-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-side-nav-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-side-nav-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-side-nav-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-side-nav-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-side-nav-item{display:none}}a.section.sc-admiralty-side-nav-item{cursor:pointer;padding:0px 10px;display:flex;flex-direction:column;justify-content:center;height:42px;max-width:fit-content;box-sizing:border-box;user-select:none;text-align:center;text-decoration:none;color:#09315b;font-weight:normal;font-size:16px}a.section.sc-admiralty-side-nav-item:hover{background-color:#f0f0f0}a.section.sc-admiralty-side-nav-item:focus{outline-offset:-2px}a.section.navActive.sc-admiralty-side-nav-item{background-color:#09315b;color:#ffffff}";
+
+const SideNavItemComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sideNavItemSelected = index.createEvent(this, "sideNavItemSelected", 7);
+    this.sideNavItemId = undefined;
+    this.headingTitle = undefined;
+    this.navActive = false;
+  }
+  handleClickAction() {
+    this.emitSideNavItemSelected();
+  }
+  handleKeyUpAction(ev) {
+    if (ev.key === 'Enter') {
+      this.emitSideNavItemSelected();
+    }
+  }
+  emitSideNavItemSelected() {
+    this.sideNavItemSelected.emit(this.sideNavItemId);
+  }
+  render() {
+    return (index.h("a", { class: {
+        section: true,
+        navActive: this.navActive,
+      }, tabindex: "0", role: "button", onClick: this.handleClickAction.bind(this), onKeyUp: this.handleKeyUpAction.bind(this) }, this.headingTitle));
+  }
+};
+SideNavItemComponent.style = sideNavItemCss;
+
+exports.admiralty_side_nav_item = SideNavItemComponent;
+
+//# sourceMappingURL=admiralty-side-nav-item.cjs.entry.js.map

package/dist/cjs/admiralty-side-nav-item.cjs.entry.js.map

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

package/dist/cjs/admiralty-side-nav-wrapper.cjs.entry.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+
+const SideNavWrapperComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  onSideNavItemSelected(event) {
+    const sideNavItemId = event.detail;
+    const sideNav = this.el.querySelector('admiralty-side-nav');
+    const sideNavItems = sideNav.querySelectorAll('admiralty-side-nav-item');
+    sideNavItems.forEach(sideNavItem => {
+      sideNavItem.navActive = sideNavItem.sideNavItemId === sideNavItemId;
+    });
+  }
+  render() {
+    return (index.h("div", null, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+
+exports.admiralty_side_nav_wrapper = SideNavWrapperComponent;
+
+//# sourceMappingURL=admiralty-side-nav-wrapper.cjs.entry.js.map

package/dist/cjs/admiralty-side-nav-wrapper.cjs.entry.js.map

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

package/dist/cjs/admiralty-side-nav.cjs.entry.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9db1e550.js');
+
+const sideNavCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-side-nav{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-side-nav{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-side-nav{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-side-nav{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-side-nav{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-side-nav{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-side-nav{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-side-nav{display:none}}nav.side-nav.sc-admiralty-side-nav{display:flex;flex-direction:column}";
+
+const SideNavComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.label = undefined;
+  }
+  render() {
+    return (index.h("nav", { class: "side-nav", "aria-label": this.label }, index.h("slot", null)));
+  }
+};
+SideNavComponent.style = sideNavCss;
+
+exports.admiralty_side_nav = SideNavComponent;
+
+//# sourceMappingURL=admiralty-side-nav.cjs.entry.js.map