@ukho/admiralty-core 0.0.0

package/dist/collection/components/header/header.css

@@ -0,0 +1,113 @@
+/* Core Palette */
+/* Supporting Palette */
+/* Secondary Palette */
+/* Digital Product Colours */
+/* Utility Colours */
+/* Button Colours */
+/* Primary */
+/* Secondary */
+/* Link Colours */
+/* Nav colours */
+/* Table colours */
+/* Tab colours */
+/* form text input colours */
+/* form textarea colours */
+/* radio button */
+/* checkbox */
+/* code snippet */
+/* Device Sizes - matching layout breakpoints */
+.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;
+}

package/dist/collection/components/header/header.js

@@ -0,0 +1,145 @@
+import { h } from '@stencil/core';
+/**
+ * @slot items - 'admiralty-header-menu-item menu-title' components are placed here for appropiate styling and behaviour
+ * @slot profile - 'admiralty-header-profile' components are placed here (the login/logout) options
+ */
+export class HeaderComponent {
+  constructor() {
+    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" })))));
+  }
+  static get is() { return "admiralty-header"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "headerTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The header title that is displayed to the right of the logo"
+        },
+        "attribute": "header-title",
+        "reflect": false
+      },
+      "headerTitleUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The url that clicking on the nav link will take you too"
+        },
+        "attribute": "header-title-url",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "logoLinkUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The destination url when the logo is clicked"
+        },
+        "attribute": "logo-link-url",
+        "reflect": false,
+        "defaultValue": "'https://www.admiralty.co.uk/'"
+      },
+      "logoImgUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The uri of the logo image"
+        },
+        "attribute": "logo-img-url",
+        "reflect": false,
+        "defaultValue": "'svg/Admiralty stacked logo.svg'"
+      },
+      "logoAltText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The alternate image text for the logo image"
+        },
+        "attribute": "logo-alt-text",
+        "reflect": false,
+        "defaultValue": "'Admiralty Stacked Logo'"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "titledClicked",
+        "name": "titledClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits an event that can be listened to when the title in the header is clicked"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=header.js.map

package/dist/collection/components/header/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAExE;;;GAGG;AAMH,MAAM,OAAO,eAAe;;IA8BlB,gBAAW,GAAG,CAAC,EAAc,EAAE,EAAE;MACvC,EAAE,CAAC,cAAc,EAAE,CAAC;MACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC/C,CAAC,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,OAAO,CACL,WAAK,KAAK,EAAC,kBAAkB;MAC3B,WAAK,KAAK,EAAC,aAAa;QACtB,WAAK,KAAK,EAAC,iBAAiB;UAC1B,SAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,WAAW;YACtC,WAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,GAAI,CAC7D;UACJ,WAAK,KAAK,EAAC,oBAAoB,GAAO;UACtC,UAAI,KAAK,EAAC,cAAc;YACtB,SAAG,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,cAAc,IAC/C,WAAW,CACV,CACD,CACD;QACN,WAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY;UACvC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;QACN,WAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gBAAgB;UAC3C,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/header/header.stories.data.js

@@ -0,0 +1,146 @@
+import { action } from '@storybook/addon-actions';
+export const mockMenuItemsWithSubItems = [
+  {
+    title: 'Item 1',
+    subitems: [
+      {
+        title: 'sub item 1',
+        clickAction: action('sub item clicked'),
+      },
+      {
+        title: 'Super long sub navigation item for wrapping',
+        clickAction: action('sub item clicked'),
+      },
+      {
+        title: 'sub item 3',
+        clickAction: action('sub item clicked'),
+      },
+    ],
+  },
+  {
+    title: 'Components & Patterns',
+    subitems: [
+      {
+        title: 'sub item 1',
+        clickAction: action('sub item clicked'),
+      },
+      {
+        title: 'sub item 2',
+        clickAction: action('sub item clicked'),
+      },
+    ],
+  },
+  {
+    title: 'Item 3',
+    subitems: [
+      {
+        title: 'sub item 1',
+        clickAction: action('sub item clicked'),
+      },
+    ],
+  },
+];
+export const mockMenuItemsWithSubItemsAndNavActive = [
+  {
+    title: 'Item 1',
+    subitems: [
+      {
+        title: 'sub item 1',
+        clickAction: action('sub item clicked'),
+      },
+      {
+        title: 'Super long sub navigation item for wrapping',
+        clickAction: action('sub item clicked'),
+      },
+      {
+        title: 'sub item 3',
+        clickAction: action('sub item clicked'),
+      },
+    ],
+  },
+  {
+    title: 'Components & Patterns',
+    navActive: true,
+    subitems: [
+      {
+        title: 'sub item 1',
+        clickAction: action('sub item clicked'),
+      },
+      {
+        title: 'sub item 2',
+        clickAction: action('sub item clicked'),
+      },
+    ],
+  },
+  {
+    title: 'Item 3',
+    subitems: [
+      {
+        title: 'sub item 1',
+        clickAction: action('sub item clicked'),
+      },
+    ],
+  },
+];
+export const mockMenuItemsWithSomeSubItems = [
+  {
+    title: 'Item 1',
+    subitems: [
+      {
+        title: 'sub item 1',
+        clickAction: action('sub item clicked'),
+      },
+      {
+        title: 'sub item 2',
+        clickAction: action('sub item clicked'),
+      },
+      {
+        title: 'sub item 3',
+        clickAction: action('sub item clicked'),
+      },
+    ],
+  },
+  {
+    title: 'Item 2',
+    clickAction: action('item clicked'),
+  },
+  {
+    title: 'Item 3',
+    subitems: [
+      {
+        title: 'sub item 1',
+        clickAction: action('sub item clicked'),
+      },
+    ],
+  },
+];
+export const mockMenuItemsWithNoSubItems = [
+  {
+    title: 'Item 1',
+    clickAction: action('item clicked'),
+  },
+  {
+    title: 'Item 2',
+    clickAction: action('item clicked'),
+  },
+  {
+    title: 'Item 3',
+    clickAction: action('item clicked'),
+  },
+];
+export const mockMenuItemsWithNoSubItemsAndNavActive = [
+  {
+    title: 'Item 1',
+    clickAction: action('item clicked'),
+  },
+  {
+    title: 'Item 2',
+    navActive: true,
+    clickAction: action('item clicked'),
+  },
+  {
+    title: 'Item 3',
+    clickAction: action('item clicked'),
+  },
+];
+//# sourceMappingURL=header.stories.data.js.map

package/dist/collection/components/header/header.stories.data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.stories.data.js","sourceRoot":"","sources":["../../../src/components/header/header.stories.data.ts"],"names":[],"mappings":"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","sourcesContent":["import { HeaderItem } from './header.types';\r\nimport { action } from '@storybook/addon-actions';\r\n\r\nexport const mockMenuItemsWithSubItems: HeaderItem[] = [\r\n  {\r\n    title: 'Item 1',\r\n    subitems: [\r\n      {\r\n        title: 'sub item 1',\r\n        clickAction:action('sub item clicked'),\r\n      },\r\n      {\r\n        title: 'Super long sub navigation item for wrapping',\r\n        clickAction:action('sub item clicked'),\r\n      },\r\n      {\r\n        title: 'sub item 3',\r\n        clickAction:action('sub item clicked'),\r\n      },\r\n    ],\r\n  },\r\n  {\r\n    title: 'Components & Patterns',\r\n    subitems: [\r\n      {\r\n        title: 'sub item 1',\r\n        clickAction:action('sub item clicked'),\r\n      },\r\n      {\r\n        title: 'sub item 2',\r\n        clickAction:action('sub item clicked'),\r\n      },\r\n    ],\r\n  },\r\n  {\r\n    title: 'Item 3',\r\n    subitems: [\r\n      {\r\n        title: 'sub item 1',\r\n        clickAction:action('sub item clicked'),\r\n      },\r\n    ],\r\n  },\r\n];\r\n\r\nexport const mockMenuItemsWithSubItemsAndNavActive: HeaderItem[] = [\r\n  {\r\n    title: 'Item 1',\r\n    subitems: [\r\n      {\r\n        title: 'sub item 1',\r\n        clickAction:action('sub item clicked'),\r\n      },\r\n      {\r\n        title: 'Super long sub navigation item for wrapping',\r\n        clickAction:action('sub item clicked'),\r\n      },\r\n      {\r\n        title: 'sub item 3',\r\n        clickAction:action('sub item clicked'),\r\n      },\r\n    ],\r\n  },\r\n  {\r\n    title: 'Components & Patterns',\r\n    navActive: true,\r\n    subitems: [\r\n      {\r\n        title: 'sub item 1',\r\n        clickAction:action('sub item clicked'),\r\n      },\r\n      {\r\n        title: 'sub item 2',\r\n        clickAction:action('sub item clicked'),\r\n      },\r\n    ],\r\n  },\r\n  {\r\n    title: 'Item 3',\r\n    subitems: [\r\n      {\r\n        title: 'sub item 1',\r\n        clickAction:action('sub item clicked'),\r\n      },\r\n    ],\r\n  },\r\n];\r\n\r\nexport const mockMenuItemsWithSomeSubItems: HeaderItem[] = [\r\n  {\r\n    title: 'Item 1',\r\n    subitems: [\r\n      {\r\n        title: 'sub item 1',\r\n        clickAction:action('sub item clicked'),\r\n      },\r\n      {\r\n        title: 'sub item 2',\r\n        clickAction:action('sub item clicked'),\r\n      },\r\n      {\r\n        title: 'sub item 3',\r\n        clickAction:action('sub item clicked'),\r\n      },\r\n    ],\r\n  },\r\n  {\r\n    title: 'Item 2',\r\n    clickAction:action('item clicked'),\r\n  },\r\n  {\r\n    title: 'Item 3',\r\n    subitems: [\r\n      {\r\n        title: 'sub item 1',\r\n        clickAction:action('sub item clicked'),\r\n      },\r\n    ],\r\n  },\r\n];\r\n\r\nexport const mockMenuItemsWithNoSubItems: HeaderItem[] = [\r\n  {\r\n    title: 'Item 1',\r\n    clickAction:action('item clicked'),\r\n  },\r\n  {\r\n    title: 'Item 2',\r\n    clickAction:action('item clicked'),\r\n  },\r\n  {\r\n    title: 'Item 3',\r\n    clickAction:action('item clicked'),\r\n  },\r\n];\r\n\r\nexport const mockMenuItemsWithNoSubItemsAndNavActive: HeaderItem[] = [\r\n  {\r\n    title: 'Item 1',\r\n    clickAction:action('item clicked'),\r\n  },\r\n  {\r\n    title: 'Item 2',\r\n    navActive: true,\r\n    clickAction:action('item clicked'),\r\n  },\r\n  {\r\n    title: 'Item 3',\r\n    clickAction:action('item clicked'),\r\n  },\r\n];\r\n"]}

package/dist/collection/components/header/header.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=header.types.js.map

package/dist/collection/components/header/header.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.types.js","sourceRoot":"","sources":["../../../src/components/header/header.types.ts"],"names":[],"mappings":"","sourcesContent":["export interface HeaderItem {\r\n  title: string;\r\n  clickAction?: () => any;\r\n  navActive?: boolean;\r\n  subitems?: HeaderSubItem[];\r\n}\r\n\r\nexport interface HeaderSubItem {\r\n  title: string;\r\n  clickAction: () => any;\r\n}\r\n"]}

package/dist/collection/components/header-menu-item/header-menu-item.css

@@ -0,0 +1,53 @@
+/* Core Palette */
+/* Supporting Palette */
+/* Secondary Palette */
+/* Digital Product Colours */
+/* Utility Colours */
+/* Button Colours */
+/* Primary */
+/* Secondary */
+/* Link Colours */
+/* Nav colours */
+/* Table colours */
+/* Tab colours */
+/* form text input colours */
+/* form textarea colours */
+/* radio button */
+/* checkbox */
+/* code snippet */
+.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;
+}

package/dist/collection/components/header-menu-item/header-menu-item.js

@@ -0,0 +1,122 @@
+import { h, Host } from '@stencil/core';
+/**
+ * @slot - 'admiralty-sub-header-menu-item' a number of components can be placed here to add sub items
+ */
+export class HeaderMenuItemComponent {
+  constructor() {
+    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)))));
+  }
+  static get is() { return "admiralty-header-menu-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-menu-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-menu-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "menuTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The text that will be displayed in the menu"
+        },
+        "attribute": "menu-title",
+        "reflect": false
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The text that will be displayed in the menu"
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "menuItemClick",
+        "name": "menuItemClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "The event that is fired when a user clicks on the menu"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=header-menu-item.js.map

package/dist/collection/components/header-menu-item/header-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-menu-item.js","sourceRoot":"","sources":["../../../src/components/header-menu-item/header-menu-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEvF;;GAEG;AAMH,MAAM,OAAO,uBAAuB;;IAmClC,gBAAW,GAAG,CAAC,EAAc,EAAqB,EAAE;MAClD,EAAE,CAAC,eAAe,EAAE,CAAC;MACrB,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IACnC,CAAC,CAAC;IAEF;;;OAGG;IACH,oBAAe,GAAG,GAAS,EAAE;MAC3B,IAAI,IAAI,CAAC,aAAa,EAAE;QACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;OAC3D;IACH,CAAC,CAAC;IAEF;;;OAGG;IACH,mBAAc,GAAG,GAAS,EAAE;MAC1B,IAAI,IAAI,CAAC,aAAa,EAAE;QACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;OAC1D;IACH,CAAC,CAAC;;kBA/CyB,KAAK;;EAUhC,iBAAiB;IACf,4CAA4C;IAC5C,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;EACH,CAAC;EA2BD,MAAM;IACJ,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IACnC,IAAI,SAAS,GAAG,YAAY,CAAC;IAC7B,SAAS,IAAI,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpC,OAAO,CACL,EAAC,IAAI,IAAC,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,EAAE,IAAI,CAAC,cAAc;MACtE,WAAK,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW;QAC7C,SAAS;QACV,WAAK,KAAK,EAAC,UAAU;UACnB,eAAQ,CACJ,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}