@ukho/admiralty-core 0.0.0

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

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

package/dist/esm/admiralty-file-input.entry.js

@@ -0,0 +1,85 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a64d8966.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+};
+let nextId = 0;
+FileInputComponent.style = fileInputCss;
+
+export { FileInputComponent as admiralty_file_input };
+
+//# sourceMappingURL=admiralty-file-input.entry.js.map

package/dist/esm/admiralty-file-input.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-file-input.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,26BAA26B;;MCOn7B,kBAAkB;;;;IAkB7B,OAAE,GAAW,wBAAwB,EAAE,MAAM,EAAE,CAAC;;;;;;IAqEhD,WAAM,GAAG,UAAU,KAAa;MAC9B,IAAI,KAAK,KAAK,CAAC,EAAE;QACf,OAAO,QAAQ,CAAC;OACjB;MACD,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;MACrD,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;KAChF,CAAC;iBAvFsB,mCAAmC;oBAKxC,KAAK;;;;;;;EAkBxB,aAAa,CAAC,KAAY;IACxB,KAAK,CAAC,cAAc,EAAE,CAAC;IAEvB,IAAI,CAAC,aAAa,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;IAE7D,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtC,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3C;EAEO,aAAa,CAAC,KAAe;IACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAI,KAA2B,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;GAClF;;;;;;EAOD,eAAe,CAAC,KAAgB;IAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;GACtF;;;;;;EAOD,eAAe,CAAC,KAAgB;IAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;GACzF;;;;;;EAOD,WAAW,CAAC,KAAgB;IAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAExF,IAAI,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;MAC5B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;MAC7C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MACtC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC;GACF;EAED,IAAI,YAAY;IACd,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,EAAE,EAAE,CAAC;GAC5G;EAeD,MAAM;;IACJ,QACE,EAAC,IAAI,IAAC,WAAW,EAAE,KAAK,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,UAAU,EAAE,KAAK,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IACjJ,WAAK,KAAK,EAAC,sBAAsB,IAC/B,aAAO,OAAO,EAAE,IAAI,CAAC,EAAE,IACrB,sBAAgB,KAAK,EAAC,aAAa,eAAW,QAAQ,GAAkB,EACvE,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,IAAG,gBAAO,IAAI,CAAC,YAAY,CAAQ,GAAG,YAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAQ,CACjG,EACR,aACE,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,EAAE,EAAE,IAAI,CAAC,EAAE,iBACC,MAAM,gBACP,aAAa,EACxB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,sBAAsB,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACE,CACD,EACP;GACH;;;AAGH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","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/esm/admiralty-filter-group.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h } from './index-a64d8966.js';
+
+const filterGroupCss = "";
+
+const FilterGroupComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.groupTitle = undefined;
+  }
+  render() {
+    return (h("admiralty-expansion", { heading: this.groupTitle, "hide-border": true, expanded: true }, h("slot", null)));
+  }
+};
+FilterGroupComponent.style = filterGroupCss;
+
+export { FilterGroupComponent as admiralty_filter_group };
+
+//# sourceMappingURL=admiralty-filter-group.entry.js.map

package/dist/esm/admiralty-filter-group.entry.js.map

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

@@ -0,0 +1,28 @@
+import { r as registerInstance, c as createEvent, h } from './index-a64d8966.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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"))));
+  }
+};
+FilterComponent.style = filterCss;
+
+export { FilterComponent as admiralty_filter };
+
+//# sourceMappingURL=admiralty-filter.entry.js.map

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

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

@@ -0,0 +1,21 @@
+import { r as registerInstance, h } from './index-a64d8966.js';
+
+const footerCss = "admiralty-footer footer{border-top:#09315b 0.375rem solid;height:148px;background:#eeeeee;display:flex;flex-direction:row}admiralty-footer footer .footer-branding .footer-img{padding:24px;height:100%;box-sizing:border-box}admiralty-footer footer .footer-branding .footer-img img{min-width:186px;max-width:246px;height:100%}admiralty-footer footer .footer-content{flex-grow:1;display:flex;flex-direction:column;padding-right:30px}admiralty-footer footer .footer-content .footer-links{align-self:flex-end;flex-grow:1;margin-top:36px}admiralty-footer footer .footer-content .footer-links a{margin-left:1.5rem;font-weight:normal}admiralty-footer footer .footer-content .footer-text{align-self:flex-end;margin-bottom:24px}admiralty-footer footer .footer-content .footer-text p{text-align:right;margin:0;font-weight:300;font-size:16px;line-height:24px;color:#333333}";
+
+const FooterComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.imageLink = 'https://www.admiralty.co.uk/';
+    this.imageSrc = 'svg/UKHO stacked logo.svg';
+    this.imageAlt = 'Admiralty Maritime Data Solutions | UK Hydrographic Office';
+    this.text = `© Crown copyright ${new Date().getFullYear()} UK Hydrographic Office`;
+  }
+  render() {
+    return (h("footer", null, h("div", { class: "footer-branding" }, h("div", { class: "footer-img" }, h("a", { href: this.imageLink }, h("img", { src: this.imageSrc, alt: this.imageAlt })))), h("div", { class: "footer-content" }, h("nav", { "aria-label": "Footer Links", class: "footer-links" }, h("slot", null)), h("div", { class: "footer-text" }, h("p", null, this.text)))));
+  }
+};
+FooterComponent.style = footerCss;
+
+export { FooterComponent as admiralty_footer };
+
+//# sourceMappingURL=admiralty-footer.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"admiralty-footer.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,81BAA81B;;MCWn2B,eAAe;;;qBAIN,8BAA8B;oBAI/B,2BAA2B;oBAK3B,4DAA4D;gBAKhE,qBAAqB,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,yBAAyB;;EAErF,MAAM;IACJ,QACE,kBACE,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,YAAY,IACrB,SAAG,IAAI,EAAE,IAAI,CAAC,SAAS,IACrB,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC7C,CACA,CACF,EACN,WAAK,KAAK,EAAC,gBAAgB,IACzB,yBAAgB,cAAc,EAAC,KAAK,EAAC,cAAc,IACjD,eAAa,CACT,EACN,WAAK,KAAK,EAAC,aAAa,IACtB,aAAI,IAAI,CAAC,IAAI,CAAK,CACd,CACF,CACC,EACT;GACH;;;;;;","names":[],"sources":["./src/components/footer/footer.scss?tag=admiralty-footer","./src/components/footer/footer.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n\nadmiralty-footer footer {\n  border-top: colours.$colour-admiralty-blue 0.375rem solid;\n  height: 148px;\n  background: colours.$colour-bg-grey;\n  display: flex;\n  flex-direction: row;\n\n  .footer-branding {\n    .footer-img {\n      padding: 24px;\n      height: 100%;\n      box-sizing: border-box;\n      img {\n        min-width: 186px;\n        max-width: 246px;\n        height: 100%;\n      }\n    }\n  }\n\n  .footer-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    padding-right: 30px;\n    .footer-links {\n      align-self: flex-end;\n      flex-grow: 1;\n      margin-top: 36px;\n\n      a {\n        margin-left: 1.5rem;\n        font-weight: normal;\n      }\n    }\n\n    .footer-text {\n      align-self: flex-end;\n      margin-bottom: 24px;\n      p {\n        text-align: right;\n        margin: 0;\n        font-weight: 300;\n        font-size: 16px;\n        line-height: 24px;\n        color: colours.$colour-text;\n      }\n    }\n  }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @slot - Footer links should be placed in the slot e.g.\n * `<admiralty-link href=\"http://www.example.com\">Privacy Policy</admiralty-link>`\n */\n@Component({\n  tag: 'admiralty-footer',\n  styleUrl: 'footer.scss',\n  shadow: false,\n})\nexport class FooterComponent {\n  /**\n   * The URL that the image links to.\n   */\n  @Prop() imageLink = 'https://www.admiralty.co.uk/';\n  /**\n   * The source of the image displayed in the footer.\n   */\n  @Prop() imageSrc = 'svg/UKHO stacked logo.svg';\n  /**\n   * A description for the image displayed in the footer. This might be shown if the image\n   * fails to load or get read out by screen readers.\n   */\n  @Prop() imageAlt = 'Admiralty Maritime Data Solutions | UK Hydrographic Office';\n  /**\n   * The text to display in the footer. The default value displays crown copyright, the\n   * current year and `UK Hydrographic Office`.\n   */\n  @Prop() text = `© Crown copyright ${new Date().getFullYear()} UK Hydrographic Office`;\n\n  render() {\n    return (\n      <footer>\n        <div class=\"footer-branding\">\n          <div class=\"footer-img\">\n            <a href={this.imageLink}>\n              <img src={this.imageSrc} alt={this.imageAlt} />\n            </a>\n          </div>\n        </div>\n        <div class=\"footer-content\">\n          <nav aria-label=\"Footer Links\" class=\"footer-links\">\n            <slot></slot>\n          </nav>\n          <div class=\"footer-text\">\n            <p>{this.text}</p>\n          </div>\n        </div>\n      </footer>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/admiralty-header-menu-item.entry.js

@@ -0,0 +1,59 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a64d8966.js';
+
+const headerMenuItemCss = ".menu-item{cursor:pointer;display:flex;flex:0;flex-direction:column;font-size:18px !important;font-weight:400;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.menu-item .sub-menu{display:none;position:absolute;border:1px solid #d8d8d8;right:0;top:100%}.menu-item:hover{background-color:#f0f0f0;box-shadow:inset 0 -5px #09315b}.menu-item:hover .sub-menu{display:flex;flex-direction:column}.menu-item.active{background-color:#f0f0f0;box-shadow:inset 0 -5px #09315b}";
+
+const HeaderMenuItemComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.menuItemClick = createEvent(this, "menuItemClick", 7);
+    this.handleClick = (ev) => {
+      ev.stopPropagation();
+      return this.menuItemClick.emit();
+    };
+    /**
+     * Handles mouseover events, used to set the aria hidden attribute when submenu
+     * is visible
+     */
+    this.handleMouseOver = () => {
+      if (this.subMenuExists) {
+        this.subMenuSelector.setAttribute('aria-hidden', 'false');
+      }
+    };
+    /**
+     * Handles mouseover events, used to set the aria hidden attribute when submenu
+     * is no longer visible
+     */
+    this.handleMouseOut = () => {
+      if (this.subMenuExists) {
+        this.subMenuSelector.setAttribute('aria-hidden', 'true');
+      }
+    };
+    this.menuTitle = undefined;
+    this.active = false;
+  }
+  connectedCallback() {
+    // check if submenu exists on this menu item
+    try {
+      this.subMenuSelector = this.el.querySelector('admiralty-header-sub-menu-item');
+      this.subMenuExists = true;
+      if (this.subMenuExists) {
+        this.subMenuSelector.setAttribute('aria-hidden', 'true');
+      }
+    }
+    catch (e) {
+      this.subMenuExists = false;
+    }
+  }
+  render() {
+    const { active, menuTitle } = this;
+    let menuClass = 'menu-item ';
+    menuClass += active ? 'active' : '';
+    return (h(Host, { onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut }, h("div", { class: menuClass, onClick: this.handleClick }, menuTitle, h("div", { class: "sub-menu" }, h("slot", null)))));
+  }
+  get el() { return getElement(this); }
+};
+HeaderMenuItemComponent.style = headerMenuItemCss;
+
+export { HeaderMenuItemComponent as admiralty_header_menu_item };
+
+//# sourceMappingURL=admiralty-header-menu-item.entry.js.map

package/dist/esm/admiralty-header-menu-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-header-menu-item.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,2jBAA2jB;;MCUxkB,uBAAuB;;;;IAmClC,gBAAW,GAAG,CAAC,EAAc;MAC3B,EAAE,CAAC,eAAe,EAAE,CAAC;MACrB,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAClC,CAAC;;;;;IAMF,oBAAe,GAAG;MAChB,IAAI,IAAI,CAAC,aAAa,EAAE;QACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;OAC3D;KACF,CAAC;;;;;IAMF,mBAAc,GAAG;MACf,IAAI,IAAI,CAAC,aAAa,EAAE;QACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;OAC1D;KACF,CAAC;;kBA/CyB,KAAK;;EAUhC,iBAAiB;;IAEf,IAAI;MACF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gCAAgC,CAAC,CAAC;MAC/E,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;MAE1B,IAAI,IAAI,CAAC,aAAa,EAAE;QACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;OAC1D;KACF;IAAC,OAAO,CAAC,EAAE;MACV,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;GACF;EA2BD,MAAM;IACJ,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IACnC,IAAI,SAAS,GAAG,YAAY,CAAC;IAC7B,SAAS,IAAI,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC;IAEpC,QACE,EAAC,IAAI,IAAC,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,EAAE,IAAI,CAAC,cAAc,IACtE,WAAK,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,IAC7C,SAAS,EACV,WAAK,KAAK,EAAC,UAAU,IACnB,eAAQ,CACJ,CACF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header-menu-item/header-menu-item.scss?tag=admiralty-header-menu-item&encapsulation=shadow","./src/components/header-menu-item/header-menu-item.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\r\n\r\n@mixin active {\r\n  background-color: colours.$colour-nav-bg-hover;\r\n  box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\r\n}\r\n\r\n.menu-item {\r\n  cursor: pointer;\r\n  display: flex;\r\n  flex: 0;\r\n  flex-direction: column;\r\n  font-size: 18px !important;\r\n  font-weight: 400;\r\n  height: 100%;\r\n  justify-content: center;\r\n  line-height: 1.33em;\r\n  margin-bottom: 0;\r\n  min-width: 4em;\r\n  max-width: 11.1em;\r\n  padding: 0 1.65em;\r\n  position: relative;\r\n  text-align: center;\r\n\r\n    .sub-menu {\r\n      display: none;\r\n      position: absolute;\r\n      border: 1px solid colours.$colour-divider;\r\n      right: 0;\r\n      top: 100%;\r\n    }\r\n\r\n    &:hover{\r\n      @include active;\r\n\r\n      .sub-menu {\r\n        display: flex;\r\n        flex-direction: column\r\n      }\r\n    }\r\n\r\n    &.active {\r\n      @include active;\r\n    }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * @slot - 'admiralty-sub-header-menu-item' a number of components can be placed here to add sub items\n */\n@Component({\n  tag: 'admiralty-header-menu-item',\n  styleUrl: 'header-menu-item.scss',\n  shadow: true,\n})\nexport class HeaderMenuItemComponent {\n  @Element() el: HTMLElement;\n\n  /**\n   * The text that will be displayed in the menu\n   */\n  @Prop() menuTitle: string;\n\n  /**\n   * The text that will be displayed in the menu\n   */\n  @Prop() active?: boolean = false;\n\n  /**\n   * The event that is fired when a user clicks on the menu\n   */\n  @Event() menuItemClick: EventEmitter<void>;\n\n  subMenuExists: boolean;\n  subMenuSelector: HTMLElement;\n\n  connectedCallback() {\n    // check if submenu exists on this menu item\n    try {\n      this.subMenuSelector = this.el.querySelector('admiralty-header-sub-menu-item');\n      this.subMenuExists = true;\n\n      if (this.subMenuExists) {\n        this.subMenuSelector.setAttribute('aria-hidden', 'true');\n      }\n    } catch (e) {\n      this.subMenuExists = false;\n    }\n  }\n\n  handleClick = (ev: MouseEvent): CustomEvent<void> => {\n    ev.stopPropagation();\n    return this.menuItemClick.emit();\n  };\n\n  /**\n   * Handles mouseover events, used to set the aria hidden attribute when submenu\n   * is visible\n   */\n  handleMouseOver = (): void => {\n    if (this.subMenuExists) {\n      this.subMenuSelector.setAttribute('aria-hidden', 'false');\n    }\n  };\n\n  /**\n   * Handles mouseover events, used to set the aria hidden attribute when submenu\n   * is no longer visible\n   */\n  handleMouseOut = (): void => {\n    if (this.subMenuExists) {\n      this.subMenuSelector.setAttribute('aria-hidden', 'true');\n    }\n  };\n\n  render() {\n    const { active, menuTitle } = this;\n    let menuClass = 'menu-item ';\n    menuClass += active ? 'active' : '';\n\n    return (\n      <Host onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>\n        <div class={menuClass} onClick={this.handleClick}>\n          {menuTitle}\n          <div class=\"sub-menu\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/admiralty-header-profile.entry.js

@@ -0,0 +1,40 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-a64d8966.js';
+
+const headerProfileCss = ".header-profile{color:#09315b;cursor:pointer;display:flex;flex:0;flex-direction:column;font-size:18px !important;font-weight:400;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.header-profile button{all:unset;height:100%;width:100%}.header-profile:hover{background-color:#f0f0f0;box-shadow:inset 0 -5px #09315b}.header-profile:hover .sub-menu{display:flex}.header-profile.active{background-color:#f0f0f0;box-shadow:inset 0 -5px #09315b}.header-profile .sub-menu{display:none;flex-direction:column;font-size:18px;position:absolute;top:100%;right:0;border:1px solid #d8d8d8;width:300px}.header-profile .sub-menu .sub-menu-item{box-sizing:content-box;margin:0;width:100%}.header-profile .sub-menu .sub-menu-item button{all:unset;box-sizing:border-box;color:#09315b;cursor:pointer;display:block;font-weight:300;height:100%;padding:10px;text-align:left;width:100%}.header-profile .sub-menu .sub-menu-item button:hover{background-color:#f0f0f0}";
+
+const HeaderProfileComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.signInClicked = createEvent(this, "signInClicked", 7);
+    this.yourAccountClicked = createEvent(this, "yourAccountClicked", 7);
+    this.signOutClicked = createEvent(this, "signOutClicked", 7);
+    this.userProfileClicked = createEvent(this, "userProfileClicked", 7);
+    this.handleSignIn = () => {
+      this.signInClicked.emit();
+    };
+    this.handleSignOut = () => {
+      this.signOutClicked.emit();
+    };
+    this.handleYouAccount = () => {
+      this.yourAccountClicked.emit();
+    };
+    this.openDropdown = () => {
+      this.displaySubmenu = true;
+    };
+    this.closeDropdown = () => {
+      this.displaySubmenu = true;
+    };
+    this.displaySubmenu = false;
+    this.isSignedIn = false;
+    this.signedInText = 'replace';
+  }
+  render() {
+    let { isSignedIn, signedInText, displaySubmenu } = this;
+    return (h(Host, null, h("div", { class: "header-profile" }, isSignedIn ? (h("div", null, h("button", { onMouseOver: this.openDropdown, onMouseOut: this.closeDropdown }, signedInText), displaySubmenu ? (h("div", { class: "sub-menu" }, h("div", { class: "sub-menu-item" }, h("button", { onClick: this.handleYouAccount }, "Your Account")), h("div", { class: "sub-menu-item" }, h("button", { onClick: this.handleSignOut }, "Sign Out")))) : null)) : (h("button", { onClick: this.handleSignIn }, "Sign In")))));
+  }
+};
+HeaderProfileComponent.style = headerProfileCss;
+
+export { HeaderProfileComponent as admiralty_header_profile };
+
+//# sourceMappingURL=admiralty-header-profile.entry.js.map

package/dist/esm/admiralty-header-profile.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-header-profile.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,uhCAAuhC;;MCOniC,sBAAsB;;;;;;;IAqCjC,iBAAY,GAAG;MACb,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B,CAAC;IAEF,kBAAa,GAAG;MACd,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;KAC5B,CAAC;IAEF,qBAAgB,GAAG;MACjB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;KAChC,CAAC;IAEF,iBAAY,GAAG;MACb,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B,CAAC;IAEF,kBAAa,GAAG;MACd,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B,CAAC;0BAtDwB,KAAK;sBAKD,KAAK;wBAKJ,SAAS;;EA8CxC,MAAM;IACJ,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;IAExD,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,gBAAgB,IACxB,UAAU,IACT,eACE,cAAQ,WAAW,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,EAAE,IAAI,CAAC,aAAa,IACnE,YAAY,CACN,EACR,cAAc,IACb,WAAK,KAAK,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,eAAe,IACxB,cAAQ,OAAO,EAAE,IAAI,CAAC,gBAAgB,mBAAuB,CACzD,EACN,WAAK,KAAK,EAAC,eAAe,IACxB,cAAQ,OAAO,EAAE,IAAI,CAAC,aAAa,eAAmB,CAClD,CACF,IACJ,IAAI,CACJ,KAEN,cAAQ,OAAO,EAAE,IAAI,CAAC,YAAY,cAAkB,CACrD,CACG,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/header-profile/header-profile.scss?tag=admiralty-header-profile&encapsulation=shadow","./src/components/header-profile/header-profile.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\r\n\r\n@mixin active {\r\n  background-color: colours.$colour-nav-bg-hover;\r\n  box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\r\n}\r\n\r\n.header-profile {\r\n  color: colours.$colour-admiralty-blue;\r\n  cursor: pointer;\r\n  display: flex;\r\n  flex: 0;\r\n  flex-direction: column;\r\n  font-size: 18px !important;\r\n  font-weight: 400;\r\n  height: 100%;\r\n  justify-content: center;\r\n  line-height: 1.33em;\r\n  margin-bottom: 0;\r\n  min-width: 4em;\r\n  max-width: 11.1em;\r\n  padding: 0 1.65em;\r\n  position: relative;\r\n  text-align: center;\r\n\r\n  button {\r\n    all: unset;\r\n    height: 100%;\r\n    width: 100%;\r\n  }\r\n\r\n    &:hover{\r\n      @include active;\r\n\r\n      .sub-menu {\r\n        display: flex;\r\n      }\r\n    }\r\n\r\n    &.active {\r\n      @include active;\r\n    }\r\n\r\n  .sub-menu {\r\n    display: none;\r\n    flex-direction: column;\r\n    font-size: 18px;\r\n    position: absolute;\r\n    top: 100%;\r\n    right: 0;\r\n    border: 1px solid colours.$colour-divider;\r\n    width: 300px;\r\n\r\n    .sub-menu-item {\r\n      box-sizing: content-box;\r\n      margin: 0;\r\n      width: 100%;\r\n\r\n      button {\r\n        all: unset;\r\n        box-sizing: border-box;\r\n        color: colours.$colour-admiralty-blue;\r\n        cursor: pointer;\r\n        display: block;\r\n        font-weight: 300;\r\n        height: 100%;\r\n        padding: 10px;\r\n        text-align: left;\r\n        width: 100%;\r\n\r\n        &:hover {\r\n          background-color: colours.$colour-nav-bg-hover;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n","import { Component, Event, Host, h, Prop, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-header-profile',\n  styleUrl: 'header-profile.scss',\n  shadow: true,\n})\nexport class HeaderProfileComponent {\n  @State() displaySubmenu = false;\n\n  /**\n   * A boolean to indicate if the user is signed in or not\n   */\n  @Prop() isSignedIn: boolean = false;\n\n  /**\n   * The text that is displayed after the user signs in\n   */\n  @Prop() signedInText: string = 'replace';\n\n  /**\n   * The event that is fired when the user clicks on\n   * the sign in button\n   */\n  @Event() signInClicked: EventEmitter<void>;\n\n  /**\n   * The event that is fired when the user clicks on the\n   * 'Your account' button\n   */\n  @Event() yourAccountClicked: EventEmitter<void>;\n\n  /**\n   * The event that is fired when the user clicks on the\n   * 'sign out' button\n   */\n  @Event() signOutClicked: EventEmitter<void>;\n\n  /**\n   * TThe event that is fired when the user clicks 'user profile'\n   *  on the profile sub menu\n   */\n  @Event() userProfileClicked: EventEmitter<void>;\n\n  handleSignIn = () => {\n    this.signInClicked.emit();\n  };\n\n  handleSignOut = () => {\n    this.signOutClicked.emit();\n  };\n\n  handleYouAccount = () => {\n    this.yourAccountClicked.emit();\n  };\n\n  openDropdown = () => {\n    this.displaySubmenu = true;\n  };\n\n  closeDropdown = () => {\n    this.displaySubmenu = true;\n  };\n\n  render() {\n    let { isSignedIn, signedInText, displaySubmenu } = this;\n\n    return (\n      <Host>\n        <div class=\"header-profile\">\n          {isSignedIn ? (\n            <div>\n              <button onMouseOver={this.openDropdown} onMouseOut={this.closeDropdown}>\n                {signedInText}\n              </button>\n              {displaySubmenu ? (\n                <div class=\"sub-menu\">\n                  <div class=\"sub-menu-item\">\n                    <button onClick={this.handleYouAccount}>Your Account</button>\n                  </div>\n                  <div class=\"sub-menu-item\">\n                    <button onClick={this.handleSignOut}>Sign Out</button>\n                  </div>\n                </div>\n              ) : null}\n            </div>\n          ) : (\n            <button onClick={this.handleSignIn}>Sign In</button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/admiralty-header-sub-menu-item.entry.js

@@ -0,0 +1,24 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-a64d8966.js';
+
+const headerSubMenuItemCss = ".header-sub-menu-item{box-sizing:border-box;color:#09315b;display:block;font-size:18px;margin-bottom:0;padding:0 0.66em;text-align:center;width:300px}.header-sub-menu-item .title{display:block;padding:10px;text-align:center}.header-sub-menu-item:hover{background-color:#f0f0f0}";
+
+const HeaderMenuItemComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.subMenuItemClick = createEvent(this, "subMenuItemClick", 7);
+    this.handleClick = (ev) => {
+      ev.stopPropagation();
+      return this.subMenuItemClick.emit();
+    };
+    this.menuTitle = undefined;
+  }
+  render() {
+    const { menuTitle } = this;
+    return (h(Host, null, h("div", { class: "header-sub-menu-item", onClick: this.handleClick }, h("span", { class: "title" }, menuTitle))));
+  }
+};
+HeaderMenuItemComponent.style = headerSubMenuItemCss;
+
+export { HeaderMenuItemComponent as admiralty_header_sub_menu_item };
+
+//# sourceMappingURL=admiralty-header-sub-menu-item.entry.js.map

package/dist/esm/admiralty-header-sub-menu-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"admiralty-header-sub-menu-item.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,uRAAuR;;MCOvS,uBAAuB;;;;IAWlC,gBAAW,GAAG,CAAC,EAAc;MAC3B,EAAE,CAAC,eAAe,EAAE,CAAC;MACrB,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;KACrC,CAAC;;;EAEF,MAAM;IACJ,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAE3B,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACzD,YAAM,KAAK,EAAC,OAAO,IAAE,SAAS,CAAQ,CAClC,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/header-sub-menu-item/header-sub-menu-item.scss?tag=admiralty-header-sub-menu-item&encapsulation=shadow","./src/components/header-sub-menu-item/header-sub-menu-item.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\r\n\r\n@mixin active {\r\n  background-color: colours.$colour-nav-bg-hover;\r\n}\r\n\r\n.header-sub-menu-item {\r\n  box-sizing: border-box;\r\n  color: colours.$colour-admiralty-blue;\r\n  display: block;\r\n  font-size: 18px;\r\n  margin-bottom: 0;\r\n  padding: 0 .66em;\r\n  text-align: center;\r\n  width: 300px;\r\n\r\n  .title {\r\n    display: block;\r\n    padding: 10px;\r\n    text-align: center;\r\n  }\r\n\r\n  &:hover{\r\n    @include active;\r\n  }\r\n}\r\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-header-sub-menu-item',\n  styleUrl: 'header-sub-menu-item.scss',\n  shadow: true,\n})\nexport class HeaderMenuItemComponent {\n  /**\n   * The text that will be displayed in the menu\n   */\n  @Prop() menuTitle: string;\n\n  /**\n   * The event that is fired when a user clicks on the menu\n   */\n  @Event() subMenuItemClick: EventEmitter<void>;\n\n  handleClick = (ev: MouseEvent): CustomEvent<void> => {\n    ev.stopPropagation();\n    return this.subMenuItemClick.emit();\n  };\n\n  render() {\n    const { menuTitle } = this;\n\n    return (\n      <Host>\n        <div class=\"header-sub-menu-item\" onClick={this.handleClick}>\n          <span class=\"title\">{menuTitle}</span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,28 @@
+import { r as registerInstance, c as createEvent, h } from './index-a64d8966.js';
+
+const headerCss = ".admiralty-header{font-size:18px;font-weight:300;line-height:24px}.header-menu{border-bottom:1px solid #d8d8d8;display:flex;flex-direction:row;background-color:#fff;height:5em;min-height:5em;position:relative}.header-branding{display:flex;flex-direction:row;flex-grow:1;font-size:18px;padding:1.3em 0 1.3em 1.3em}.header-branding a.header-logo{background-color:transparent;color:#09315b}.header-branding a.header-logo img{height:100%;width:9em}.header-branding a.header-logo:focus{outline:3px solid #fd0;outline-offset:3px}.header-branding .vertical-seperator{border-right:1px solid #d8d8d8;margin-left:24px;margin-right:24px}.header-branding .header-title{display:flex;flex-direction:column;flex-grow:1;justify-content:center;font-size:2em;line-height:2em;margin-bottom:unset !important;user-select:none}.header-branding .header-title a{cursor:pointer;font-size:1em;font-weight:400;line-height:1;max-width:fit-content;text-decoration:none}.header-branding .header-title a:focus{outline:3px solid #fd0;outline-offset:3px}.menu-items{display:flex;flex:0;flex-direction:row;justify-content:flex-end}.header-profile{display:flex;flex:0;flex-direction:row;justify-content:flex-end}.mobile-header{background-color:white;display:flex;flex-direction:column;height:100%}.mobile-header .mobile-menu{background-color:white;display:block;height:100%}.mobile-header .menu-items{flex-direction:column}::slotted(admiralty-header-menu-item){color:red !important}";
+
+const HeaderComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.titledClicked = createEvent(this, "titledClicked", 7);
+    this.handleClick = (ev) => {
+      ev.preventDefault();
+      this.titledClicked.emit(this.headerTitleUrl);
+    };
+    this.headerTitle = undefined;
+    this.headerTitleUrl = null;
+    this.logoLinkUrl = 'https://www.admiralty.co.uk/';
+    this.logoImgUrl = 'svg/Admiralty stacked logo.svg';
+    this.logoAltText = 'Admiralty Stacked Logo';
+  }
+  render() {
+    const { logoAltText, logoLinkUrl, logoImgUrl, headerTitle, headerTitleUrl } = this;
+    return (h("div", { class: "admiralty-header" }, h("nav", { class: "header-menu" }, h("div", { class: "header-branding" }, h("a", { class: "header-logo", href: logoLinkUrl }, h("img", { class: "header-image", alt: logoAltText, src: logoImgUrl })), h("div", { class: "vertical-seperator" }), h("h1", { class: "header-title" }, h("a", { onClick: this.handleClick, href: headerTitleUrl }, headerTitle))), h("div", { role: "navigation", class: "menu-items" }, h("slot", { name: "items" })), h("div", { role: "navigation", class: "header-profile" }, h("slot", { name: "profile" })))));
+  }
+};
+HeaderComponent.style = headerCss;
+
+export { HeaderComponent as admiralty_header };
+
+//# sourceMappingURL=admiralty-header.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"admiralty-header.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,y6CAAy6C;;MCW96C,eAAe;;;;IA8BlB,gBAAW,GAAG,CAAC,EAAc;MACnC,EAAE,CAAC,cAAc,EAAE,CAAC;MACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9C,CAAC;;0BAxB+B,IAAI;uBAKP,8BAA8B;sBAK/B,gCAAgC;uBAK/B,wBAAwB;;EAWtD,MAAM;IACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;IAEnF,QACE,WAAK,KAAK,EAAC,kBAAkB,IAC3B,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,SAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,WAAW,IACtC,WAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,GAAI,CAC7D,EACJ,WAAK,KAAK,EAAC,oBAAoB,GAAO,EACtC,UAAI,KAAK,EAAC,cAAc,IACtB,SAAG,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,cAAc,IAC/C,WAAW,CACV,CACD,CACD,EACN,WAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,IACvC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,WAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gBAAgB,IAC3C,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,EACN;GACH;;;;;;","names":[],"sources":["./src/components/header/header.scss?tag=admiralty-header","./src/components/header/header.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\n@use \"../../scss/vars/responsive\" as responsive;\n\n.admiralty-header {\n  font-size: 18px;\n  font-weight: 300;\n  line-height: 24px;\n}\n\n.header-menu {\n  border-bottom: 1px solid #d8d8d8;\n  display: flex;\n  flex-direction: row;\n  background-color: #fff;\n  height: 5em;\n  min-height: 5em;\n  position: relative;\n}\n\n.header-branding {\n  display: flex;\n  flex-direction: row;\n  flex-grow: 1;\n  font-size: 18px;\n  padding: 1.3em 0 1.3em 1.3em;\n\n    a.header-logo {\n      background-color: transparent;\n      color: colours.$colour-admiralty-blue;\n\n      img {\n        height: 100%;\n        width: 9em;\n      }\n\n      &:focus {\n        outline: 3px solid #fd0;\n        outline-offset: 3px;\n      }\n    }\n\n    .vertical-seperator {\n      border-right: 1px solid colours.$colour-divider;\n      margin-left: 24px;\n      margin-right: 24px;\n    }\n\n    .header-title {\n      display: flex;\n      flex-direction: column;\n      flex-grow: 1;\n      justify-content: center;\n      font-size: 2em;\n      line-height: 2em;\n      margin-bottom: unset !important;\n      user-select: none;\n\n      a {\n        cursor: pointer;\n        font-size: 1em;\n        font-weight: 400;\n        line-height: 1;\n        max-width: fit-content;\n        text-decoration: none;\n\n        &:focus {\n          outline: 3px solid #fd0;\n          outline-offset: 3px;\n        }\n      }\n    }\n}\n\n.menu-items {\n  display: flex;\n  flex: 0;\n  flex-direction: row;\n  justify-content: flex-end;\n}\n\n.header-profile {\n  display: flex;\n  flex: 0;\n  flex-direction: row;\n  justify-content: flex-end;\n}\n\n.mobile-header {\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  .mobile-menu {\n    background-color: white;\n    display: block;\n    height: 100%;\n  }\n\n  .menu-items {\n    flex-direction: column;\n  }\n}\n\n::slotted(admiralty-header-menu-item) {\n  color: red !important;\n}\n","import { Component, Prop, h, EventEmitter, Event } from '@stencil/core';\n\n/**\n * @slot items - 'admiralty-header-menu-item menu-title' components are placed here for appropiate styling and behaviour\n * @slot profile - 'admiralty-header-profile' components are placed here (the login/logout) options\n */\n@Component({\n  tag: 'admiralty-header',\n  styleUrl: 'header.scss',\n  shadow: false,\n})\nexport class HeaderComponent {\n  /**\n   * The header title that is displayed to the right of the logo\n   */\n  @Prop() headerTitle: string;\n\n  /**\n   * The url that clicking on the nav link will take you too\n   */\n  @Prop() headerTitleUrl: string = null;\n\n  /**\n   * The destination url when the logo is clicked\n   */\n  @Prop() logoLinkUrl: string = 'https://www.admiralty.co.uk/';\n\n  /**\n   * The uri of the logo image\n   */\n  @Prop() logoImgUrl: string = 'svg/Admiralty stacked logo.svg';\n\n  /**\n   * The alternate image text for the logo image\n   */\n  @Prop() logoAltText: string = 'Admiralty Stacked Logo';\n\n  /**\n   * Emits an event that can be listened to when the title in the header is clicked\n   */\n  @Event() titledClicked: EventEmitter<string>;\n  private handleClick = (ev: MouseEvent) => {\n    ev.preventDefault();\n    this.titledClicked.emit(this.headerTitleUrl);\n  };\n\n  render() {\n    const { logoAltText, logoLinkUrl, logoImgUrl, headerTitle, headerTitleUrl } = this;\n\n    return (\n      <div class=\"admiralty-header\">\n        <nav class=\"header-menu\">\n          <div class=\"header-branding\">\n            <a class=\"header-logo\" href={logoLinkUrl}>\n              <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n            </a>\n            <div class=\"vertical-seperator\"></div>\n            <h1 class=\"header-title\">\n              <a onClick={this.handleClick} href={headerTitleUrl}>\n                {headerTitle}\n              </a>\n            </h1>\n          </div>\n          <div role=\"navigation\" class=\"menu-items\">\n            <slot name=\"items\"></slot>\n          </div>\n          <div role=\"navigation\" class=\"header-profile\">\n            <slot name=\"profile\"></slot>\n          </div>\n        </nav>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,45 @@
+import { r as registerInstance, h, H as Host } from './index-a64d8966.js';
+import { a as faExclamation } from './index-e73d97b7.js';
+
+const hintCss = "p{margin-top:0;margin-bottom:6px;display:block;font-weight:300}p.disabled{color:#adadad}";
+
+const HintComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.disabled = undefined;
+  }
+  render() {
+    return (h("p", { class: { disabled: this.disabled } }, h("slot", null)));
+  }
+};
+HintComponent.style = hintCss;
+
+const inputErrorCss = ":host{display:flex;align-items:center}admiralty-icon{color:#e20d0d}p{margin:0;color:#e20d0d}";
+
+const InputError = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("admiralty-icon", { "icon-name": faExclamation.iconName, class: "error-icon" }), h("p", null, h("slot", null))));
+  }
+};
+InputError.style = inputErrorCss;
+
+const labelCss = "label{margin-bottom:6px;display:inline-block;font-weight:normal}label.disabled{color:#adadad}";
+
+const LabelComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.disabled = undefined;
+    this.for = undefined;
+  }
+  render() {
+    return (h("label", { htmlFor: this.for, class: { disabled: this.disabled } }, h("slot", null)));
+  }
+};
+LabelComponent.style = labelCss;
+
+export { HintComponent as admiralty_hint, InputError as admiralty_input_error, LabelComponent as admiralty_label };
+
+//# sourceMappingURL=admiralty-hint_3.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"admiralty-hint.admiralty-input-error.admiralty-label.entry.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,0FAA0F;;MCW7F,aAAa;;;;;EAMxB,MAAM;IACJ,QACE,SAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IACnC,eAAa,CACX,EACJ;GACH;;;;ACvBH,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;;;;ACtBH,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/hint/hint.scss?tag=admiralty-hint&encapsulation=shadow","./src/components/hint/hint.tsx","./src/components/input-error/input-error.scss?tag=admiralty-input-error&encapsulation=shadow","./src/components/input-error/input-error.tsx","./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\np {\r\n  margin-top: 0;\r\n  margin-bottom: 6px;\r\n  display: block;\r\n  font-weight: typography.$font-weight-light;\r\n\r\n  &.disabled {\r\n    color: colours.$colour-textinput-text-disabled;\r\n  }\r\n}\r\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - The hint content should be placed in the slot e.g.\n * `<admiralty-hint>Enter your full name</admiralty-hint>`\n */\n@Component({\n  tag: 'admiralty-hint',\n  styleUrl: 'hint.scss',\n  shadow: true,\n})\nexport class HintComponent {\n  /**\n   * The disabled option can be used to disable the component.\n   */\n  @Prop() disabled: boolean;\n\n  render() {\n    return (\n      <p class={{ disabled: this.disabled }}>\n        <slot></slot>\n      </p>\n    );\n  }\n}\n","@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","@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-hr.entry.js

@@ -0,0 +1,17 @@
+import { r as registerInstance, h } from './index-a64d8966.js';
+
+const horizontalRuleCss = "admiralty-hr{width:100%}admiralty-hr hr{border-top:1px solid #d0d0d0}";
+
+const HorizontalRuleComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h("hr", null);
+  }
+};
+HorizontalRuleComponent.style = horizontalRuleCss;
+
+export { HorizontalRuleComponent as admiralty_hr };
+
+//# sourceMappingURL=admiralty-hr.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"admiralty-hr.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,uEAAuE;;MCOpF,uBAAuB;;;;EAClC,MAAM;IACJ,OAAO,aAAM,CAAC;GACf;;;;;;","names":[],"sources":["./src/components/horizontal-rule/horizontal-rule.scss?tag=admiralty-hr","./src/components/horizontal-rule/horizontal-rule.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\";\n\nadmiralty-hr {\n  width: 100%;\n  hr {\n    border-top: 1px solid colours.$colour-line;\n  }\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'admiralty-hr',\n  styleUrl: 'horizontal-rule.scss',\n  shadow: false,\n})\nexport class HorizontalRuleComponent {\n  render() {\n    return <hr />;\n  }\n}\n"],"version":3}