@ukho/admiralty-core 0.0.0

package/dist/components/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

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

package/dist/components/input-error.js

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { a as faExclamation, d as defineCustomElement$1 } from './icon.js';
+
+const inputErrorCss = ":host{display:flex;align-items:center}admiralty-icon{color:#e20d0d}p{margin:0;color:#e20d0d}";
+
+const InputError = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("admiralty-icon", { "icon-name": faExclamation.iconName, class: "error-icon" }), h("p", null, h("slot", null))));
+  }
+  static get style() { return inputErrorCss; }
+}, [1, "admiralty-input-error"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-input-error", "admiralty-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-input-error":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, InputError);
+      }
+      break;
+    case "admiralty-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { InputError as I, defineCustomElement as d };
+
+//# sourceMappingURL=input-error.js.map

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

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

package/dist/components/input.js

@@ -0,0 +1,109 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './hint.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './input-error.js';
+import { d as defineCustomElement$1 } from './label.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.admiraltyChange = 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 (h("div", { class: "text-input-container" }, this.label ? (h("admiralty-label", { disabled: this.disabled, for: this.inputId }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, 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 ? h("admiralty-input-error", null, this.invalidMessage) : null));
+  }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+  static get style() { return inputCss; }
+}, [2, "admiralty-input", {
+    "name": [1],
+    "label": [1],
+    "hint": [1],
+    "disabled": [4],
+    "type": [1],
+    "placeholder": [1],
+    "width": [2],
+    "required": [4],
+    "invalid": [4],
+    "invalidMessage": [1, "invalid-message"],
+    "autocomplete": [1],
+    "value": [1032]
+  }]);
+let nextId = 0;
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-input", "admiralty-hint", "admiralty-icon", "admiralty-input-error", "admiralty-label"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, InputComponent);
+      }
+      break;
+    case "admiralty-hint":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "admiralty-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "admiralty-input-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "admiralty-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { InputComponent as I, defineCustomElement as d };
+
+//# sourceMappingURL=input.js.map

package/dist/components/input.js.map

@@ -0,0 +1 @@
+{"file":"input.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,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACT,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzF,aACE,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,GAAG,iCAAwB,IAAI,CAAC,cAAc,CAAyB,GAAG,IAAI,CACvF,EACN;GACH;;;;;;;;;;;;;;;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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/components/label.js

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

package/dist/components/label.js.map

@@ -0,0 +1 @@
+{"file":"label.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,+FAA+F;;MCWnG,cAAc;;;;;;;;EAWzB,MAAM;IACJ,QACE,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC1D,eAAa,CACP,EACR;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/label/label.scss?tag=admiralty-label&encapsulation=shadow","./src/components/label/label.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\r\n@use \"../../scss/vars/typography\";\r\n\r\nlabel {\r\n  margin-bottom: 6px;\r\n  display: inline-block;\r\n  font-weight: typography.$font-weight-medium;\r\n\r\n  &.disabled {\r\n    color: colours.$colour-textinput-text-disabled;\r\n  }\r\n}\r\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The label content should be placed in the slot e.g.\n * `<admiralty-label>First Name</admiralty-label>`\n */\n@Component({\n  tag: 'admiralty-label',\n  styleUrl: 'label.scss',\n  shadow: true,\n})\nexport class LabelComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * The id of the input the label is attached to\n   */\n  @Prop() for: string;\n\n  render() {\n    return (\n      <label htmlFor={this.for} class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </label>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/admiralty-breadcrumb.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, H as Host } from './index-a64d8966.js';
+import { f as faChevronRight } from './index-e73d97b7.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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))));
+  }
+};
+BreadcrumbComponent.style = breadcrumbCss;
+
+export { BreadcrumbComponent as admiralty_breadcrumb };
+
+//# sourceMappingURL=admiralty-breadcrumb.entry.js.map

package/dist/esm/admiralty-breadcrumb.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-breadcrumb.entry.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/esm/admiralty-breadcrumbs.entry.js

@@ -0,0 +1,44 @@
+import { r as registerInstance, h, g as getElement } from './index-a64d8966.js';
+
+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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+};
+BreadcrumbsComponent.style = breadcrumbsCss;
+
+export { BreadcrumbsComponent as admiralty_breadcrumbs };
+
+//# sourceMappingURL=admiralty-breadcrumbs.entry.js.map

package/dist/esm/admiralty-breadcrumbs.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-breadcrumbs.entry.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/esm/admiralty-button.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, h } from './index-a64d8966.js';
+import { B as ButtonVariant } from './button.types-2655b2cf.js';
+
+const buttonCss = "@media (max-width: 1023px){.desktop-only{display:none}}@media (min-width: 1024px){.not-desktop{display:none}}@media (min-width: 1024px){.tablet-only{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop{display:none}}@media (min-width: 1024px){.phone-or-tablet{display:none}}@media (min-width: 1024px){.phone-only{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only{display:none}}button.primary{display:inline-flex;align-items:center;justify-content:center;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-size:21px;font-weight:normal;background-color:unset;cursor:pointer;height:60px;padding:15px 18px;white-space:nowrap;min-width:200px;background-color:#09315b;color:#ffffff;border:2px solid #09315b}button.primary:focus{outline:3px solid #ffdd00}button.primary:disabled{cursor:default}button.primary:disabled *{pointer-events:none}button.primary i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}@media (max-width: 1023px){button.primary{min-width:unset;max-width:200px;width:100%;height:50px;padding:10px 18px}}button.primary i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}button.primary:hover{background-color:#03284f;border:2px solid #03284f}button.primary:enabled:active{background-color:#ffffff;border:2px solid #09315b;color:#09315b}button.primary:enabled:active i{color:#09315b}button.primary:enabled:active p{color:#09315b}button.primary:disabled{background-color:#adadad;border:2px solid #adadad}button.secondary{display:inline-flex;align-items:center;justify-content:center;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-size:21px;font-weight:normal;background-color:unset;cursor:pointer;height:60px;padding:15px 18px;white-space:nowrap;min-width:200px;background-color:#ffffff;color:#05284e;border:2px solid #05284e}button.secondary:focus{outline:3px solid #ffdd00}button.secondary:disabled{cursor:default}button.secondary:disabled *{pointer-events:none}button.secondary i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}@media (max-width: 1023px){button.secondary{min-width:unset;max-width:200px;width:100%;height:50px;padding:10px 18px}}button.secondary i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}button.secondary:hover{background-color:#eeeeee;border:2px solid #05284e}button.secondary:enabled:active{background-color:#05284e;border:2px solid #05284e;color:#ffffff}button.secondary:enabled:active i{color:#ffffff}button.secondary:enabled:active p{color:#ffffff}button.secondary:disabled{background-color:#adadad;border:2px solid #adadad}button.secondary i{color:#05284e}button.warning{display:inline-flex;align-items:center;justify-content:center;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-size:21px;font-weight:normal;background-color:unset;cursor:pointer;height:60px;padding:15px 18px;white-space:nowrap;min-width:200px;background-color:#e20d0d;color:#ffffff;border:2px solid #e20d0d}button.warning:focus{outline:3px solid #ffdd00}button.warning:disabled{cursor:default}button.warning:disabled *{pointer-events:none}button.warning i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}@media (max-width: 1023px){button.warning{min-width:unset;max-width:200px;width:100%;height:50px;padding:10px 18px}}button.warning i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}button.warning:hover{background-color:#bd0404;border:2px solid #bd0404}button.warning:enabled:active{background-color:#ffffff;border:2px solid #e20d0d;color:#e20d0d}button.warning:enabled:active i{color:#e20d0d}button.warning:enabled:active p{color:#e20d0d}button.warning:disabled{background-color:#adadad;border:2px solid #adadad}button.warning:disabled>*{opacity:0.5}button.warning i{color:#ffffff}button.text{display:inline-flex;align-items:center;justify-content:center;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-size:21px;font-weight:normal;background-color:unset;cursor:pointer;color:#05284e}button.text:focus{outline:3px solid #ffdd00}button.text:disabled{cursor:default}button.text:disabled *{pointer-events:none}button.text i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}button.text:enabled:active{color:#05284e}button.text:enabled:active i{color:#05284e}button.text:enabled:active p{color:#05284e}button.text:disabled{color:#adadad}button.text:disabled>*{opacity:0.5}button.text:focus{outline-offset:3px}button.text i{color:#05284e}button.icon{display:inline-flex;align-items:center;justify-content:center;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-size:21px;font-weight:normal;background-color:unset;cursor:pointer;min-height:50px;min-width:50px;padding:10px 10px;background-color:var(--button-icon-background-colour, #eeeeee);color:#09315b;border:2px solid #09315b}button.icon:focus{outline:3px solid #ffdd00}button.icon:disabled{cursor:default}button.icon:disabled *{pointer-events:none}button.icon i{display:inline-block;font-size:24px;color:#ffffff;padding-left:15px}button.icon:enabled:active{background-color:#09315b;color:#ffffff}button.icon:disabled{opacity:0.3}button.icon:active:disabled{background-color:#eeeeee}button.icon i{margin:auto;font-size:unset;color:unset;padding-left:unset}";
+
+const ButtonComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = undefined;
+    this.icon = undefined;
+    this.disabled = false;
+    this.type = 'submit';
+  }
+  render() {
+    return (h("button", { type: this.type, disabled: this.disabled ? true : null, class: this.variant || ButtonVariant.Primary }, h("slot", null), this.icon ? h("admiralty-icon", { "icon-name": this.icon }) : undefined));
+  }
+};
+ButtonComponent.style = buttonCss;
+
+export { ButtonComponent as admiralty_button };
+
+//# sourceMappingURL=admiralty-button.entry.js.map

package/dist/esm/admiralty-button.entry.js.map

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

package/dist/esm/admiralty-card.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h } from './index-a64d8966.js';
+
+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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.heading = undefined;
+  }
+  render() {
+    return (h("section", { class: "card" }, this.heading ? h("h6", null, this.heading) : null, h("div", null, h("slot", null))));
+  }
+};
+CardComponent.style = cardCss;
+
+export { CardComponent as admiralty_card };
+
+//# sourceMappingURL=admiralty-card.entry.js.map

package/dist/esm/admiralty-card.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-card.entry.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/esm/admiralty-checkbox.entry.js

@@ -0,0 +1,50 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-a64d8966.js';
+
+const checkboxCss = ".form-control{font-size:18px;position:relative;display:inline-block}.form-control input[type=checkbox]{box-sizing:border-box;opacity:0;position:absolute;top:0;left:0;padding:0;width:30px;height:30px;margin:0;z-index:1;cursor:pointer}.form-control input[type=checkbox]:checked+label::after{content:\"\"}.form-control label{position:relative;display:inline-block;padding-left:42px;margin-bottom:14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;line-height:30px}.form-control label.disabled{cursor:default;pointer-events:none}.form-control label::before,.form-control label::after{position:absolute;content:none;display:inline-block}.form-control label::before{content:\"\";height:26px;width:26px;border:2px solid #03284f;left:0;top:0;background-color:#fff}.form-control label::after{height:8px;width:15px;border-left:3px solid;border-bottom:3px solid;transform:rotate(-45deg);color:#09315b;left:6px;top:7px}.form-control.right-align label{padding-left:unset;padding-right:35px}.form-control.right-align label::before{left:unset;right:0}.form-control.right-align label::after{left:unset;right:6px}";
+
+const CheckboxComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.checkboxChange = createEvent(this, "checkboxChange", 7);
+    this.checkboxFocus = createEvent(this, "checkboxFocus", 7);
+    this.checkboxBlur = createEvent(this, "checkboxBlur", 7);
+    this.inputId = `admiralty-${checkboxIds++}`;
+    this.onBlur = () => {
+      this.checkboxBlur.emit();
+    };
+    this.onClick = (ev) => {
+      if (!this.disabled) {
+        ev.preventDefault();
+        this.checked = !this.checked;
+      }
+    };
+    this.onFocus = () => {
+      this.checkboxFocus.emit();
+    };
+    this.checkboxRight = false;
+    this.disabled = false;
+    this.name = this.inputId;
+    this.checked = false;
+    this.value = undefined;
+    this.labelText = null;
+  }
+  checkedChanged(isChecked) {
+    this.checkboxChange.emit({
+      checked: isChecked,
+      value: this.value,
+    });
+  }
+  render() {
+    const { checked, checkboxRight, disabled, inputId, labelText, name } = this;
+    return (h(Host, null, h("div", { "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, role: "checkbox", class: { 'form-control': true, 'right-align': checkboxRight } }, h("input", { "aria-checked": `${checked}`, type: "checkbox", onBlur: () => this.onBlur(), onFocus: () => this.onFocus(), id: inputId, disabled: disabled, name: name, checked: checked }), h("label", { class: { disabled: disabled }, onClick: this.onClick, htmlFor: inputId }, labelText))));
+  }
+  static get watchers() { return {
+    "checked": ["checkedChanged"]
+  }; }
+};
+let checkboxIds = 0;
+CheckboxComponent.style = checkboxCss;
+
+export { CheckboxComponent as admiralty_checkbox };
+
+//# sourceMappingURL=admiralty-checkbox.entry.js.map

package/dist/esm/admiralty-checkbox.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-checkbox.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,2mCAA2mC;;MCOlnC,iBAAiB;;;;;;IACpB,YAAO,GAAG,aAAa,WAAW,EAAE,EAAE,CAAC;IA8DvC,WAAM,GAAG;MACf,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,YAAO,GAAG,CAAC,EAAO;MACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;OAC9B;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B,CAAC;yBAtE+B,KAAK;oBAKV,KAAK;gBAKV,IAAI,CAAC,OAAO;mBAKS,KAAK;;qBAcrB,IAAI;;EAqBhC,cAAc,CAAC,SAAkB;IAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;MACvB,OAAO,EAAE,SAAS;MAClB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;GACJ;EAiBD,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAE5E,QACE,EAAC,IAAI,QACH,2BAAmB,GAAG,OAAO,EAAE,iBAAe,QAAQ,GAAG,MAAM,GAAG,IAAI,EAAE,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,IACnJ,6BACgB,GAAG,OAAO,EAAE,EAC1B,IAAI,EAAC,UAAU,EACf,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAC7B,EAAE,EAAE,OAAO,EACX,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAChB,EACF,aAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,IAC1E,SAAS,CACJ,CACJ,CACD,EACP;GACH;;;;;AAGH,IAAI,WAAW,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/checkbox/checkbox.scss?tag=admiralty-checkbox&encapsulation=shadow","./src/components/checkbox/checkbox.tsx"],"sourcesContent":[".form-control {\r\n  font-size: 18px;\r\n  position: relative;\r\n  display: inline-block;\r\n\r\n  input[type=\"checkbox\"] {\r\n    box-sizing: border-box;\r\n    opacity: 0;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    padding: 0;\r\n    width: 30px;\r\n    height: 30px;\r\n    margin: 0;\r\n    z-index: 1;\r\n    cursor: pointer;\r\n\r\n    &:checked+label::after {\r\n      content: \"\";\r\n    }\r\n  }\r\n\r\n  label {\r\n    position: relative;\r\n    display: inline-block;\r\n    padding-left: 42px;\r\n    margin-bottom: 14px;\r\n    cursor: pointer;\r\n    -webkit-user-select: none;\r\n    -moz-user-select: none;\r\n    user-select: none;\r\n    line-height: 30px;\r\n\r\n    &.disabled {\r\n      cursor: default;\r\n      pointer-events: none;\r\n    }\r\n\r\n    &::before, &::after {\r\n      position: absolute;\r\n      content: none;\r\n      display: inline-block;\r\n    }\r\n\r\n\r\n    &::before {\r\n      content: \"\";\r\n      height: 26px;\r\n      width: 26px;\r\n      border: 2px solid #03284f;\r\n      left: 0;\r\n      top: 0;\r\n      background-color: #fff;\r\n    }\r\n\r\n    &::after {\r\n      height: 8px;\r\n      width: 15px;\r\n      border-left: 3px solid;\r\n      border-bottom: 3px solid;\r\n      transform: rotate(-45deg);\r\n      color: #09315b;\r\n      left: 6px;\r\n      top: 7px;\r\n    }\r\n  }\r\n\r\n  &.right-align label {\r\n    padding-left: unset;\r\n    padding-right: 35px;\r\n\r\n    &::before {\r\n      left: unset;\r\n      right: 0;\r\n    }\r\n\r\n    &::after {\r\n      left: unset;\r\n      right: 6px;\r\n    }\r\n  }\r\n}\r\n\r\n","import { Component, EventEmitter, Event, Host, h, Prop, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n})\nexport class CheckboxComponent {\n  private inputId = `admiralty-${checkboxIds++}`;\n\n  /**\n   * Whether the checkbox should be positioned to the right of the label.\n   */\n  @Prop() checkboxRight: boolean = false;\n\n  /**\n   * This dictates whether the form field is disabled.\n   */\n  @Prop() disabled: boolean = false;\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   * If `true`, the checkbox is selected.\n   */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  /**\n   * The value of the checkbox does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n   * it's only used when the checkbox participates in a native `<form>`.\n   */\n  @Prop() value: any | null;\n\n  /**\n   * The text that's displayed alongside the checkbox\n   */\n  @Prop() labelText: string = null;\n\n  /**\n   * Event is fired when the form control changes state\n   * @event radioChanges\n   */\n  @Event() checkboxChange: EventEmitter<any>;\n\n  /**\n   * Event is fired when the form control gains focus\n   * @event checkboxFocus\n   */\n  @Event() checkboxFocus: EventEmitter<any>;\n\n  /**\n   * Event is fired when the form control loses focus\n   * @event checkboxBlur\n   */\n  @Event() checkboxBlur: EventEmitter<any>;\n\n  @Watch('checked')\n  checkedChanged(isChecked: boolean) {\n    this.checkboxChange.emit({\n      checked: isChecked,\n      value: this.value,\n    });\n  }\n\n  private onBlur = () => {\n    this.checkboxBlur.emit();\n  };\n\n  private onClick = (ev: any) => {\n    if (!this.disabled) {\n      ev.preventDefault();\n      this.checked = !this.checked;\n    }\n  };\n\n  private onFocus = () => {\n    this.checkboxFocus.emit();\n  };\n\n  render() {\n    const { checked, checkboxRight, disabled, inputId, labelText, name } = this;\n\n    return (\n      <Host>\n        <div aria-checked={`${checked}`} aria-hidden={disabled ? 'true' : null} role=\"checkbox\" class={{ 'form-control': true, 'right-align': checkboxRight }}>\n          <input\n            aria-checked={`${checked}`}\n            type=\"checkbox\"\n            onBlur={() => this.onBlur()}\n            onFocus={() => this.onFocus()}\n            id={inputId}\n            disabled={disabled}\n            name={name}\n            checked={checked}\n          />\n          <label class={{ disabled: disabled }} onClick={this.onClick} htmlFor={inputId}>\n            {labelText}\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet checkboxIds = 0;\n"],"version":3}

package/dist/esm/admiralty-colour-block.entry.js

@@ -0,0 +1,33 @@
+import { r as registerInstance, h } from './index-a64d8966.js';
+import { B as ButtonVariant } from './button.types-2655b2cf.js';
+
+const colourBlockCss = "admiralty-colour-block .colourBlock{height:100%;width:100%;max-width:100%;padding:30px 18px;display:flex;flex-direction:column;box-sizing:border-box}admiralty-colour-block .colourBlock .content{flex-grow:1}admiralty-colour-block .colourBlock .clickAction{background-color:unset;align-self:flex-end;cursor:pointer}admiralty-colour-block .colourBlock .clickAction h3{margin-bottom:0px}admiralty-colour-block .colourBlock.admiralty-blue{background-color:#09315b}admiralty-colour-block .colourBlock.admiralty-blue *{color:#ffffff}admiralty-colour-block .colourBlock.teal{background-color:#007e97}admiralty-colour-block .colourBlock.teal *{color:#ffffff}admiralty-colour-block .colourBlock.bright-blue{background-color:#65c4db;color:#09315b}";
+
+const ColourBlockComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.width = undefined;
+    this.height = undefined;
+    this.heading = undefined;
+    this.colour = 'admiralty-blue';
+    this.clickAction = undefined;
+    this.actionText = undefined;
+  }
+  render() {
+    return (h("div", { class: {
+        colourBlock: true,
+        [this.colour]: true,
+      }, style: {
+        height: this.height ? `${this.height}px` : null,
+        width: this.width ? `${this.width}px` : null,
+      } }, h("h2", null, this.heading), h("div", { class: {
+        'content': true,
+        'white-text': this.colour === 'admiralty-blue' || this.colour === 'teal',
+      } }, h("slot", null)), this.clickAction && this.actionText ? (h("admiralty-button", { variant: ButtonVariant.Text, class: "clickAction", onClick: this.clickAction.bind(this) }, h("h3", null, this.actionText))) : null));
+  }
+};
+ColourBlockComponent.style = colourBlockCss;
+
+export { ColourBlockComponent as admiralty_colour_block };
+
+//# sourceMappingURL=admiralty-colour-block.entry.js.map

package/dist/esm/admiralty-colour-block.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-colour-block.entry.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,kuBAAkuB;;MCQ5uB,oBAAoB;;;;;;kBAgB6B,gBAAgB;;;;EAU5E,MAAM;IACJ,QACE,WACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI;OACpB,EACD,KAAK,EAAE;QACL,MAAM,EAAE,IAAI,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,GAAG,IAAI;QAC/C,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAC7C,IAED,cAAK,IAAI,CAAC,OAAO,CAAM,EACvB,WACE,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,YAAY,EAAE,IAAI,CAAC,MAAM,KAAK,gBAAgB,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM;OACzE,IAED,eAAa,CACT,EACL,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,UAAU,IAClC,wBAAkB,OAAO,EAAE,aAAa,CAAC,IAAI,EAAE,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IACrG,cAAK,IAAI,CAAC,UAAU,CAAM,CACT,IACjB,IAAI,CACJ,EACN;GACH;;;;;;","names":[],"sources":["./src/components/colour-block/colour-block.scss?tag=admiralty-colour-block","./src/components/colour-block/colour-block.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n\nadmiralty-colour-block {\n  .colourBlock {\n    height: 100%;\n    width: 100%;\n    max-width: 100%;\n    padding: 30px 18px;\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n\n    .content {\n      flex-grow: 1;\n    }\n\n    .clickAction {\n      background-color: unset;\n      align-self: flex-end;\n      cursor: pointer;\n\n      h3 {\n        margin-bottom: 0px;\n      }\n    }\n\n    &.admiralty-blue {\n      background-color: colours.$colour-admiralty-blue;\n      * {\n        color: colours.$colour-white;\n      }\n    }\n\n    &.teal {\n      background-color: colours.$colour-teal;\n      * {\n        color: colours.$colour-white;\n      }\n    }\n\n    &.bright-blue {\n      background-color: colours.$colour-bright-blue;\n      color: colours.$colour-admiralty-blue;\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { ButtonVariant } from '../button/button.types';\n\n@Component({\n  tag: 'admiralty-colour-block',\n  styleUrl: 'colour-block.scss',\n  shadow: false,\n})\nexport class ColourBlockComponent {\n  /**\n   * The width in pixels of the component.\n   */\n  @Prop() width: number;\n  /**\n   * The height in pixels of the component.\n   */\n  @Prop() height: number;\n  /**\n   * The heading text to display.\n   */\n  @Prop() heading: string;\n  /**\n   * The background colour of the component.\n   */\n  @Prop() colour: 'admiralty-blue' | 'teal' | 'bright-blue' = 'admiralty-blue';\n  /**\n   * The function to call when the action button is pressed.\n   */\n  @Prop() clickAction: () => any;\n  /**\n   * The text to display on the action button\n   */\n  @Prop() actionText: string;\n\n  render() {\n    return (\n      <div\n        class={{\n          colourBlock: true,\n          [this.colour]: true,\n        }}\n        style={{\n          height: this.height ? `${this.height}px` : null,\n          width: this.width ? `${this.width}px` : null,\n        }}\n      >\n        <h2>{this.heading}</h2>\n        <div\n          class={{\n            'content': true,\n            'white-text': this.colour === 'admiralty-blue' || this.colour === 'teal',\n          }}\n        >\n          <slot></slot>\n        </div>\n        {this.clickAction && this.actionText ? (\n          <admiralty-button variant={ButtonVariant.Text} class=\"clickAction\" onClick={this.clickAction.bind(this)}>\n            <h3>{this.actionText}</h3>\n          </admiralty-button>\n        ) : null}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/admiralty-dialogue.entry.js

@@ -0,0 +1,35 @@
+import { r as registerInstance, h } from './index-a64d8966.js';
+import { a as faExclamation, b as faCheck, c as faTriangleExclamation, d as faCircleInfo } from './index-e73d97b7.js';
+
+const dialogueCss = "@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}}.dialogue{box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2);padding:30px 18px;overflow-wrap:break-word;word-wrap:break-word}@media (max-width: 1023px){.dialogue{padding:24px 18px}}.dialogue .dialogue-title{color:#09315b;font-size:20px;font-weight:normal;line-height:30px;display:flex;align-items:center;overflow-wrap:break-word;word-wrap:break-word;margin-bottom:12px}.dialogue .dialogue-title .dialogue-title-icon{margin-right:12px}.dialogue.info{border-left:5px solid #0177c1;background-color:#e0ecf3}.dialogue.error{border-left:5px solid #e20d0d;background-color:#f7e1e1}.dialogue.success{border-left:5px solid #47a234;background-color:#e7f1e5}.dialogue.warning{border-left:5px solid #e3660e;background-color:#f8ede3}";
+
+const DialogueComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.type = 'info';
+    this.heading = undefined;
+  }
+  getIconNameForType() {
+    switch (this.type) {
+      case 'info':
+        return faCircleInfo;
+      case 'warning':
+        return faTriangleExclamation;
+      case 'success':
+        return faCheck;
+      case 'error':
+        return faExclamation;
+    }
+  }
+  render() {
+    return (h("section", { class: {
+        dialogue: true,
+        [this.type]: true,
+      } }, h("div", { class: "dialogue-title" }, h("admiralty-icon", { class: "dialogue-title-icon", "icon-name": this.getIconNameForType().iconName }), this.heading), h("slot", null)));
+  }
+};
+DialogueComponent.style = dialogueCss;
+
+export { DialogueComponent as admiralty_dialogue };
+
+//# sourceMappingURL=admiralty-dialogue.entry.js.map

package/dist/esm/admiralty-dialogue.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-dialogue.entry.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,ksCAAksC;;MCSzsC,iBAAiB;;;gBAI6B,MAAM;;;EAO/D,kBAAkB;IAChB,QAAQ,IAAI,CAAC,IAAI;MACf,KAAK,MAAM;QACT,OAAO,YAAY,CAAC;MACtB,KAAK,SAAS;QACZ,OAAO,qBAAqB,CAAC;MAC/B,KAAK,SAAS;QACZ,OAAO,OAAO,CAAC;MACjB,KAAK,OAAO;QACV,OAAO,aAAa,CAAC;KACxB;GACF;EAED,MAAM;IACJ,QACE,eACE,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;OAClB,IAED,WAAK,KAAK,EAAC,gBAAgB,IACzB,sBAAgB,KAAK,EAAC,qBAAqB,eAAY,IAAI,CAAC,kBAAkB,EAAE,CAAC,QAAQ,GAAmB,EAC3G,IAAI,CAAC,OAAO,CACT,EACN,eAAa,CACL,EACV;GACH;;;;;;","names":[],"sources":["./src/components/dialogue/dialogue.scss?tag=admiralty-dialogue&encapsulation=shadow","./src/components/dialogue/dialogue.tsx"],"sourcesContent":["@use \"../../scss/base/responsive\";\r\n@use \"../../scss/vars/typography\";\r\n@use \"../../scss/vars/colours\";\r\n\r\n.dialogue {\r\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);\r\n  padding: 30px 18px;\r\n  overflow-wrap: break-word;\r\n  word-wrap: break-word;\r\n\r\n  @include responsive.not-desktop {\r\n    padding: 24px 18px;\r\n  }\r\n\r\n  .dialogue-title {\r\n    color: colours.$colour-admiralty-blue;\r\n    font-size: 20px;\r\n    font-weight: typography.$font-weight-medium;\r\n    line-height: 30px;\r\n    display: flex;\r\n    align-items: center;\r\n    overflow-wrap: break-word;\r\n    word-wrap: break-word;\r\n    margin-bottom: 12px;\r\n\r\n    .dialogue-title-icon {\r\n      margin-right: 12px;\r\n    }\r\n  }\r\n\r\n  &.info {\r\n    border-left: 5px solid colours.$colour-utility-info;\r\n    background-color: colours.$colour-utility-info-bg;\r\n  }\r\n\r\n  &.error {\r\n    border-left: 5px solid colours.$colour-utility-error;\r\n    background-color: colours.$colour-utility-error-bg;\r\n  }\r\n  &.success {\r\n    border-left: 5px solid colours.$colour-utility-success;\r\n    background-color: colours.$colour-utility-success-bg;\r\n  }\r\n  &.warning {\r\n    border-left: 5px solid colours.$colour-utility-warning;\r\n    background-color: colours.$colour-utility-warning-bg;\r\n  }\r\n}\r\n","import { Component, Prop, h } from '@stencil/core';\nimport { faCheck, faCircleInfo, faExclamation, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n  tag: 'admiralty-dialogue',\n  styleUrl: 'dialogue.scss',\n  shadow: true,\n})\nexport class DialogueComponent {\n  /**\n   * The type of dialogue box to render.\n   */\n  @Prop() type: 'info' | 'warning' | 'success' | 'error' = 'info';\n\n  /**\n   * The heading to display.\n   */\n  @Prop() heading: string;\n\n  getIconNameForType(): IconDefinition {\n    switch (this.type) {\n      case 'info':\n        return faCircleInfo;\n      case 'warning':\n        return faTriangleExclamation;\n      case 'success':\n        return faCheck;\n      case 'error':\n        return faExclamation;\n    }\n  }\n\n  render() {\n    return (\n      <section\n        class={{\n          dialogue: true,\n          [this.type]: true,\n        }}\n      >\n        <div class=\"dialogue-title\">\n          <admiralty-icon class=\"dialogue-title-icon\" icon-name={this.getIconNameForType().iconName}></admiralty-icon>\n          {this.heading}\n        </div>\n        <slot></slot>\n      </section>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/admiralty-expansion.entry.js

@@ -0,0 +1,38 @@
+import { r as registerInstance, c as createEvent, h } from './index-a64d8966.js';
+import { g as faChevronUp, h as faChevronDown } from './index-e73d97b7.js';
+
+const expansionCss = "admiralty-expansion section.expansion{padding:2px 0;border-bottom:1px solid transparent}admiralty-expansion section.expansion.bordered{border-bottom:1px solid #d8d8d8}admiralty-expansion section.expansion .expansion-content{display:none;max-height:0;overflow:visible}admiralty-expansion section.expansion.expanded .expansion-content{display:block;max-height:initial;padding-bottom:12px}admiralty-expansion section.expansion button{background-color:transparent;border:none;height:initial;min-width:unset;max-width:unset;white-space:unset;color:initial;font-size:16px;cursor:pointer;margin:10px 0 22px;padding:0;display:flex;align-items:baseline;width:100%;text-align:left;position:relative}admiralty-expansion section.expansion button .expansion-heading-icon{color:#09315b;margin-left:30px}admiralty-expansion section.expansion button:focus{outline:none}admiralty-expansion section.expansion button h3,admiralty-expansion section.expansion button button{flex-grow:1;margin-bottom:0}admiralty-expansion section.expansion button h3.expansion-heading-right-align,admiralty-expansion section.expansion button button.expansion-heading-right-align{text-align:right}admiralty-expansion section.expansion button:focus h3::before,admiralty-expansion section.expansion button:focus button::before{content:\"\";position:absolute;top:0;bottom:0;right:-3px;left:-3px;box-shadow:0 0 0 3px #ffdd00}";
+
+let nextId = 0;
+const ExpansionComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.toggled = createEvent(this, "toggled", 7);
+    this.id = `admiralty-expansion-${++nextId}`;
+    this.headerId = `${this.id}-header`;
+    this.contentId = `${this.id}-content`;
+    this.heading = undefined;
+    this.expanded = false;
+    this.alignHeadingRight = false;
+    this.hideBorder = false;
+  }
+  onToggle() {
+    this.expanded = !this.expanded;
+    this.toggled.emit(this.expanded);
+  }
+  getExpansionIcon() {
+    return this.expanded ? faChevronUp : faChevronDown;
+  }
+  render() {
+    return (h("section", { class: {
+        expansion: true,
+        expanded: this.expanded,
+        bordered: !this.hideBorder,
+      } }, h("button", { id: this.headerId, type: "button", "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "expansion-heading-button", onClick: this.onToggle.bind(this) }, h("h3", { class: { 'expansion-heading-right-align': this.alignHeadingRight } }, this.heading), h("span", { class: "visually-hidden" }, ", ", this.expanded ? 'Hide' : 'Show', " this section"), h("admiralty-icon", { class: "expansion-heading-icon", "icon-name": this.getExpansionIcon().iconName })), h("div", { class: "expansion-content", id: this.contentId, "aria-labelledby": this.headerId, hidden: !this.expanded }, h("slot", null))));
+  }
+};
+ExpansionComponent.style = expansionCss;
+
+export { ExpansionComponent as admiralty_expansion };
+
+//# sourceMappingURL=admiralty-expansion.entry.js.map