@ukho/admiralty-core 0.0.0

package/dist/components/admiralty-checkbox.js

@@ -0,0 +1,75 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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"]
+  }; }
+  static get style() { return checkboxCss; }
+}, [1, "admiralty-checkbox", {
+    "checkboxRight": [4, "checkbox-right"],
+    "disabled": [4],
+    "name": [1],
+    "checked": [1028],
+    "value": [8],
+    "labelText": [1, "label-text"]
+  }]);
+let checkboxIds = 0;
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CheckboxComponent);
+      }
+      break;
+  } });
+}
+
+const AdmiraltyCheckbox = CheckboxComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyCheckbox, defineCustomElement };
+
+//# sourceMappingURL=admiralty-checkbox.js.map

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

@@ -0,0 +1 @@
+{"file":"admiralty-checkbox.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/components/admiralty-colour-block.d.ts

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

package/dist/components/admiralty-colour-block.js

@@ -0,0 +1,68 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as ButtonVariant, d as defineCustomElement$3 } from './button.js';
+import { d as defineCustomElement$2 } from './icon.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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));
+  }
+  static get style() { return colourBlockCss; }
+}, [4, "admiralty-colour-block", {
+    "width": [2],
+    "height": [2],
+    "heading": [1],
+    "colour": [1],
+    "clickAction": [16],
+    "actionText": [1, "action-text"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-colour-block", "admiralty-button", "admiralty-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-colour-block":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ColourBlockComponent);
+      }
+      break;
+    case "admiralty-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "admiralty-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const AdmiraltyColourBlock = ColourBlockComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyColourBlock, defineCustomElement };
+
+//# sourceMappingURL=admiralty-colour-block.js.map

package/dist/components/admiralty-colour-block.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-colour-block.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/components/admiralty-dialogue.d.ts

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

package/dist/components/admiralty-dialogue.js

@@ -0,0 +1,61 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as faExclamation, b as faCheck, c as faTriangleExclamation, e as faCircleInfo, d as defineCustomElement$2 } from './icon.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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)));
+  }
+  static get style() { return dialogueCss; }
+}, [1, "admiralty-dialogue", {
+    "type": [1],
+    "heading": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-dialogue", "admiralty-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-dialogue":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DialogueComponent);
+      }
+      break;
+    case "admiralty-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const AdmiraltyDialogue = DialogueComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyDialogue, defineCustomElement };
+
+//# sourceMappingURL=admiralty-dialogue.js.map

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

@@ -0,0 +1 @@
+{"file":"admiralty-dialogue.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/components/admiralty-expansion.d.ts

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

package/dist/components/admiralty-expansion.js

@@ -0,0 +1,8 @@
+import { E as ExpansionComponent, d as defineCustomElement$1 } from './expansion.js';
+
+const AdmiraltyExpansion = ExpansionComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyExpansion, defineCustomElement };
+
+//# sourceMappingURL=admiralty-expansion.js.map

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

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

package/dist/components/admiralty-file-input.d.ts

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

package/dist/components/admiralty-file-input.js

@@ -0,0 +1,113 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const fileInputCss = ".admiralty-file-input{background:#eee;display:flex;position:relative;border:2px dashed #09315b;min-height:120px;align-content:stretch;justify-content:stretch;margin-bottom:36px;font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300}.admiralty-file-input.drop_zone{background:#fff !important}.admiralty-file-input .upload-icon{color:#09315b;font-size:24px;font-weight:900;margin:0.4rem auto;text-align:center;flex:0 1}label{border-image-repeat:stretch;border-image-width:1;display:flex;align-content:center;flex-direction:column;flex:1;justify-content:center;cursor:pointer}label span{color:#09315b;flex:0 1;font-size:18px;font-weight:300;text-align:center;margin:0.4rem 0}label span.instructions{font-weight:normal}input[type=file]{align-items:baseline;overflow:visible;position:absolute;top:0;bottom:0;z-index:-1;width:100%}input[type=file]:focus{outline:3px solid #ffdd00;outline-offset:2px}";
+
+const FileInputComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.fileInputChange = createEvent(this, "fileInputChange", 7);
+    this.id = `admiralty-file-input-${++nextId}`;
+    /**
+     * Takes the bytes of a file and returns it as human readable figure
+     * @param bytes pass bytes throughs as a number
+     * @returns convers the bytes to the appropiate largest figure followed by the  format ie. 'kb', 'mb' etc
+     */
+    this.sizeOf = function (bytes) {
+      if (bytes === 0) {
+        return '0.00 B';
+      }
+      var e = Math.floor(Math.log(bytes) / Math.log(1024));
+      return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
+    };
+    this.label = 'Click to choose a file or drag it';
+    this.multiple = false;
+    this.files = undefined;
+  }
+  /**
+   * The event that is fired when the user clicks on the file input box and uses the default dialog
+   * @param event
+   */
+  changeHandler(event) {
+    event.preventDefault();
+    this.storeFileInfo(event.target.files);
+    this.fileInputChange.emit(this.files);
+    console.log('changeHandler:', this.files);
+  }
+  storeFileInfo(files) {
+    this.files = this.multiple ? [...files] : [files.item(0)];
+  }
+  /**
+   * Prevents default dragOver behaviour which, stops the file being downloaded to the browser
+   * in a new tab
+   * @param event
+   */
+  dragOverHandler(event) {
+    event.preventDefault();
+    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.add('drop_zone');
+  }
+  /**
+   * When this event is fired the 'drop_zone' class is removed from the wrapper 'admiralty-file-input' div
+   * which, turns the background back to off white
+   * @param event
+   */
+  dragLeaveHander(event) {
+    event.preventDefault();
+    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.remove('drop_zone');
+  }
+  /**
+   * Handles the 'file' the user drops into the input field
+   * Does a check if it's a file and update the interface with the filename and the size of the file
+   * @param event
+   */
+  dropHandler(event) {
+    event.preventDefault();
+    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.remove('drop_zone');
+    if (event.dataTransfer.files) {
+      this.storeFileInfo(event.dataTransfer.files);
+      this.fileInputChange.emit(this.files);
+      console.log('Drop: ', this.files);
+    }
+  }
+  get filesDisplay() {
+    return `${this.files[0].name} (${this.sizeOf(this.files[0].size)}) ${this.files.length > 1 ? ' ...' : ''}`;
+  }
+  render() {
+    var _a;
+    return (h(Host, { onDragLeave: event => this.dragLeaveHander(event), onDragOver: event => this.dragOverHandler(event), onDrop: event => this.dropHandler(event) }, h("div", { class: "admiralty-file-input" }, h("label", { htmlFor: this.id }, h("admiralty-icon", { class: "upload-icon", "icon-name": "upload" }), ((_a = this.files) === null || _a === void 0 ? void 0 : _a.length) ? h("span", null, this.filesDisplay) : h("span", { class: "instructions" }, this.label)), h("input", { onChange: event => this.changeHandler(event), id: this.id, "aria-hidden": "true", "aria-label": "File Upload", type: "file", class: "admiralty-form-field", multiple: this.multiple }))));
+  }
+  get el() { return this; }
+  static get style() { return fileInputCss; }
+}, [1, "admiralty-file-input", {
+    "label": [1],
+    "multiple": [4],
+    "files": [32]
+  }]);
+let nextId = 0;
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-file-input", "admiralty-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-file-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FileInputComponent);
+      }
+      break;
+    case "admiralty-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const AdmiraltyFileInput = FileInputComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyFileInput, defineCustomElement };
+
+//# sourceMappingURL=admiralty-file-input.js.map

package/dist/components/admiralty-file-input.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-file-input.js","mappings":"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","names":[],"sources":["./src/components/file-input/file-input.scss?tag=admiralty-file-input&encapsulation=shadow","./src/components/file-input/file-input.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n@use \"../../scss/vars/typography\";\n\n.admiralty-file-input {\n  background: #eee;\n  display: flex;\n  position: relative;\n  border: 2px dashed colours.$colour-admiralty-blue;;\n  min-height: 120px;\n  align-content: stretch;\n  justify-content: stretch;\n  margin-bottom: 36px;\n  font-family: typography.$font-family;\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: 300;\n\n  &.drop_zone { // active when file is dragged over label\n    background: #fff !important;\n  }\n\n  .upload-icon {\n    color: colours.$colour-admiralty-blue;\n    font-size: 24px;\n    font-weight: 900;\n    margin: .4rem auto;\n    text-align: center;\n    flex: 0 1;\n  }\n}\n\nlabel {\n  border-image-repeat: stretch;\n  border-image-width: 1;\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  flex:1;\n  justify-content: center;\n  cursor: pointer;\n\n  span {\n    color: colours.$colour-admiralty-blue;\n    flex: 0 1;\n    font-size: 18px;\n    font-weight: typography.$font-weight-light;\n    text-align: center;\n    margin: 0.4rem 0;\n\n    &.instructions {\n      font-weight: typography.$font-weight-medium;\n    }\n  }\n}\n\ninput[type=file] {\n  align-items: baseline;\n  overflow: visible;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: -1;\n  width: 100%;\n\n  &:focus {\n    outline: 3px solid colours.$colour-utility-focus;\n    outline-offset: 2px;\n  }\n}\n","import { Component, Element, Event, Host, h, Prop, State, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-file-input',\n  styleUrl: 'file-input.scss',\n  shadow: true,\n})\nexport class FileInputComponent {\n  @Element() el: HTMLElement;\n\n  /**\n   * Used to display instructions to the user and is replaced with the filename the user inputs\n   */\n  @Prop() label: string = 'Click to choose a file or drag it';\n\n  /**\n   * If true, enables multiple files to be selected or dragged\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Emitted when the added file(s) changes\n   */\n  @Event() fileInputChange: EventEmitter<File[]>;\n\n  id: string = `admiralty-file-input-${++nextId}`;\n\n  /**\n   * INTERNAL - The list of files currently in the field\n   */\n  @State() files: File[];\n\n  /**\n   * The event that is fired when the user clicks on the file input box and uses the default dialog\n   * @param event\n   */\n  changeHandler(event: Event) {\n    event.preventDefault();\n\n    this.storeFileInfo((event.target as HTMLInputElement).files);\n\n    this.fileInputChange.emit(this.files);\n    console.log('changeHandler:', this.files);\n  }\n\n  private storeFileInfo(files: FileList) {\n    this.files = this.multiple ? [...(files as unknown as File[])] : [files.item(0)];\n  }\n\n  /**\n   * Prevents default dragOver behaviour which, stops the file being downloaded to the browser\n   * in a new tab\n   * @param event\n   */\n  dragOverHandler(event: DragEvent) {\n    event.preventDefault();\n    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.add('drop_zone');\n  }\n\n  /**\n   * When this event is fired the 'drop_zone' class is removed from the wrapper 'admiralty-file-input' div\n   * which, turns the background back to off white\n   * @param event\n   */\n  dragLeaveHander(event: DragEvent) {\n    event.preventDefault();\n    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.remove('drop_zone');\n  }\n\n  /**\n   * Handles the 'file' the user drops into the input field\n   * Does a check if it's a file and update the interface with the filename and the size of the file\n   * @param event\n   */\n  dropHandler(event: DragEvent) {\n    event.preventDefault();\n    this.el.shadowRoot.querySelector('.admiralty-file-input').classList.remove('drop_zone');\n\n    if (event.dataTransfer.files) {\n      this.storeFileInfo(event.dataTransfer.files);\n      this.fileInputChange.emit(this.files);\n      console.log('Drop: ', this.files);\n    }\n  }\n\n  get filesDisplay() {\n    return `${this.files[0].name} (${this.sizeOf(this.files[0].size)}) ${this.files.length > 1 ? ' ...' : ''}`;\n  }\n\n  /**\n   * Takes the bytes of a file and returns it as human readable figure\n   * @param bytes pass bytes throughs as a number\n   * @returns convers the bytes to the appropiate largest figure followed by the  format ie. 'kb', 'mb' etc\n   */\n  sizeOf = function (bytes: number) {\n    if (bytes === 0) {\n      return '0.00 B';\n    }\n    var e = Math.floor(Math.log(bytes) / Math.log(1024));\n    return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';\n  };\n\n  render() {\n    return (\n      <Host onDragLeave={event => this.dragLeaveHander(event)} onDragOver={event => this.dragOverHandler(event)} onDrop={event => this.dropHandler(event)}>\n        <div class=\"admiralty-file-input\">\n          <label htmlFor={this.id}>\n            <admiralty-icon class=\"upload-icon\" icon-name=\"upload\"></admiralty-icon>\n            {this.files?.length ? <span>{this.filesDisplay}</span> : <span class=\"instructions\">{this.label}</span>}\n          </label>\n          <input\n            onChange={event => this.changeHandler(event)}\n            id={this.id}\n            aria-hidden=\"true\"\n            aria-label=\"File Upload\"\n            type=\"file\"\n            class=\"admiralty-form-field\"\n            multiple={this.multiple}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet nextId = 0;\n"],"version":3}

package/dist/components/admiralty-filter-group.d.ts

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

package/dist/components/admiralty-filter-group.js

@@ -0,0 +1,49 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './expansion.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const filterGroupCss = "";
+
+const FilterGroupComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.groupTitle = undefined;
+  }
+  render() {
+    return (h("admiralty-expansion", { heading: this.groupTitle, "hide-border": true, expanded: true }, h("slot", null)));
+  }
+  static get style() { return filterGroupCss; }
+}, [6, "admiralty-filter-group", {
+    "groupTitle": [1, "group-title"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-filter-group", "admiralty-expansion", "admiralty-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-filter-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FilterGroupComponent);
+      }
+      break;
+    case "admiralty-expansion":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "admiralty-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const AdmiraltyFilterGroup = FilterGroupComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyFilterGroup, defineCustomElement };
+
+//# sourceMappingURL=admiralty-filter-group.js.map

package/dist/components/admiralty-filter-group.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-filter-group.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,EAAE;;MCUZ,oBAAoB;;;;;;EAM/B,MAAM;IACJ,QACE,2BAAqB,OAAO,EAAE,IAAI,CAAC,UAAU,iBAAe,IAAI,EAAE,QAAQ,EAAE,IAAI,IAC9E,eAAa,CACO,EACtB;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/filter-group/filter-group.scss?tag=admiralty-filter-group&encapsulation=scoped","./src/components/filter-group/filter-group.tsx"],"sourcesContent":["","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @slot - You can place any content inside this element that you wish to use inside your filter component.\n */\n@Component({\n  tag: 'admiralty-filter-group',\n  styleUrl: 'filter-group.scss',\n  scoped: true,\n})\nexport class FilterGroupComponent {\n  /**\n   * The title of the filter group\n   */\n  @Prop() groupTitle: string;\n\n  render() {\n    return (\n      <admiralty-expansion heading={this.groupTitle} hide-border={true} expanded={true}>\n        <slot></slot>\n      </admiralty-expansion>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/admiralty-filter.js

@@ -0,0 +1,59 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './button.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const filterCss = "@charset \"UTF-8\";@media (max-width: 1023px){.desktop-only.sc-admiralty-filter{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-filter{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-filter{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-filter{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-filter{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-filter{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-filter{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-filter{display:none}}*.sc-admiralty-filter{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:18px;line-height:24px;font-weight:300;color:#333333}@media (max-width: 1023px){*.sc-admiralty-filter{font-size:16px}}a.sc-admiralty-filter{color:#09315b}a.sc-admiralty-filter:focus{outline:3px solid #ffdd00;outline-offset:1px}h1.sc-admiralty-filter{font-family:\"JohnstonITC\", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:48px;line-height:60px;margin:0 0 30px 0}@media (max-width: 1023px){h1.sc-admiralty-filter{font-size:46px;line-height:54px}}h2.sc-admiralty-filter,.filter-heading.sc-admiralty-filter .filter-title.sc-admiralty-filter{font-family:\"JohnstonITC\", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:36px;line-height:48px;margin-bottom:18px}@media (max-width: 1023px){h2.sc-admiralty-filter,.filter-heading.sc-admiralty-filter .filter-title.sc-admiralty-filter{font-size:34px;line-height:42px}}h3.sc-admiralty-filter,h4.sc-admiralty-filter,h5.sc-admiralty-filter{font-family:\"JohnstonITC\", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:21px;line-height:30px;margin-bottom:12px}@media (max-width: 1023px){h3.sc-admiralty-filter,h4.sc-admiralty-filter,h5.sc-admiralty-filter{font-size:20px;line-height:30px}}h6.sc-admiralty-filter{font-family:\"JohnstonITC\", Helvetica, sans-serif;color:#09315b;font-weight:normal;font-size:18px;line-height:24px;margin-bottom:12px}@media (max-width: 1023px){h6.sc-admiralty-filter{font-size:16px}}p.sc-admiralty-filter{font-family:\"JohnstonITC\", Helvetica, sans-serif;margin-bottom:30px}.intro.sc-admiralty-filter{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:28px;line-height:36px;margin-bottom:30px}@media (max-width: 1023px){.intro.sc-admiralty-filter{font-size:26px}}.small.sc-admiralty-filter{font-family:\"JohnstonITC\", Helvetica, sans-serif;font-size:16px}@media (max-width: 1023px){.small.sc-admiralty-filter{font-size:14px;line-height:22px}}blockquote.sc-admiralty-filter{font-family:\"JohnstonITC\", Helvetica, sans-serif;line-height:30px;width:100%;padding:24px 18px;border-left:5px solid #09315b;margin-bottom:30px;background:#eeeeee}@media (max-width: 1023px){blockquote.sc-admiralty-filter{line-height:24px}}ul.sc-admiralty-filter{font-family:\"JohnstonITC\", Helvetica, sans-serif;list-style:none}ul.sc-admiralty-filter a.sc-admiralty-filter{font-weight:300}ul.sc-admiralty-filter li.sc-admiralty-filter{margin-bottom:12px}ul.sc-admiralty-filter li.sc-admiralty-filter:before{content:\"■\";font-size:18px;color:#09315b;vertical-align:text-bottom;margin-right:12px}@media (max-width: 1023px){ul.sc-admiralty-filter li.sc-admiralty-filter:before{font-size:8px}}ol.sc-admiralty-filter{font-family:\"JohnstonITC\", Helvetica, sans-serif;list-style:none;counter-reset:li}ol.sc-admiralty-filter a.sc-admiralty-filter{font-weight:300}ol.sc-admiralty-filter li.sc-admiralty-filter:before{content:counter(li) \".\";color:#03284f;font-size:18px;margin-right:12px}ol.sc-admiralty-filter li.sc-admiralty-filter{counter-increment:li;margin-bottom:12px}.white-text.sc-admiralty-filter *.sc-admiralty-filter{color:#ffffff}.filter-heading.sc-admiralty-filter{display:flex;justify-content:space-between;align-items:baseline}.filter-heading.sc-admiralty-filter .button-wrapper.sc-admiralty-filter{position:relative;margin-left:28px}.filter-heading.sc-admiralty-filter .button-wrapper.sc-admiralty-filter button.text-link.sc-admiralty-filter{background-color:unset;border:none;color:black;padding:0;min-width:unset;width:unset;height:unset;font-size:16px;text-decoration:underline;font-weight:unset;cursor:pointer}.filter-heading.sc-admiralty-filter .button-wrapper.sc-admiralty-filter button.text-link.sc-admiralty-filter:hover{background-color:unset;border:unset}.filter-heading.sc-admiralty-filter .button-wrapper.sc-admiralty-filter button.text-link.sc-admiralty-filter:focus{outline:none}.filter-heading.sc-admiralty-filter .button-wrapper.sc-admiralty-filter button.text-link.sc-admiralty-filter:focus::after{content:\"\";position:absolute;top:-3px;bottom:0;right:-3px;left:-3px;box-shadow:0 0 0 3px #ffdd00}";
+
+const FilterComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.filterCleared = createEvent(this, "filterCleared", 7);
+    this.filterApplied = createEvent(this, "filterApplied", 7);
+    this.onFilterCleared = (ev) => {
+      ev.preventDefault();
+      this.filterCleared.emit();
+    };
+    this.onFilterApplied = (ev) => {
+      ev.preventDefault();
+      this.filterApplied.emit();
+    };
+    this.filterTitle = 'Filter';
+  }
+  render() {
+    return (h("div", { class: "filter-container" }, h("div", { class: "filter-heading" }, h("div", { class: "filter-title" }, this.filterTitle), h("div", { class: "button-wrapper" }, h("button", { type: "reset", class: "text-link", "aria-label": "Clear selected filters", onClick: this.onFilterCleared }, "Clear"))), h("div", null, h("slot", null)), h("div", null, h("admiralty-button", { onClick: this.onFilterApplied }, "Apply filters"))));
+  }
+  static get style() { return filterCss; }
+}, [6, "admiralty-filter", {
+    "filterTitle": [1, "filter-title"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["admiralty-filter", "admiralty-button", "admiralty-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "admiralty-filter":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FilterComponent);
+      }
+      break;
+    case "admiralty-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "admiralty-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const AdmiraltyFilter = FilterComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { AdmiraltyFilter, defineCustomElement };
+
+//# sourceMappingURL=admiralty-filter.js.map

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

@@ -0,0 +1 @@
+{"file":"admiralty-filter.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,msJAAmsJ;;MCUxsJ,eAAe;;;;;;IAgBlB,oBAAe,GAAG,CAAC,EAAS;MAClC,EAAE,CAAC,cAAc,EAAE,CAAC;MACpB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B,CAAC;IAEM,oBAAe,GAAG,CAAC,EAAS;MAClC,EAAE,CAAC,cAAc,EAAE,CAAC;MACpB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B,CAAC;uBApBoB,QAAQ;;EAsB9B,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,kBAAkB,IAC3B,WAAK,KAAK,EAAC,gBAAgB,IACzB,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAO,EAClD,WAAK,KAAK,EAAC,gBAAgB,IACzB,cAAQ,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,gBAAY,wBAAwB,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe,YAE/F,CACL,CACF,EACN,eACE,eAAa,CACT,EACN,eACE,wBAAkB,OAAO,EAAE,IAAI,CAAC,eAAe,oBAAkC,CAC7E,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/filter/filter.scss?tag=admiralty-filter&encapsulation=scoped","./src/components/filter/filter.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\r\n@use \"../../scss/base/typography\";\r\n\r\n.filter-heading {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: baseline;\r\n\r\n  .filter-title {\r\n    @extend h2\r\n  }\r\n\r\n  .button-wrapper {\r\n    position: relative;\r\n    margin-left: 28px;\r\n    /* TODO: If reused, move class to button component */\r\n    button.text-link {\r\n      background-color: unset;\r\n      border: none;\r\n      color: black;\r\n      padding: 0;\r\n      min-width: unset;\r\n      width: unset;\r\n      height: unset;\r\n      font-size: 16px;\r\n      text-decoration: underline;\r\n      font-weight: unset;\r\n      cursor: pointer;\r\n    }\r\n    button.text-link:hover {\r\n      background-color: unset;\r\n      border: unset;\r\n    }\r\n    button.text-link:focus {\r\n      outline: none;\r\n    }\r\n    button.text-link:focus::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: -3px;\r\n      bottom: 0;\r\n      right: -3px;\r\n      left: -3px;\r\n      box-shadow: 0 0 0 3px colours.$colour-utility-focus;\r\n    }\r\n  }\r\n}\r\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot - 'admiralty-filter-group' components can be placed inside of this element to render groups of filter controls. You can also place any elements you wish\n */\n@Component({\n  tag: 'admiralty-filter',\n  styleUrl: 'filter.scss',\n  scoped: true,\n})\nexport class FilterComponent {\n  /**\n   * The title of the filter\n   */\n  @Prop() filterTitle = 'Filter';\n\n  /**\n   * Event that is emitted when the filters are cleared\n   */\n  @Event() filterCleared: EventEmitter<void>;\n\n  /**\n   * Event that is emitted when the filters are applied\n   */\n  @Event() filterApplied: EventEmitter<void>;\n\n  private onFilterCleared = (ev: Event) => {\n    ev.preventDefault();\n    this.filterCleared.emit();\n  };\n\n  private onFilterApplied = (ev: Event) => {\n    ev.preventDefault();\n    this.filterApplied.emit();\n  };\n\n  render() {\n    return (\n      <div class=\"filter-container\">\n        <div class=\"filter-heading\">\n          <div class=\"filter-title\">{this.filterTitle}</div>\n          <div class=\"button-wrapper\">\n            <button type=\"reset\" class=\"text-link\" aria-label=\"Clear selected filters\" onClick={this.onFilterCleared}>\n              Clear\n            </button>\n          </div>\n        </div>\n        <div>\n          <slot></slot>\n        </div>\n        <div>\n          <admiralty-button onClick={this.onFilterApplied}>Apply filters</admiralty-button>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

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