@ukho/admiralty-core 0.17.0 → 0.18.0

package/dist/admiralty/admiralty.esm.js

@@ -1,2 +1,2 @@
-import{p as a,b as e}from"./p-ac0ad15a.js";export{s as setNonce}from"./p-ac0ad15a.js";import{g as i}from"./p-e1255160.js";var l=()=>{const e=import.meta.url;const i={};if(e!==""){i.resourcesUrl=new URL(".",e).href}return a(i)};l().then((async a=>{await i();return e([["p-6229741b",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-caf28231",[[2,"admiralty-autocomplete",{autoselect:[4],cssNamespace:[1,"css-namespace"],displayMenu:[1,"display-menu"],minLength:[2,"min-length"],name:[1],placeholder:[1],confirmOnBlur:[4,"confirm-on-blur"],showNoOptionsFound:[4,"show-no-options-found"],showAllValues:[4,"show-all-values"],required:[4],assistiveHint:[1,"assistive-hint"],menuAttributes:[8,"menu-attributes"],inputClasses:[1,"input-classes"],menuClasses:[1,"menu-classes"],label:[1],hint:[1],invalid:[4],invalidMessage:[1,"invalid-message"],disabled:[4],value:[1025],focused:[32],hovered:[32],menuOpen:[32],options:[32],option:[32],query:[32],validChoiceMade:[32],selected:[32],ariaHint:[32]},null,{value:["onValueChange"],focused:["onFocusedChange"]}]]],["p-cad2b58c",[[6,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]},null,{value:["valueChanged"]}]]],["p-a7434097",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],maxLength:[2,"max-length"],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]},null,{value:["valueChanged"]}]]],["p-5a8e43f2",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],actionText:[1,"action-text"]}]]],["p-526da862",[[2,"admiralty-file-input",{label:[1],multiple:[4],invalid:[4],invalidMessage:[1,"invalid-message"],files:[32]}]]],["p-a2ae15a3",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-afadb041",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-55648914",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-01c4ea99",[[6,"admiralty-radio-group",{name:[1],value:[1032],displayVertical:[4,"display-vertical"],invalid:[4],invalidMessage:[1,"invalid-message"]},null,{value:["valueChanged"],invalid:["invalidChanged"]}]]],["p-b743ca74",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-77549f7b",[[6,"admiralty-dialogue",{type:[1],heading:[1]}]]],["p-0e66fea2",[[6,"admiralty-header",{headerTitle:[1,"header-title"],headerTitleUrl:[1,"header-title-url"],logoLinkUrl:[1,"logo-link-url"],logoImgUrl:[1,"logo-img-url"],logoAltText:[1,"logo-alt-text"],mobileMenuOpen:[32],displayHamburger:[32]}]]],["p-e9ff954f",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]},null,{progression:["progressionChanged"]}]]],["p-2780d617",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-ae23a899",[[2,"admiralty-autocomplete-option",{value:[8]}]]],["p-298fe86e",[[6,"admiralty-breadcrumbs"]]],["p-00bdb9a8",[[6,"admiralty-card",{heading:[1]}]]],["p-5fb35437",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1028],value:[8],labelText:[1,"label-text"]},null,{checked:["checkedChanged"]}]]],["p-675fb90c",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-99d0a688",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-ba35abbe",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"],signInOnly:[4,"sign-in-only"]}]]],["p-5585be8a",[[2,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"]}]]],["p-aaf7fb89",[[2,"admiralty-hr"]]],["p-bfb87bdb",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-e13daa98",[[6,"admiralty-modal-dialog",{heading:[1],label:[1],description:[1],show:[4]}]]],["p-6f84528b",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-6def54c9",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-73bfd052",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],invalid:[4],buttonTabindex:[32],setButtonTabindex:[64]},null,{value:["valueChanged"]}]]],["p-bc290da9",[[6,"admiralty-side-nav",{label:[1]}]]],["p-a08bec80",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-60b9c4d4",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-88b9303c",[[2,"admiralty-skip-link",{href:[1]}]]],["p-aa6c608f",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-79e7da4b",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-1e1935af",[[6,"admiralty-table",{caption:[1]}]]],["p-4c25b2d6",[[6,"admiralty-table-body"]]],["p-4d3c0cdc",[[6,"admiralty-table-cell"]]],["p-2943fbbb",[[6,"admiralty-table-header"]]],["p-003aa9ce",[[6,"admiralty-table-header-cell"]]],["p-f2f92bbf",[[6,"admiralty-table-row"]]],["p-a4d60733",[[2,"admiralty-type-ahead-item",{value:[1]}]]],["p-d93164bf",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-33a35499",[[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],maxLength:[2,"max-length"],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]},null,{value:["valueChanged"]}]]],["p-68a54540",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-b4465943",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1]}]]],["p-1fd9acd6",[[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-label",{disabled:[4],for:[1]}],[6,"admiralty-input-invalid"]]]],a)}));
+import{p as a,b as e}from"./p-ac0ad15a.js";export{s as setNonce}from"./p-ac0ad15a.js";import{g as i}from"./p-e1255160.js";var l=()=>{const e=import.meta.url;const i={};if(e!==""){i.resourcesUrl=new URL(".",e).href}return a(i)};l().then((async a=>{await i();return e([["p-6229741b",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-caf28231",[[2,"admiralty-autocomplete",{autoselect:[4],cssNamespace:[1,"css-namespace"],displayMenu:[1,"display-menu"],minLength:[2,"min-length"],name:[1],placeholder:[1],confirmOnBlur:[4,"confirm-on-blur"],showNoOptionsFound:[4,"show-no-options-found"],showAllValues:[4,"show-all-values"],required:[4],assistiveHint:[1,"assistive-hint"],menuAttributes:[8,"menu-attributes"],inputClasses:[1,"input-classes"],menuClasses:[1,"menu-classes"],label:[1],hint:[1],invalid:[4],invalidMessage:[1,"invalid-message"],disabled:[4],value:[1025],focused:[32],hovered:[32],menuOpen:[32],options:[32],option:[32],query:[32],validChoiceMade:[32],selected:[32],ariaHint:[32]},null,{value:["onValueChange"],focused:["onFocusedChange"]}]]],["p-cad2b58c",[[6,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]},null,{value:["valueChanged"]}]]],["p-a7434097",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],maxLength:[2,"max-length"],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]},null,{value:["valueChanged"]}]]],["p-5a8e43f2",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],actionText:[1,"action-text"]}]]],["p-526da862",[[2,"admiralty-file-input",{label:[1],multiple:[4],invalid:[4],invalidMessage:[1,"invalid-message"],files:[32]}]]],["p-a2ae15a3",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-afadb041",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-55648914",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-01c4ea99",[[6,"admiralty-radio-group",{name:[1],value:[1032],displayVertical:[4,"display-vertical"],invalid:[4],invalidMessage:[1,"invalid-message"]},null,{value:["valueChanged"],invalid:["invalidChanged"]}]]],["p-b743ca74",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-77549f7b",[[6,"admiralty-dialogue",{type:[1],heading:[1]}]]],["p-f31a236c",[[6,"admiralty-header",{headerTitle:[1,"header-title"],headerTitleUrl:[1,"header-title-url"],logoLinkUrl:[1,"logo-link-url"],logoImgUrl:[1,"logo-img-url"],logoAltText:[1,"logo-alt-text"],mobileMenuOpen:[32],displayHamburger:[32]}]]],["p-e9ff954f",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]},null,{progression:["progressionChanged"]}]]],["p-2780d617",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-ae23a899",[[2,"admiralty-autocomplete-option",{value:[8]}]]],["p-298fe86e",[[6,"admiralty-breadcrumbs"]]],["p-00bdb9a8",[[6,"admiralty-card",{heading:[1]}]]],["p-5fb35437",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1028],value:[8],labelText:[1,"label-text"]},null,{checked:["checkedChanged"]}]]],["p-675fb90c",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-99d0a688",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-ba35abbe",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"],signInOnly:[4,"sign-in-only"]}]]],["p-5585be8a",[[2,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"]}]]],["p-aaf7fb89",[[2,"admiralty-hr"]]],["p-bfb87bdb",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-e13daa98",[[6,"admiralty-modal-dialog",{heading:[1],label:[1],description:[1],show:[4]}]]],["p-6f84528b",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-6def54c9",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-73bfd052",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],invalid:[4],buttonTabindex:[32],setButtonTabindex:[64]},null,{value:["valueChanged"]}]]],["p-bc290da9",[[6,"admiralty-side-nav",{label:[1]}]]],["p-a08bec80",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-60b9c4d4",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-88b9303c",[[2,"admiralty-skip-link",{href:[1]}]]],["p-aa6c608f",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-79e7da4b",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-1e1935af",[[6,"admiralty-table",{caption:[1]}]]],["p-4c25b2d6",[[6,"admiralty-table-body"]]],["p-4d3c0cdc",[[6,"admiralty-table-cell"]]],["p-2943fbbb",[[6,"admiralty-table-header"]]],["p-003aa9ce",[[6,"admiralty-table-header-cell"]]],["p-f2f92bbf",[[6,"admiralty-table-row"]]],["p-a4d60733",[[2,"admiralty-type-ahead-item",{value:[1]}]]],["p-d93164bf",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-33a35499",[[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],maxLength:[2,"max-length"],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]},null,{value:["valueChanged"]}]]],["p-68a54540",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-b4465943",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1]}]]],["p-1fd9acd6",[[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-label",{disabled:[4],for:[1]}],[6,"admiralty-input-invalid"]]]],a)}));
 //# sourceMappingURL=admiralty.esm.js.map

package/dist/admiralty/p-f31a236c.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as a,f as d,h as i,g as t}from"./p-ac0ad15a.js";import{e as r,g as s}from"./p-a28a614b.js";const n="@media (max-width: 1023px){.desktop-only.sc-admiralty-header{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header{display:none}}.admiralty-header.sc-admiralty-header{font-size:18px;font-weight:300;line-height:24px}.header-menu.sc-admiralty-header{border-bottom:1px solid #d8d8d8;display:flex;flex-direction:row;background-color:#fff;height:5em;min-height:5em;position:relative}@media (max-width: 1023px){.header-menu.sc-admiralty-header{height:56px;min-height:56px;position:relative}}.header-branding.sc-admiralty-header{display:flex;flex-direction:row;flex-grow:1;font-size:18px;padding:1.3em 0 1.3em 1.3em}@media (max-width: 1023px){.header-branding.sc-admiralty-header{padding-left:12px;padding-top:12px;padding-bottom:12px;flex-grow:1}}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header{background-color:transparent;color:#09315b}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header img.sc-admiralty-header{height:100%;width:9em}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header:focus{outline:3px solid #fd0;outline-offset:3px}.header-branding.sc-admiralty-header .vertical-seperator.sc-admiralty-header{border-right:1px solid #d8d8d8;margin-left:24px;margin-right:24px}@media (max-width: 1023px){.header-branding.sc-admiralty-header .vertical-seperator.sc-admiralty-header{margin-left:12px;margin-right:12px}}.header-branding.sc-admiralty-header .header-title.sc-admiralty-header{display:flex;flex-direction:column;flex-grow:1;justify-content:center;font-size:2em;line-height:2em;margin-bottom:unset !important;user-select:none}@media (max-width: 1023px){.header-branding.sc-admiralty-header .header-title.sc-admiralty-header{font-size:24px;line-height:24px !important;white-space:pre-wrap}}.header-branding.sc-admiralty-header .header-title.sc-admiralty-header a.sc-admiralty-header{cursor:pointer;font-size:1em;font-weight:normal;line-height:1;max-width:fit-content;text-decoration:none}@media (max-width: 1023px){.header-branding.sc-admiralty-header .header-title.sc-admiralty-header a.sc-admiralty-header{font-size:24px}}.header-branding.sc-admiralty-header .header-title.sc-admiralty-header a.sc-admiralty-header:focus{outline:3px solid #fd0;outline-offset:3px}.header-menus.sc-admiralty-header{display:flex;justify-content:flex-end}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header{display:none;flex-direction:column;justify-content:center}@media (max-width: 1023px){.header-menus.sc-admiralty-header .mobile-menu-toggle.display-hamburger.sc-admiralty-header{display:flex}}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header{background-color:unset}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header admiralty-icon.sc-admiralty-header{font-size:24px;font-weight:900;padding:12px;cursor:pointer;min-width:24px;min-height:24px;text-align:center;user-select:none;color:#09315b}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header:focus{outline:none;box-shadow:#ffdd00 inset 0 0 0 3px}@media (max-width: 1023px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header{display:none;min-height:56px;position:relative;right:0;position:absolute;top:100%;z-index:999;min-width:100%;background-color:#ffffff;border:1px solid #d8d8d8}}@media (max-width: 1023px) and (max-width: 1023px) and (min-width: 480px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header{min-width:50%;margin-left:50%}}@media (max-width: 1023px){.header-menus.sc-admiralty-header .menu-sections.mob-menus-visible.sc-admiralty-header{display:block}}@media (min-width: 1024px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header,.header-menus.sc-admiralty-header .menu-items.sc-admiralty-header,.header-menus.sc-admiralty-header .header-profile.sc-admiralty-header{display:flex;flex:0;flex-direction:row}}.sc-admiralty-header-s>admiralty-header-menu-item{color:red !important}";const l=n;const h=class{constructor(d){e(this,d);this.titledClicked=a(this,"titledClicked",7);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";this.mobileMenuOpen=false;this.displayHamburger=false}connectedCallback(){this.observer=new MutationObserver((()=>{d(this)}));this.observer.observe(this.el,{childList:true,subtree:true})}disconnectedCallback(){this.observer.disconnect()}componentWillRender(){const e=this.el.querySelectorAll("admiralty-header-menu-item, admiralty-header-profile");this.displayHamburger=e.length>0}handleClick(e){e.preventDefault();this.titledClicked.emit(this.headerTitleUrl)}toggleMobileMenu(){this.mobileMenuOpen=!this.mobileMenuOpen}render(){const{logoAltText:e,logoLinkUrl:a,logoImgUrl:d,headerTitle:t,headerTitleUrl:n}=this;return i("div",{key:"1ce4c61d4203b02df4eb3ea59630435b4b8b4c6e",class:"admiralty-header"},i("nav",{key:"de38e2216d022b71633f2e28b5d93c3fbec84872",class:"header-menu"},i("div",{key:"f637e625b70754fc6b7c84c734d8e5a377119abc",class:"header-branding"},i("a",{key:"095da57d90ff136a51c762f21b2b5c187d467ecc",class:"header-logo",href:a,tabindex:"0"},i("img",{key:"0ba6fd8e2c02f5dfd59391ed1247cef5ae11d710",class:"header-image",alt:e,src:d})),i("div",{key:"e4cb7e380df3bf19013d3421861e73eacbf61c06",class:"vertical-seperator"}),this.headerTitle?i("h1",{class:"header-title"},i("a",{onClick:e=>this.handleClick(e),href:n,tabindex:"0"},t)):null),i("div",{key:"8fe5d214fcde223ad31e24cb616fd49ec281d8f5",class:"header-menus"},i("div",{key:"7204e6d73553d11820a2b5e9a1edb585c8b8f1e8",class:{"mobile-menu-toggle":true,"display-hamburger":this.displayHamburger}},i("button",{key:"5b00afc3d87e90988e97fbf30602f87679ee6449",onClick:e=>this.toggleMobileMenu(),"aria-expanded":this.mobileMenuOpen},i("admiralty-icon",{key:"5744765cf43c31d5bf3483756107159e68d35732","icon-name":this.mobileMenuOpen?r.iconName:s.iconName}))),i("div",{key:"2200401f504652a23f745a6e4b50f060efc586a2",class:{"menu-sections":true,"mob-menus-visible":this.mobileMenuOpen}},i("div",{key:"557d01ea17f49ba0794abcd4ef8d1652af8c3d62",role:"navigation",class:"menu-items"},i("slot",{key:"66eb0934f464d70f8585a3ed4f6caf705fa006f3",name:"items"})),i("div",{key:"77017d42493565df403912554e01937e8b5f7409",role:"navigation",class:"header-profile"},i("slot",{key:"1ab382697c15573f3ad150125eb2c3fedf0bde63",name:"profile"}))))))}get el(){return t(this)}};h.style=l;export{h as admiralty_header};
+//# sourceMappingURL=p-f31a236c.entry.js.map

package/dist/admiralty/p-f31a236c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["headerCss","AdmiraltyHeaderStyle0","HeaderComponent","connectedCallback","this","observer","MutationObserver","forceUpdate","observe","el","childList","subtree","disconnectedCallback","disconnect","componentWillRender","childMenus","querySelectorAll","displayHamburger","length","handleClick","ev","preventDefault","titledClicked","emit","headerTitleUrl","toggleMobileMenu","mobileMenuOpen","render","logoAltText","logoLinkUrl","logoImgUrl","headerTitle","h","key","class","href","tabindex","alt","src","onClick","_","faTimes","iconName","faBars","role","name"],"sources":["src/components/header/header.scss?tag=admiralty-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\n@use \"../../scss/base/responsive\";\n@use \"../../scss/vars/typography\";\n\n.admiralty-header {\n  font-size: 18px;\n  font-weight: typography.$font-weight-light;\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  @include responsive.not-desktop {\n    height: 56px;\n    min-height: 56px;\n    position: relative;\n  }\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  @include responsive.not-desktop {\n    padding-left: 12px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    flex-grow: 1;\n  }\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    @include responsive.not-desktop {\n      margin-left: 12px;\n      margin-right: 12px;\n    }\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    @include responsive.not-desktop {\n      font-size: 24px;\n      line-height: 24px !important;\n      white-space: pre-wrap;\n    }\n\n    a {\n      cursor: pointer;\n      font-size: 1em;\n      font-weight: typography.$font-weight-medium;\n      line-height: 1;\n      max-width: fit-content;\n      text-decoration: none;\n\n      @include responsive.not-desktop {\n        font-size: 24px;\n      }\n      &:focus {\n        outline: 3px solid #fd0;\n        outline-offset: 3px;\n      }\n    }\n  }\n}\n\n.header-menus {\n  display: flex;\n  justify-content: flex-end;\n\n  .mobile-menu-toggle {\n    display: none;\n\n    @include responsive.not-desktop {\n      &.display-hamburger {\n        display: flex;\n      }\n    }\n    flex-direction: column;\n    justify-content: center;\n\n    button {\n      background-color: unset;\n\n      admiralty-icon {\n        font-size: 24px;\n        font-weight: 900;\n        padding: 12px;\n        cursor: pointer;\n        min-width: 24px;\n        min-height: 24px;\n        text-align: center;\n        user-select: none;\n        color: colours.$colour-admiralty-blue;\n      }\n\n      &:focus {\n        outline: none;\n        box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n      }\n    }\n  }\n\n  @include responsive.not-desktop {\n    .menu-sections {\n      display: none;\n\n      min-height: 56px;\n      position: relative;\n      right: 0;\n\n      position: absolute;\n      top: 100%;\n      z-index: 999;\n      min-width: 100%;\n      @include responsive.tablet-only {\n        min-width: 50%;\n        margin-left: 50%;\n      }\n\n      background-color: colours.$colour-white;\n      border: 1px solid colours.$colour-bg-header;\n\n      &.mob-menus-visible {\n        display: block;\n      }\n    }\n  }\n\n  .menu-sections,\n  .menu-items,\n  .header-profile {\n    @include responsive.desktop-only {\n      display: flex;\n      flex: 0;\n      flex-direction: row;\n    }\n  }\n}\n\n::slotted(admiralty-header-menu-item) {\n  color: red !important;\n}\n","import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';\nimport { Component, Element, Prop, h, EventEmitter, Event, State, forceUpdate } 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  scoped: true,\n})\nexport class HeaderComponent {\n  @Element() el: HTMLElement;\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\n  @State() mobileMenuOpen = false;\n\n  @State() displayHamburger = false;\n\n  observer: MutationObserver;\n\n  connectedCallback() {\n    this.observer = new MutationObserver(() => {\n      // when new menu items are added to the slots, we need to trigger a render cycle so that they render correctly\n      forceUpdate(this);\n    });\n    this.observer.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n  }\n\n  componentWillRender() {\n    const childMenus = this.el.querySelectorAll('admiralty-header-menu-item, admiralty-header-profile');\n    this.displayHamburger = childMenus.length > 0;\n  }\n\n  private handleClick(ev: MouseEvent) {\n    ev.preventDefault();\n    this.titledClicked.emit(this.headerTitleUrl);\n  }\n\n  toggleMobileMenu() {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\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} tabindex=\"0\">\n              <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n            </a>\n            <div class=\"vertical-seperator\"></div>\n            {this.headerTitle ? (\n              <h1 class=\"header-title\">\n                <a onClick={ev => this.handleClick(ev)} href={headerTitleUrl} tabindex=\"0\">\n                  {headerTitle}\n                </a>\n              </h1>\n            ) : null}\n          </div>\n          <div class=\"header-menus\">\n            <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n              <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen}>\n                <admiralty-icon icon-name={this.mobileMenuOpen ? faTimes.iconName : faBars.iconName}></admiralty-icon>\n              </button>\n            </div>\n            <div class={{ 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen }}>\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            </div>\n          </div>\n        </nav>\n      </div>\n    );\n  }\n}\n"],"mappings":"2GAAA,MAAMA,EAAY,k9IAClB,MAAAC,EAAeD,E,MCWFE,EAAe,M,qHAUO,K,iBAKH,+B,gBAKD,iC,iBAKC,yB,oBAOJ,M,sBAEE,K,CAI5B,iBAAAC,GACEC,KAAKC,SAAW,IAAIC,kBAAiB,KAEnCC,EAAYH,KAAK,IAEnBA,KAAKC,SAASG,QAAQJ,KAAKK,GAAI,CAC7BC,UAAW,KACXC,QAAS,M,CAIb,oBAAAC,GACER,KAAKC,SAASQ,Y,CAGhB,mBAAAC,GACE,MAAMC,EAAaX,KAAKK,GAAGO,iBAAiB,wDAC5CZ,KAAKa,iBAAmBF,EAAWG,OAAS,C,CAGtC,WAAAC,CAAYC,GAClBA,EAAGC,iBACHjB,KAAKkB,cAAcC,KAAKnB,KAAKoB,e,CAG/B,gBAAAC,GACErB,KAAKsB,gBAAkBtB,KAAKsB,c,CAG9B,MAAAC,GACE,MAAMC,YAAEA,EAAWC,YAAEA,EAAWC,WAAEA,EAAUC,YAAEA,EAAWP,eAAEA,GAAmBpB,KAE9E,OACE4B,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,eACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACTF,EAAA,KAAAC,IAAA,2CAAGC,MAAM,cAAcC,KAAMN,EAAaO,SAAS,KACjDJ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,eAAeG,IAAKT,EAAaU,IAAKR,KAEnDE,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uBACV9B,KAAK2B,YACJC,EAAA,MAAIE,MAAM,gBACRF,EAAA,KAAGO,QAASnB,GAAMhB,KAAKe,YAAYC,GAAKe,KAAMX,EAAgBY,SAAS,KACpEL,IAGH,MAENC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAO,CAAE,qBAAsB,KAAM,oBAAqB9B,KAAKa,mBAClEe,EAAA,UAAAC,IAAA,2CAAQM,QAASC,GAAKpC,KAAKqB,mBAAkB,gBAAiBrB,KAAKsB,gBACjEM,EAAA,kBAAAC,IAAA,uDAA2B7B,KAAKsB,eAAiBe,EAAQC,SAAWC,EAAOD,aAG/EV,EAAA,OAAAC,IAAA,2CAAKC,MAAO,CAAE,gBAAiB,KAAM,oBAAqB9B,KAAKsB,iBAC7DM,EAAA,OAAAC,IAAA,2CAAKW,KAAK,aAAaV,MAAM,cAC3BF,EAAA,QAAAC,IAAA,2CAAMY,KAAK,WAEbb,EAAA,OAAAC,IAAA,2CAAKW,KAAK,aAAaV,MAAM,kBAC3BF,EAAA,QAAAC,IAAA,2CAAMY,KAAK,gB"}

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

@@ -20,6 +20,19 @@ const HeaderComponent = class {
         this.mobileMenuOpen = false;
         this.displayHamburger = false;
     }
+    connectedCallback() {
+        this.observer = new MutationObserver(() => {
+            // when new menu items are added to the slots, we need to trigger a render cycle so that they render correctly
+            index.forceUpdate(this);
+        });
+        this.observer.observe(this.el, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
     componentWillRender() {
         const childMenus = this.el.querySelectorAll('admiralty-header-menu-item, admiralty-header-profile');
         this.displayHamburger = childMenus.length > 0;
@@ -33,7 +46,7 @@ const HeaderComponent = class {
     }
     render() {
         const { logoAltText, logoLinkUrl, logoImgUrl, headerTitle, headerTitleUrl } = this;
-        return (index.h("div", { key: '2e7a86e2d3fed9dd00a1d320a68bf565e778f6ad', class: "admiralty-header" }, index.h("nav", { key: '42dd904434e4448b6393353870f24a919d623ab9', class: "header-menu" }, index.h("div", { key: 'a8e9e99042c67559ee4fe2cd5ed6e9a4bc576cae', class: "header-branding" }, index.h("a", { key: '1cbfc7fe8ac841f5ef221e0b92af5e9513fda86b', class: "header-logo", href: logoLinkUrl, tabindex: "0" }, index.h("img", { key: '42b527107ddaf14de1d1f86fd88bcee30b7ac53a', class: "header-image", alt: logoAltText, src: logoImgUrl })), index.h("div", { key: 'ce83028d072016a12d67705042147267da017f9f', class: "vertical-seperator" }), this.headerTitle ? (index.h("h1", { class: "header-title" }, index.h("a", { onClick: ev => this.handleClick(ev), href: headerTitleUrl, tabindex: "0" }, headerTitle))) : null), index.h("div", { key: '6b8621398f80afe1e0308f2a93da8d99fa34bfe7', class: "header-menus" }, index.h("div", { key: '8e8a0d694c30480e1ae5dd5c675a79cfb5052622', class: { 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger } }, index.h("button", { key: '457920ff25c168f8bec0382536b3d4cabe876fff', onClick: _ => this.toggleMobileMenu(), "aria-expanded": this.mobileMenuOpen }, index.h("admiralty-icon", { key: '2fa83e76fddc22aae9476673cc298b18f5c989d9', "icon-name": this.mobileMenuOpen ? index$1.faTimes.iconName : index$1.faBars.iconName }))), index.h("div", { key: '0fbc79615f65528702417f65b4fa6809d0f7d5db', class: { 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen } }, index.h("div", { key: 'bd710073b715e8bd7910405fa96c202a0b044eef', role: "navigation", class: "menu-items" }, index.h("slot", { key: '12213bb4d09752143db05065f6eb2f2b2f589052', name: "items" })), index.h("div", { key: '65ba572d7a52e7739844206f5f196a780874fb70', role: "navigation", class: "header-profile" }, index.h("slot", { key: 'b5f6e293705d7736885deefc038e85a086249c68', name: "profile" })))))));
+        return (index.h("div", { key: '1ce4c61d4203b02df4eb3ea59630435b4b8b4c6e', class: "admiralty-header" }, index.h("nav", { key: 'de38e2216d022b71633f2e28b5d93c3fbec84872', class: "header-menu" }, index.h("div", { key: 'f637e625b70754fc6b7c84c734d8e5a377119abc', class: "header-branding" }, index.h("a", { key: '095da57d90ff136a51c762f21b2b5c187d467ecc', class: "header-logo", href: logoLinkUrl, tabindex: "0" }, index.h("img", { key: '0ba6fd8e2c02f5dfd59391ed1247cef5ae11d710', class: "header-image", alt: logoAltText, src: logoImgUrl })), index.h("div", { key: 'e4cb7e380df3bf19013d3421861e73eacbf61c06', class: "vertical-seperator" }), this.headerTitle ? (index.h("h1", { class: "header-title" }, index.h("a", { onClick: ev => this.handleClick(ev), href: headerTitleUrl, tabindex: "0" }, headerTitle))) : null), index.h("div", { key: '8fe5d214fcde223ad31e24cb616fd49ec281d8f5', class: "header-menus" }, index.h("div", { key: '7204e6d73553d11820a2b5e9a1edb585c8b8f1e8', class: { 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger } }, index.h("button", { key: '5b00afc3d87e90988e97fbf30602f87679ee6449', onClick: _ => this.toggleMobileMenu(), "aria-expanded": this.mobileMenuOpen }, index.h("admiralty-icon", { key: '5744765cf43c31d5bf3483756107159e68d35732', "icon-name": this.mobileMenuOpen ? index$1.faTimes.iconName : index$1.faBars.iconName }))), index.h("div", { key: '2200401f504652a23f745a6e4b50f060efc586a2', class: { 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen } }, index.h("div", { key: '557d01ea17f49ba0794abcd4ef8d1652af8c3d62', role: "navigation", class: "menu-items" }, index.h("slot", { key: '66eb0934f464d70f8585a3ed4f6caf705fa006f3', name: "items" })), index.h("div", { key: '77017d42493565df403912554e01937e8b5f7409', role: "navigation", class: "header-profile" }, index.h("slot", { key: '1ab382697c15573f3ad150125eb2c3fedf0bde63', name: "profile" })))))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"admiralty-header.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,i9IAAi9I,CAAC;AACp+I,8BAAe,SAAS;;MCWX,eAAe;;;;;8BAUO,IAAI;2BAKP,8BAA8B;0BAK/B,gCAAgC;2BAK/B,wBAAwB;8BAO5B,KAAK;gCAEH,KAAK;;IAEjC,mBAAmB;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sDAAsD,CAAC,CAAC;QACpG,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;KAC/C;IAEO,WAAW,CAAC,EAAc;QAChC,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9C;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;KAC5C;IAED,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAEnF,QACEA,kEAAK,KAAK,EAAC,kBAAkB,IAC3BA,kEAAK,KAAK,EAAC,aAAa,IACtBA,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,gEAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAC,GAAG,IACpDA,kEAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,GAAI,CAC7D,EACJA,kEAAK,KAAK,EAAC,oBAAoB,GAAO,EACrC,IAAI,CAAC,WAAW,IACfA,gBAAI,KAAK,EAAC,cAAc,IACtBA,eAAG,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAC,GAAG,IACvE,WAAW,CACV,CACD,IACH,IAAI,CACJ,EACNA,kEAAK,KAAK,EAAC,cAAc,IACvBA,kEAAK,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IACpFA,qEAAQ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,cAAc,IAC/EA,0FAA2B,IAAI,CAAC,cAAc,GAAGC,eAAO,CAAC,QAAQ,GAAGC,cAAM,CAAC,QAAQ,GAAmB,CAC/F,CACL,EACNF,kEAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,cAAc,EAAE,IAC7EA,kEAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,IACvCA,mEAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACNA,kEAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gBAAgB,IAC3CA,mEAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACF,EACN;KACH;;;;;;;","names":["h","faTimes","faBars"],"sources":["src/components/header/header.scss?tag=admiralty-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\n@use \"../../scss/base/responsive\";\n@use \"../../scss/vars/typography\";\n\n.admiralty-header {\n  font-size: 18px;\n  font-weight: typography.$font-weight-light;\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  @include responsive.not-desktop {\n    height: 56px;\n    min-height: 56px;\n    position: relative;\n  }\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  @include responsive.not-desktop {\n    padding-left: 12px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    flex-grow: 1;\n  }\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    @include responsive.not-desktop {\n      margin-left: 12px;\n      margin-right: 12px;\n    }\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    @include responsive.not-desktop {\n      font-size: 24px;\n      line-height: 24px !important;\n      white-space: pre-wrap;\n    }\n\n    a {\n      cursor: pointer;\n      font-size: 1em;\n      font-weight: typography.$font-weight-medium;\n      line-height: 1;\n      max-width: fit-content;\n      text-decoration: none;\n\n      @include responsive.not-desktop {\n        font-size: 24px;\n      }\n      &:focus {\n        outline: 3px solid #fd0;\n        outline-offset: 3px;\n      }\n    }\n  }\n}\n\n.header-menus {\n  display: flex;\n  justify-content: flex-end;\n\n  .mobile-menu-toggle {\n    display: none;\n\n    @include responsive.not-desktop {\n      &.display-hamburger {\n        display: flex;\n      }\n    }\n    flex-direction: column;\n    justify-content: center;\n\n    button {\n      background-color: unset;\n\n      admiralty-icon {\n        font-size: 24px;\n        font-weight: 900;\n        padding: 12px;\n        cursor: pointer;\n        min-width: 24px;\n        min-height: 24px;\n        text-align: center;\n        user-select: none;\n        color: colours.$colour-admiralty-blue;\n      }\n\n      &:focus {\n        outline: none;\n        box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n      }\n    }\n  }\n\n  @include responsive.not-desktop {\n    .menu-sections {\n      display: none;\n\n      min-height: 56px;\n      position: relative;\n      right: 0;\n\n      position: absolute;\n      top: 100%;\n      z-index: 999;\n      min-width: 100%;\n      @include responsive.tablet-only {\n        min-width: 50%;\n        margin-left: 50%;\n      }\n\n      background-color: colours.$colour-white;\n      border: 1px solid colours.$colour-bg-header;\n\n      &.mob-menus-visible {\n        display: block;\n      }\n    }\n  }\n\n  .menu-sections,\n  .menu-items,\n  .header-profile {\n    @include responsive.desktop-only {\n      display: flex;\n      flex: 0;\n      flex-direction: row;\n    }\n  }\n}\n\n::slotted(admiralty-header-menu-item) {\n  color: red !important;\n}\n","import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';\nimport { Component, Element, Prop, h, EventEmitter, Event, State } 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  scoped: true,\n})\nexport class HeaderComponent {\n  @Element() el: HTMLElement;\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\n  @State() mobileMenuOpen = false;\n\n  @State() displayHamburger = false;\n\n  componentWillRender() {\n    const childMenus = this.el.querySelectorAll('admiralty-header-menu-item, admiralty-header-profile');\n    this.displayHamburger = childMenus.length > 0;\n  }\n\n  private handleClick(ev: MouseEvent) {\n    ev.preventDefault();\n    this.titledClicked.emit(this.headerTitleUrl);\n  }\n\n  toggleMobileMenu() {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\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} tabindex=\"0\">\n              <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n            </a>\n            <div class=\"vertical-seperator\"></div>\n            {this.headerTitle ? (\n              <h1 class=\"header-title\">\n                <a onClick={ev => this.handleClick(ev)} href={headerTitleUrl} tabindex=\"0\">\n                  {headerTitle}\n                </a>\n              </h1>\n            ) : null}\n          </div>\n          <div class=\"header-menus\">\n            <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n              <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen}>\n                <admiralty-icon icon-name={this.mobileMenuOpen ? faTimes.iconName : faBars.iconName}></admiralty-icon>\n              </button>\n            </div>\n            <div class={{ 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen }}>\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            </div>\n          </div>\n        </nav>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-header.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,i9IAAi9I,CAAC;AACp+I,8BAAe,SAAS;;MCWX,eAAe;;;;;8BAUO,IAAI;2BAKP,8BAA8B;0BAK/B,gCAAgC;2BAK/B,wBAAwB;8BAO5B,KAAK;gCAEH,KAAK;;IAIjC,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC;;YAEnCA,iBAAW,CAAC,IAAI,CAAC,CAAC;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YAC7B,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;IAED,mBAAmB;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sDAAsD,CAAC,CAAC;QACpG,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;KAC/C;IAEO,WAAW,CAAC,EAAc;QAChC,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9C;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;KAC5C;IAED,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAEnF,QACEC,kEAAK,KAAK,EAAC,kBAAkB,IAC3BA,kEAAK,KAAK,EAAC,aAAa,IACtBA,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,gEAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAC,GAAG,IACpDA,kEAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,GAAI,CAC7D,EACJA,kEAAK,KAAK,EAAC,oBAAoB,GAAO,EACrC,IAAI,CAAC,WAAW,IACfA,gBAAI,KAAK,EAAC,cAAc,IACtBA,eAAG,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAC,GAAG,IACvE,WAAW,CACV,CACD,IACH,IAAI,CACJ,EACNA,kEAAK,KAAK,EAAC,cAAc,IACvBA,kEAAK,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IACpFA,qEAAQ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,cAAc,IAC/EA,0FAA2B,IAAI,CAAC,cAAc,GAAGC,eAAO,CAAC,QAAQ,GAAGC,cAAM,CAAC,QAAQ,GAAmB,CAC/F,CACL,EACNF,kEAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,cAAc,EAAE,IAC7EA,kEAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,IACvCA,mEAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACNA,kEAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gBAAgB,IAC3CA,mEAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACF,EACN;KACH;;;;;;;","names":["forceUpdate","h","faTimes","faBars"],"sources":["src/components/header/header.scss?tag=admiralty-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\n@use \"../../scss/base/responsive\";\n@use \"../../scss/vars/typography\";\n\n.admiralty-header {\n  font-size: 18px;\n  font-weight: typography.$font-weight-light;\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  @include responsive.not-desktop {\n    height: 56px;\n    min-height: 56px;\n    position: relative;\n  }\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  @include responsive.not-desktop {\n    padding-left: 12px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    flex-grow: 1;\n  }\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    @include responsive.not-desktop {\n      margin-left: 12px;\n      margin-right: 12px;\n    }\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    @include responsive.not-desktop {\n      font-size: 24px;\n      line-height: 24px !important;\n      white-space: pre-wrap;\n    }\n\n    a {\n      cursor: pointer;\n      font-size: 1em;\n      font-weight: typography.$font-weight-medium;\n      line-height: 1;\n      max-width: fit-content;\n      text-decoration: none;\n\n      @include responsive.not-desktop {\n        font-size: 24px;\n      }\n      &:focus {\n        outline: 3px solid #fd0;\n        outline-offset: 3px;\n      }\n    }\n  }\n}\n\n.header-menus {\n  display: flex;\n  justify-content: flex-end;\n\n  .mobile-menu-toggle {\n    display: none;\n\n    @include responsive.not-desktop {\n      &.display-hamburger {\n        display: flex;\n      }\n    }\n    flex-direction: column;\n    justify-content: center;\n\n    button {\n      background-color: unset;\n\n      admiralty-icon {\n        font-size: 24px;\n        font-weight: 900;\n        padding: 12px;\n        cursor: pointer;\n        min-width: 24px;\n        min-height: 24px;\n        text-align: center;\n        user-select: none;\n        color: colours.$colour-admiralty-blue;\n      }\n\n      &:focus {\n        outline: none;\n        box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n      }\n    }\n  }\n\n  @include responsive.not-desktop {\n    .menu-sections {\n      display: none;\n\n      min-height: 56px;\n      position: relative;\n      right: 0;\n\n      position: absolute;\n      top: 100%;\n      z-index: 999;\n      min-width: 100%;\n      @include responsive.tablet-only {\n        min-width: 50%;\n        margin-left: 50%;\n      }\n\n      background-color: colours.$colour-white;\n      border: 1px solid colours.$colour-bg-header;\n\n      &.mob-menus-visible {\n        display: block;\n      }\n    }\n  }\n\n  .menu-sections,\n  .menu-items,\n  .header-profile {\n    @include responsive.desktop-only {\n      display: flex;\n      flex: 0;\n      flex-direction: row;\n    }\n  }\n}\n\n::slotted(admiralty-header-menu-item) {\n  color: red !important;\n}\n","import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';\nimport { Component, Element, Prop, h, EventEmitter, Event, State, forceUpdate } 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  scoped: true,\n})\nexport class HeaderComponent {\n  @Element() el: HTMLElement;\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\n  @State() mobileMenuOpen = false;\n\n  @State() displayHamburger = false;\n\n  observer: MutationObserver;\n\n  connectedCallback() {\n    this.observer = new MutationObserver(() => {\n      // when new menu items are added to the slots, we need to trigger a render cycle so that they render correctly\n      forceUpdate(this);\n    });\n    this.observer.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n  }\n\n  componentWillRender() {\n    const childMenus = this.el.querySelectorAll('admiralty-header-menu-item, admiralty-header-profile');\n    this.displayHamburger = childMenus.length > 0;\n  }\n\n  private handleClick(ev: MouseEvent) {\n    ev.preventDefault();\n    this.titledClicked.emit(this.headerTitleUrl);\n  }\n\n  toggleMobileMenu() {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\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} tabindex=\"0\">\n              <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n            </a>\n            <div class=\"vertical-seperator\"></div>\n            {this.headerTitle ? (\n              <h1 class=\"header-title\">\n                <a onClick={ev => this.handleClick(ev)} href={headerTitleUrl} tabindex=\"0\">\n                  {headerTitle}\n                </a>\n              </h1>\n            ) : null}\n          </div>\n          <div class=\"header-menus\">\n            <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n              <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen}>\n                <admiralty-icon icon-name={this.mobileMenuOpen ? faTimes.iconName : faBars.iconName}></admiralty-icon>\n              </button>\n            </div>\n            <div class={{ 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen }}>\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            </div>\n          </div>\n        </nav>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { faBars, faTimes } from "@fortawesome/free-solid-svg-icons";
-import { h } from "@stencil/core";
+import { h, forceUpdate } 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
@@ -14,6 +14,19 @@ export class HeaderComponent {
         this.mobileMenuOpen = false;
         this.displayHamburger = false;
     }
+    connectedCallback() {
+        this.observer = new MutationObserver(() => {
+            // when new menu items are added to the slots, we need to trigger a render cycle so that they render correctly
+            forceUpdate(this);
+        });
+        this.observer.observe(this.el, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
     componentWillRender() {
         const childMenus = this.el.querySelectorAll('admiralty-header-menu-item, admiralty-header-profile');
         this.displayHamburger = childMenus.length > 0;
@@ -27,7 +40,7 @@ export class HeaderComponent {
     }
     render() {
         const { logoAltText, logoLinkUrl, logoImgUrl, headerTitle, headerTitleUrl } = this;
-        return (h("div", { key: '2e7a86e2d3fed9dd00a1d320a68bf565e778f6ad', class: "admiralty-header" }, h("nav", { key: '42dd904434e4448b6393353870f24a919d623ab9', class: "header-menu" }, h("div", { key: 'a8e9e99042c67559ee4fe2cd5ed6e9a4bc576cae', class: "header-branding" }, h("a", { key: '1cbfc7fe8ac841f5ef221e0b92af5e9513fda86b', class: "header-logo", href: logoLinkUrl, tabindex: "0" }, h("img", { key: '42b527107ddaf14de1d1f86fd88bcee30b7ac53a', class: "header-image", alt: logoAltText, src: logoImgUrl })), h("div", { key: 'ce83028d072016a12d67705042147267da017f9f', class: "vertical-seperator" }), this.headerTitle ? (h("h1", { class: "header-title" }, h("a", { onClick: ev => this.handleClick(ev), href: headerTitleUrl, tabindex: "0" }, headerTitle))) : null), h("div", { key: '6b8621398f80afe1e0308f2a93da8d99fa34bfe7', class: "header-menus" }, h("div", { key: '8e8a0d694c30480e1ae5dd5c675a79cfb5052622', class: { 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger } }, h("button", { key: '457920ff25c168f8bec0382536b3d4cabe876fff', onClick: _ => this.toggleMobileMenu(), "aria-expanded": this.mobileMenuOpen }, h("admiralty-icon", { key: '2fa83e76fddc22aae9476673cc298b18f5c989d9', "icon-name": this.mobileMenuOpen ? faTimes.iconName : faBars.iconName }))), h("div", { key: '0fbc79615f65528702417f65b4fa6809d0f7d5db', class: { 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen } }, h("div", { key: 'bd710073b715e8bd7910405fa96c202a0b044eef', role: "navigation", class: "menu-items" }, h("slot", { key: '12213bb4d09752143db05065f6eb2f2b2f589052', name: "items" })), h("div", { key: '65ba572d7a52e7739844206f5f196a780874fb70', role: "navigation", class: "header-profile" }, h("slot", { key: 'b5f6e293705d7736885deefc038e85a086249c68', name: "profile" })))))));
+        return (h("div", { key: '1ce4c61d4203b02df4eb3ea59630435b4b8b4c6e', class: "admiralty-header" }, h("nav", { key: 'de38e2216d022b71633f2e28b5d93c3fbec84872', class: "header-menu" }, h("div", { key: 'f637e625b70754fc6b7c84c734d8e5a377119abc', class: "header-branding" }, h("a", { key: '095da57d90ff136a51c762f21b2b5c187d467ecc', class: "header-logo", href: logoLinkUrl, tabindex: "0" }, h("img", { key: '0ba6fd8e2c02f5dfd59391ed1247cef5ae11d710', class: "header-image", alt: logoAltText, src: logoImgUrl })), h("div", { key: 'e4cb7e380df3bf19013d3421861e73eacbf61c06', class: "vertical-seperator" }), this.headerTitle ? (h("h1", { class: "header-title" }, h("a", { onClick: ev => this.handleClick(ev), href: headerTitleUrl, tabindex: "0" }, headerTitle))) : null), h("div", { key: '8fe5d214fcde223ad31e24cb616fd49ec281d8f5', class: "header-menus" }, h("div", { key: '7204e6d73553d11820a2b5e9a1edb585c8b8f1e8', class: { 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger } }, h("button", { key: '5b00afc3d87e90988e97fbf30602f87679ee6449', onClick: _ => this.toggleMobileMenu(), "aria-expanded": this.mobileMenuOpen }, h("admiralty-icon", { key: '5744765cf43c31d5bf3483756107159e68d35732', "icon-name": this.mobileMenuOpen ? faTimes.iconName : faBars.iconName }))), h("div", { key: '2200401f504652a23f745a6e4b50f060efc586a2', class: { 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen } }, h("div", { key: '557d01ea17f49ba0794abcd4ef8d1652af8c3d62', role: "navigation", class: "menu-items" }, h("slot", { key: '66eb0934f464d70f8585a3ed4f6caf705fa006f3', name: "items" })), h("div", { key: '77017d42493565df403912554e01937e8b5f7409', role: "navigation", class: "header-profile" }, h("slot", { key: '1ab382697c15573f3ad150125eb2c3fedf0bde63', name: "profile" })))))));
     }
     static get is() { return "admiralty-header"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAExF;;;GAGG;AAMH,MAAM,OAAO,eAAe;;;8BAUO,IAAI;2BAKP,8BAA8B;0BAK/B,gCAAgC;2BAK/B,wBAAwB;8BAO5B,KAAK;gCAEH,KAAK;;IAEjC,mBAAmB;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sDAAsD,CAAC,CAAC;QACpG,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;IAChD,CAAC;IAEO,WAAW,CAAC,EAAc;QAChC,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC/C,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;IAC7C,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAEnF,OAAO,CACL,4DAAK,KAAK,EAAC,kBAAkB;YAC3B,4DAAK,KAAK,EAAC,aAAa;gBACtB,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,0DAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAC,GAAG;wBACpD,4DAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,GAAI,CAC7D;oBACJ,4DAAK,KAAK,EAAC,oBAAoB,GAAO;oBACrC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,UAAI,KAAK,EAAC,cAAc;wBACtB,SAAG,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAC,GAAG,IACvE,WAAW,CACV,CACD,CACN,CAAC,CAAC,CAAC,IAAI,CACJ;gBACN,4DAAK,KAAK,EAAC,cAAc;oBACvB,4DAAK,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,EAAE;wBACpF,+DAAQ,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,cAAc;4BAC/E,oFAA2B,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,GAAmB,CAC/F,CACL;oBACN,4DAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,cAAc,EAAE;wBAC7E,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY;4BACvC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;wBACN,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gBAAgB;4BAC3C,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';\nimport { Component, Element, Prop, h, EventEmitter, Event, State } 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  scoped: true,\n})\nexport class HeaderComponent {\n  @Element() el: HTMLElement;\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\n  @State() mobileMenuOpen = false;\n\n  @State() displayHamburger = false;\n\n  componentWillRender() {\n    const childMenus = this.el.querySelectorAll('admiralty-header-menu-item, admiralty-header-profile');\n    this.displayHamburger = childMenus.length > 0;\n  }\n\n  private handleClick(ev: MouseEvent) {\n    ev.preventDefault();\n    this.titledClicked.emit(this.headerTitleUrl);\n  }\n\n  toggleMobileMenu() {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\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} tabindex=\"0\">\n              <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n            </a>\n            <div class=\"vertical-seperator\"></div>\n            {this.headerTitle ? (\n              <h1 class=\"header-title\">\n                <a onClick={ev => this.handleClick(ev)} href={headerTitleUrl} tabindex=\"0\">\n                  {headerTitle}\n                </a>\n              </h1>\n            ) : null}\n          </div>\n          <div class=\"header-menus\">\n            <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n              <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen}>\n                <admiralty-icon icon-name={this.mobileMenuOpen ? faTimes.iconName : faBars.iconName}></admiralty-icon>\n              </button>\n            </div>\n            <div class={{ 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen }}>\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            </div>\n          </div>\n        </nav>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAgB,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAErG;;;GAGG;AAMH,MAAM,OAAO,eAAe;;;8BAUO,IAAI;2BAKP,8BAA8B;0BAK/B,gCAAgC;2BAK/B,wBAAwB;8BAO5B,KAAK;gCAEH,KAAK;;IAIjC,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACxC,8GAA8G;YAC9G,WAAW,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YAC7B,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC7B,CAAC;IAED,mBAAmB;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sDAAsD,CAAC,CAAC;QACpG,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;IAChD,CAAC;IAEO,WAAW,CAAC,EAAc;QAChC,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC/C,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;IAC7C,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAEnF,OAAO,CACL,4DAAK,KAAK,EAAC,kBAAkB;YAC3B,4DAAK,KAAK,EAAC,aAAa;gBACtB,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,0DAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAC,GAAG;wBACpD,4DAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,GAAI,CAC7D;oBACJ,4DAAK,KAAK,EAAC,oBAAoB,GAAO;oBACrC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,UAAI,KAAK,EAAC,cAAc;wBACtB,SAAG,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAC,GAAG,IACvE,WAAW,CACV,CACD,CACN,CAAC,CAAC,CAAC,IAAI,CACJ;gBACN,4DAAK,KAAK,EAAC,cAAc;oBACvB,4DAAK,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,EAAE;wBACpF,+DAAQ,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,cAAc;4BAC/E,oFAA2B,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,GAAmB,CAC/F,CACL;oBACN,4DAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,cAAc,EAAE;wBAC7E,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY;4BACvC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;wBACN,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gBAAgB;4BAC3C,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';\nimport { Component, Element, Prop, h, EventEmitter, Event, State, forceUpdate } 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  scoped: true,\n})\nexport class HeaderComponent {\n  @Element() el: HTMLElement;\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\n  @State() mobileMenuOpen = false;\n\n  @State() displayHamburger = false;\n\n  observer: MutationObserver;\n\n  connectedCallback() {\n    this.observer = new MutationObserver(() => {\n      // when new menu items are added to the slots, we need to trigger a render cycle so that they render correctly\n      forceUpdate(this);\n    });\n    this.observer.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n  }\n\n  componentWillRender() {\n    const childMenus = this.el.querySelectorAll('admiralty-header-menu-item, admiralty-header-profile');\n    this.displayHamburger = childMenus.length > 0;\n  }\n\n  private handleClick(ev: MouseEvent) {\n    ev.preventDefault();\n    this.titledClicked.emit(this.headerTitleUrl);\n  }\n\n  toggleMobileMenu() {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\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} tabindex=\"0\">\n              <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n            </a>\n            <div class=\"vertical-seperator\"></div>\n            {this.headerTitle ? (\n              <h1 class=\"header-title\">\n                <a onClick={ev => this.handleClick(ev)} href={headerTitleUrl} tabindex=\"0\">\n                  {headerTitle}\n                </a>\n              </h1>\n            ) : null}\n          </div>\n          <div class=\"header-menus\">\n            <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n              <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen}>\n                <admiralty-icon icon-name={this.mobileMenuOpen ? faTimes.iconName : faBars.iconName}></admiralty-icon>\n              </button>\n            </div>\n            <div class={{ 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen }}>\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            </div>\n          </div>\n        </nav>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,5 +1,13 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { HeaderComponent } from "./header";
+const mutationObserverMock = jest.fn().mockImplementation(() => {
+    return {
+        observe: jest.fn(),
+        disconnect: jest.fn(),
+        takeRecords: jest.fn(),
+    };
+});
+global.MutationObserver = mutationObserverMock;
 describe('admiralty-header', () => {
     it('renders', async () => {
         const page = await newSpecPage({

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

@@ -1 +1 @@
-{"version":3,"file":"header.spec.js","sourceRoot":"","sources":["../../../src/components/header/header.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,uCAAuC;SAC9C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyBvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,oEAAoE;SAC3E,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,mIAAmI;SAC1I,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE;;;0BAGc;SACrB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE;;;0BAGc;SACrB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE;;;;0BAIc;SACrB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiCvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE;;;;;;;;;;0BAUc;SACrB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuCvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { HeaderComponent } from './header';\n\ndescribe('admiralty-header', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [HeaderComponent],\n      html: `<admiralty-header></admiralty-header>`,\n    });\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-header>\n        <!---->\n        <div class=\"admiralty-header\">\n          <nav class=\"header-menu\">\n            <div class=\"header-branding\">\n              <a class=\"header-logo\" href=\"https://www.admiralty.co.uk/\" tabindex=\"0\">\n                <img alt=\"Admiralty Stacked Logo\" class=\"header-image\" src=\"svg/Admiralty stacked logo.svg\">\n              </a>\n              <div class=\"vertical-seperator\"></div>\n            </div>\n            <div class=\"header-menus\">\n              <div class=\"mobile-menu-toggle\">\n                <button>\n                  <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n                </button>\n              </div>\n              <div class=\"menu-sections\">\n                <div class=\"menu-items\" role=\"navigation\"></div>\n                <div class=\"header-profile\" role=\"navigation\"></div>\n              </div>\n            </div>\n          </nav>\n        </div>\n      </admiralty-header>\n    `);\n  });\n\n  it('should render with title', async () => {\n    const page = await newSpecPage({\n      components: [HeaderComponent],\n      html: `<admiralty-header header-title=\"Design System\"></admiralty-header>`,\n    });\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-header header-title=\"Design System\">\n        <!---->\n        <div class=\"admiralty-header\">\n          <nav class=\"header-menu\">\n            <div class=\"header-branding\">\n              <a class=\"header-logo\" href=\"https://www.admiralty.co.uk/\" tabindex=\"0\">\n                <img alt=\"Admiralty Stacked Logo\" class=\"header-image\" src=\"svg/Admiralty stacked logo.svg\">\n              </a>\n              <div class=\"vertical-seperator\"></div>\n              <h1 class=\"header-title\">\n                <a tabindex=\"0\">\n                  Design System\n                </a>\n              </h1>\n            </div>\n            <div class=\"header-menus\">\n              <div class=\"mobile-menu-toggle\">\n                <button>\n                  <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n                </button>\n              </div>\n              <div class=\"menu-sections\">\n                <div class=\"menu-items\" role=\"navigation\"></div>\n                <div class=\"header-profile\" role=\"navigation\"></div>\n              </div>\n            </div>\n          </nav>\n        </div>\n      </admiralty-header>\n    `);\n  });\n\n  it('should render with no links', async () => {\n    const page = await newSpecPage({\n      components: [HeaderComponent],\n      html: `<admiralty-header header-title=\"Design System\" logo-link-url=\"http://www.example.com\" header-title-url=\"null\"></admiralty-header>`,\n    });\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-header header-title=\"Design System\" header-title-url=\"null\" logo-link-url=\"http://www.example.com\">\n        <!---->\n        <div class=\"admiralty-header\">\n          <nav class=\"header-menu\">\n            <div class=\"header-branding\">\n              <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n                <img alt=\"Admiralty Stacked Logo\" class=\"header-image\" src=\"svg/Admiralty stacked logo.svg\">\n              </a>\n              <div class=\"vertical-seperator\"></div>\n              <h1 class=\"header-title\">\n                <a href=\"null\" tabindex=\"0\">\n                  Design System\n                </a>\n              </h1>\n            </div>\n            <div class=\"header-menus\">\n              <div class=\"mobile-menu-toggle\">\n                <button>\n                  <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n                </button>\n              </div>\n              <div class=\"menu-sections\">\n                <div class=\"menu-items\" role=\"navigation\"></div>\n                <div class=\"header-profile\" role=\"navigation\"></div>\n              </div>\n            </div>\n          </nav>\n        </div>\n      </admiralty-header>\n    `);\n  });\n\n  it('should render signed in', async () => {\n    const page = await newSpecPage({\n      components: [HeaderComponent],\n      html: `\n      <admiralty-header logo-alt-text=\"Logo\" logo-link-url=\"http://www.example.com\" logo-img-url=\"logo.svg\" header-title-url=\"#\" header-title=\"Design System\">\n        <admiralty-header-profile is-signed-in=\"true\" signed-in-text=\"Mr Admiral\" slot=\"profile\"></admiralty-header-profile>\n      </admiralty-header>`,\n    });\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-header header-title=\"Design System\" header-title-url=\"#\" logo-alt-text=\"Logo\" logo-img-url=\"logo.svg\" logo-link-url=\"http://www.example.com\">\n        <!---->\n        <div class=\"admiralty-header\">\n          <nav class=\"header-menu\">\n            <div class=\"header-branding\">\n              <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n                <img alt=\"Logo\" class=\"header-image\" src=\"logo.svg\">\n              </a>\n              <div class=\"vertical-seperator\"></div>\n              <h1 class=\"header-title\">\n                <a href=\"#\" tabindex=\"0\">\n                  Design System\n                </a>\n              </h1>\n            </div>\n            <div class=\"header-menus\">\n              <div class=\"display-hamburger mobile-menu-toggle\">\n                <button>\n                  <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n                </button>\n              </div>\n              <div class=\"menu-sections\">\n                <div class=\"menu-items\" role=\"navigation\"></div>\n                <div class=\"header-profile\" role=\"navigation\">\n                  <admiralty-header-profile is-signed-in=\"true\" signed-in-text=\"Mr Admiral\" slot=\"profile\"></admiralty-header-profile>\n                </div>\n              </div>\n            </div>\n          </nav>\n        </div>\n      </admiralty-header>\n    `);\n  });\n\n  it('should render signed out', async () => {\n    const page = await newSpecPage({\n      components: [HeaderComponent],\n      html: `\n      <admiralty-header logo-alt-text=\"Logo\" logo-link-url=\"http://www.example.com\" logo-img-url=\"logo.svg\" header-title-url=\"#\" header-title=\"Design System\">\n        <admiralty-header-profile is-signed-in=\"false\" signed-in-text=\"Mr Admiral\" slot=\"profile\"></admiralty-header-profile>\n      </admiralty-header>`,\n    });\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-header header-title=\"Design System\" header-title-url=\"#\" logo-alt-text=\"Logo\" logo-img-url=\"logo.svg\" logo-link-url=\"http://www.example.com\">\n        <!---->\n        <div class=\"admiralty-header\">\n          <nav class=\"header-menu\">\n            <div class=\"header-branding\">\n              <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n                <img alt=\"Logo\" class=\"header-image\" src=\"logo.svg\">\n              </a>\n              <div class=\"vertical-seperator\"></div>\n              <h1 class=\"header-title\">\n                <a href=\"#\" tabindex=\"0\">\n                  Design System\n                </a>\n              </h1>\n            </div>\n            <div class=\"header-menus\">\n              <div class=\"display-hamburger mobile-menu-toggle\">\n                <button>\n                  <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n                </button>\n              </div>\n              <div class=\"menu-sections\">\n                <div class=\"menu-items\" role=\"navigation\"></div>\n                <div class=\"header-profile\" role=\"navigation\">\n                  <admiralty-header-profile is-signed-in=\"false\" signed-in-text=\"Mr Admiral\" slot=\"profile\"></admiralty-header-profile>\n                </div>\n              </div>\n            </div>\n          </nav>\n        </div>\n      </admiralty-header>\n    `);\n  });\n\n  it('should render menu items (no sub-menus)', async () => {\n    const page = await newSpecPage({\n      components: [HeaderComponent],\n      html: `\n      <admiralty-header logo-alt-text=\"Logo\" logo-link-url=\"http://www.example.com\" logo-img-url=\"logo.svg\" header-title-url=\"#\" header-title=\"Design System\">\n        <admiralty-header-menu-item menu-title=\"Item 1\" active=\"false\" slot=\"items\"></admiralty-header-menu-item>\n        <admiralty-header-menu-item menu-title=\"Item 2\" active=\"false\" slot=\"items\"></admiralty-header-menu-item>\n      </admiralty-header>`,\n    });\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-header header-title=\"Design System\" header-title-url=\"#\" logo-alt-text=\"Logo\" logo-img-url=\"logo.svg\" logo-link-url=\"http://www.example.com\">\n        <!---->\n        <div class=\"admiralty-header\">\n          <nav class=\"header-menu\">\n            <div class=\"header-branding\">\n              <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n                <img alt=\"Logo\" class=\"header-image\" src=\"logo.svg\">\n              </a>\n              <div class=\"vertical-seperator\"></div>\n              <h1 class=\"header-title\">\n                <a href=\"#\" tabindex=\"0\">\n                  Design System\n                </a>\n              </h1>\n            </div>\n            <div class=\"header-menus\">\n              <div class=\"display-hamburger mobile-menu-toggle\">\n                <button>\n                  <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n                </button>\n              </div>\n              <div class=\"menu-sections\">\n                <div class=\"menu-items\" role=\"navigation\">\n                  <admiralty-header-menu-item active=\"false\" menu-title=\"Item 1\" slot=\"items\"></admiralty-header-menu-item>\n                  <admiralty-header-menu-item active=\"false\" menu-title=\"Item 2\" slot=\"items\"></admiralty-header-menu-item>\n                </div>\n                <div class=\"header-profile\" role=\"navigation\"></div>\n              </div>\n            </div>\n          </nav>\n        </div>\n      </admiralty-header>\n    `);\n  });\n\n  it('should render menu items (with sub-menus)', async () => {\n    const page = await newSpecPage({\n      components: [HeaderComponent],\n      html: `\n      <admiralty-header logo-alt-text=\"Logo\" logo-link-url=\"http://www.example.com\" logo-img-url=\"logo.svg\" header-title-url=\"#\" header-title=\"Design System\">\n        <admiralty-header-menu-item menu-title=\"Item 1\" active=\"false\" slot=\"items\">\n          <admiralty-header-sub-menu-item menu-title=\"sub item 1\"></admiralty-header-sub-menu-item>\n          <admiralty-header-sub-menu-item menu-title=\"sub item 2\"></admiralty-header-sub-menu-item>\n        </admiralty-header-menu-item>\n        <admiralty-header-menu-item menu-title=\"Item 2\" active=\"false\" slot=\"items\"></admiralty-header-menu-item>\n        <admiralty-header-menu-item menu-title=\"Item 3\" active=\"false\" slot=\"items\">\n          <admiralty-header-sub-menu-item menu-title=\"sub item 3\"></admiralty-header-sub-menu-item>\n        </admiralty-header-menu-item>\n      </admiralty-header>`,\n    });\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-header header-title=\"Design System\" header-title-url=\"#\" logo-alt-text=\"Logo\" logo-img-url=\"logo.svg\" logo-link-url=\"http://www.example.com\">\n        <!---->\n        <div class=\"admiralty-header\">\n          <nav class=\"header-menu\">\n            <div class=\"header-branding\">\n              <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n                <img alt=\"Logo\" class=\"header-image\" src=\"logo.svg\">\n              </a>\n              <div class=\"vertical-seperator\"></div>\n              <h1 class=\"header-title\">\n                <a href=\"#\" tabindex=\"0\">\n                  Design System\n                </a>\n              </h1>\n            </div>\n            <div class=\"header-menus\">\n              <div class=\"display-hamburger mobile-menu-toggle\">\n                <button>\n                  <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n                </button>\n              </div>\n              <div class=\"menu-sections\">\n                <div class=\"menu-items\" role=\"navigation\">\n                  <admiralty-header-menu-item active=\"false\" menu-title=\"Item 1\" slot=\"items\">\n                    <admiralty-header-sub-menu-item menu-title=\"sub item 1\"></admiralty-header-sub-menu-item>\n                    <admiralty-header-sub-menu-item menu-title=\"sub item 2\"></admiralty-header-sub-menu-item>\n                  </admiralty-header-menu-item>\n                  <admiralty-header-menu-item active=\"false\" menu-title=\"Item 2\" slot=\"items\"></admiralty-header-menu-item>\n                  <admiralty-header-menu-item active=\"false\" menu-title=\"Item 3\" slot=\"items\">\n                    <admiralty-header-sub-menu-item menu-title=\"sub item 3\"></admiralty-header-sub-menu-item>\n                  </admiralty-header-menu-item>\n                </div>\n                <div class=\"header-profile\" role=\"navigation\"></div>\n              </div>\n            </div>\n          </nav>\n        </div>\n      </admiralty-header>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"header.spec.js","sourceRoot":"","sources":["../../../src/components/header/header.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,MAAM,oBAAoB,GAAG,IAAI,CAAC,EAAE,EAAwC,CAAC,kBAAkB,CAAC,GAAG,EAAE;IACnG,OAAO;QACL,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE;QAClB,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE;QACrB,WAAW,EAAE,IAAI,CAAC,EAAE,EAAE;KACvB,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,MAAM,CAAC,gBAAgB,GAAG,oBAAoB,CAAC;AAE/C,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,uCAAuC;SAC9C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyBvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,oEAAoE;SAC3E,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,mIAAmI;SAC1I,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE;;;0BAGc;SACrB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE;;;0BAGc;SACrB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE;;;;0BAIc;SACrB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiCvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE;;;;;;;;;;0BAUc;SACrB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuCvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { HeaderComponent } from './header';\n\nconst mutationObserverMock = jest.fn<MutationObserver, [MutationCallback]>().mockImplementation(() => {\n  return {\n    observe: jest.fn(),\n    disconnect: jest.fn(),\n    takeRecords: jest.fn(),\n  };\n});\nglobal.MutationObserver = mutationObserverMock;\n\ndescribe('admiralty-header', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [HeaderComponent],\n      html: `<admiralty-header></admiralty-header>`,\n    });\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-header>\n        <!---->\n        <div class=\"admiralty-header\">\n          <nav class=\"header-menu\">\n            <div class=\"header-branding\">\n              <a class=\"header-logo\" href=\"https://www.admiralty.co.uk/\" tabindex=\"0\">\n                <img alt=\"Admiralty Stacked Logo\" class=\"header-image\" src=\"svg/Admiralty stacked logo.svg\">\n              </a>\n              <div class=\"vertical-seperator\"></div>\n            </div>\n            <div class=\"header-menus\">\n              <div class=\"mobile-menu-toggle\">\n                <button>\n                  <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n                </button>\n              </div>\n              <div class=\"menu-sections\">\n                <div class=\"menu-items\" role=\"navigation\"></div>\n                <div class=\"header-profile\" role=\"navigation\"></div>\n              </div>\n            </div>\n          </nav>\n        </div>\n      </admiralty-header>\n    `);\n  });\n\n  it('should render with title', async () => {\n    const page = await newSpecPage({\n      components: [HeaderComponent],\n      html: `<admiralty-header header-title=\"Design System\"></admiralty-header>`,\n    });\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-header header-title=\"Design System\">\n        <!---->\n        <div class=\"admiralty-header\">\n          <nav class=\"header-menu\">\n            <div class=\"header-branding\">\n              <a class=\"header-logo\" href=\"https://www.admiralty.co.uk/\" tabindex=\"0\">\n                <img alt=\"Admiralty Stacked Logo\" class=\"header-image\" src=\"svg/Admiralty stacked logo.svg\">\n              </a>\n              <div class=\"vertical-seperator\"></div>\n              <h1 class=\"header-title\">\n                <a tabindex=\"0\">\n                  Design System\n                </a>\n              </h1>\n            </div>\n            <div class=\"header-menus\">\n              <div class=\"mobile-menu-toggle\">\n                <button>\n                  <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n                </button>\n              </div>\n              <div class=\"menu-sections\">\n                <div class=\"menu-items\" role=\"navigation\"></div>\n                <div class=\"header-profile\" role=\"navigation\"></div>\n              </div>\n            </div>\n          </nav>\n        </div>\n      </admiralty-header>\n    `);\n  });\n\n  it('should render with no links', async () => {\n    const page = await newSpecPage({\n      components: [HeaderComponent],\n      html: `<admiralty-header header-title=\"Design System\" logo-link-url=\"http://www.example.com\" header-title-url=\"null\"></admiralty-header>`,\n    });\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-header header-title=\"Design System\" header-title-url=\"null\" logo-link-url=\"http://www.example.com\">\n        <!---->\n        <div class=\"admiralty-header\">\n          <nav class=\"header-menu\">\n            <div class=\"header-branding\">\n              <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n                <img alt=\"Admiralty Stacked Logo\" class=\"header-image\" src=\"svg/Admiralty stacked logo.svg\">\n              </a>\n              <div class=\"vertical-seperator\"></div>\n              <h1 class=\"header-title\">\n                <a href=\"null\" tabindex=\"0\">\n                  Design System\n                </a>\n              </h1>\n            </div>\n            <div class=\"header-menus\">\n              <div class=\"mobile-menu-toggle\">\n                <button>\n                  <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n                </button>\n              </div>\n              <div class=\"menu-sections\">\n                <div class=\"menu-items\" role=\"navigation\"></div>\n                <div class=\"header-profile\" role=\"navigation\"></div>\n              </div>\n            </div>\n          </nav>\n        </div>\n      </admiralty-header>\n    `);\n  });\n\n  it('should render signed in', async () => {\n    const page = await newSpecPage({\n      components: [HeaderComponent],\n      html: `\n      <admiralty-header logo-alt-text=\"Logo\" logo-link-url=\"http://www.example.com\" logo-img-url=\"logo.svg\" header-title-url=\"#\" header-title=\"Design System\">\n        <admiralty-header-profile is-signed-in=\"true\" signed-in-text=\"Mr Admiral\" slot=\"profile\"></admiralty-header-profile>\n      </admiralty-header>`,\n    });\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-header header-title=\"Design System\" header-title-url=\"#\" logo-alt-text=\"Logo\" logo-img-url=\"logo.svg\" logo-link-url=\"http://www.example.com\">\n        <!---->\n        <div class=\"admiralty-header\">\n          <nav class=\"header-menu\">\n            <div class=\"header-branding\">\n              <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n                <img alt=\"Logo\" class=\"header-image\" src=\"logo.svg\">\n              </a>\n              <div class=\"vertical-seperator\"></div>\n              <h1 class=\"header-title\">\n                <a href=\"#\" tabindex=\"0\">\n                  Design System\n                </a>\n              </h1>\n            </div>\n            <div class=\"header-menus\">\n              <div class=\"display-hamburger mobile-menu-toggle\">\n                <button>\n                  <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n                </button>\n              </div>\n              <div class=\"menu-sections\">\n                <div class=\"menu-items\" role=\"navigation\"></div>\n                <div class=\"header-profile\" role=\"navigation\">\n                  <admiralty-header-profile is-signed-in=\"true\" signed-in-text=\"Mr Admiral\" slot=\"profile\"></admiralty-header-profile>\n                </div>\n              </div>\n            </div>\n          </nav>\n        </div>\n      </admiralty-header>\n    `);\n  });\n\n  it('should render signed out', async () => {\n    const page = await newSpecPage({\n      components: [HeaderComponent],\n      html: `\n      <admiralty-header logo-alt-text=\"Logo\" logo-link-url=\"http://www.example.com\" logo-img-url=\"logo.svg\" header-title-url=\"#\" header-title=\"Design System\">\n        <admiralty-header-profile is-signed-in=\"false\" signed-in-text=\"Mr Admiral\" slot=\"profile\"></admiralty-header-profile>\n      </admiralty-header>`,\n    });\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-header header-title=\"Design System\" header-title-url=\"#\" logo-alt-text=\"Logo\" logo-img-url=\"logo.svg\" logo-link-url=\"http://www.example.com\">\n        <!---->\n        <div class=\"admiralty-header\">\n          <nav class=\"header-menu\">\n            <div class=\"header-branding\">\n              <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n                <img alt=\"Logo\" class=\"header-image\" src=\"logo.svg\">\n              </a>\n              <div class=\"vertical-seperator\"></div>\n              <h1 class=\"header-title\">\n                <a href=\"#\" tabindex=\"0\">\n                  Design System\n                </a>\n              </h1>\n            </div>\n            <div class=\"header-menus\">\n              <div class=\"display-hamburger mobile-menu-toggle\">\n                <button>\n                  <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n                </button>\n              </div>\n              <div class=\"menu-sections\">\n                <div class=\"menu-items\" role=\"navigation\"></div>\n                <div class=\"header-profile\" role=\"navigation\">\n                  <admiralty-header-profile is-signed-in=\"false\" signed-in-text=\"Mr Admiral\" slot=\"profile\"></admiralty-header-profile>\n                </div>\n              </div>\n            </div>\n          </nav>\n        </div>\n      </admiralty-header>\n    `);\n  });\n\n  it('should render menu items (no sub-menus)', async () => {\n    const page = await newSpecPage({\n      components: [HeaderComponent],\n      html: `\n      <admiralty-header logo-alt-text=\"Logo\" logo-link-url=\"http://www.example.com\" logo-img-url=\"logo.svg\" header-title-url=\"#\" header-title=\"Design System\">\n        <admiralty-header-menu-item menu-title=\"Item 1\" active=\"false\" slot=\"items\"></admiralty-header-menu-item>\n        <admiralty-header-menu-item menu-title=\"Item 2\" active=\"false\" slot=\"items\"></admiralty-header-menu-item>\n      </admiralty-header>`,\n    });\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-header header-title=\"Design System\" header-title-url=\"#\" logo-alt-text=\"Logo\" logo-img-url=\"logo.svg\" logo-link-url=\"http://www.example.com\">\n        <!---->\n        <div class=\"admiralty-header\">\n          <nav class=\"header-menu\">\n            <div class=\"header-branding\">\n              <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n                <img alt=\"Logo\" class=\"header-image\" src=\"logo.svg\">\n              </a>\n              <div class=\"vertical-seperator\"></div>\n              <h1 class=\"header-title\">\n                <a href=\"#\" tabindex=\"0\">\n                  Design System\n                </a>\n              </h1>\n            </div>\n            <div class=\"header-menus\">\n              <div class=\"display-hamburger mobile-menu-toggle\">\n                <button>\n                  <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n                </button>\n              </div>\n              <div class=\"menu-sections\">\n                <div class=\"menu-items\" role=\"navigation\">\n                  <admiralty-header-menu-item active=\"false\" menu-title=\"Item 1\" slot=\"items\"></admiralty-header-menu-item>\n                  <admiralty-header-menu-item active=\"false\" menu-title=\"Item 2\" slot=\"items\"></admiralty-header-menu-item>\n                </div>\n                <div class=\"header-profile\" role=\"navigation\"></div>\n              </div>\n            </div>\n          </nav>\n        </div>\n      </admiralty-header>\n    `);\n  });\n\n  it('should render menu items (with sub-menus)', async () => {\n    const page = await newSpecPage({\n      components: [HeaderComponent],\n      html: `\n      <admiralty-header logo-alt-text=\"Logo\" logo-link-url=\"http://www.example.com\" logo-img-url=\"logo.svg\" header-title-url=\"#\" header-title=\"Design System\">\n        <admiralty-header-menu-item menu-title=\"Item 1\" active=\"false\" slot=\"items\">\n          <admiralty-header-sub-menu-item menu-title=\"sub item 1\"></admiralty-header-sub-menu-item>\n          <admiralty-header-sub-menu-item menu-title=\"sub item 2\"></admiralty-header-sub-menu-item>\n        </admiralty-header-menu-item>\n        <admiralty-header-menu-item menu-title=\"Item 2\" active=\"false\" slot=\"items\"></admiralty-header-menu-item>\n        <admiralty-header-menu-item menu-title=\"Item 3\" active=\"false\" slot=\"items\">\n          <admiralty-header-sub-menu-item menu-title=\"sub item 3\"></admiralty-header-sub-menu-item>\n        </admiralty-header-menu-item>\n      </admiralty-header>`,\n    });\n    expect(page.root).toMatchInlineSnapshot(`\n      <admiralty-header header-title=\"Design System\" header-title-url=\"#\" logo-alt-text=\"Logo\" logo-img-url=\"logo.svg\" logo-link-url=\"http://www.example.com\">\n        <!---->\n        <div class=\"admiralty-header\">\n          <nav class=\"header-menu\">\n            <div class=\"header-branding\">\n              <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n                <img alt=\"Logo\" class=\"header-image\" src=\"logo.svg\">\n              </a>\n              <div class=\"vertical-seperator\"></div>\n              <h1 class=\"header-title\">\n                <a href=\"#\" tabindex=\"0\">\n                  Design System\n                </a>\n              </h1>\n            </div>\n            <div class=\"header-menus\">\n              <div class=\"display-hamburger mobile-menu-toggle\">\n                <button>\n                  <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n                </button>\n              </div>\n              <div class=\"menu-sections\">\n                <div class=\"menu-items\" role=\"navigation\">\n                  <admiralty-header-menu-item active=\"false\" menu-title=\"Item 1\" slot=\"items\">\n                    <admiralty-header-sub-menu-item menu-title=\"sub item 1\"></admiralty-header-sub-menu-item>\n                    <admiralty-header-sub-menu-item menu-title=\"sub item 2\"></admiralty-header-sub-menu-item>\n                  </admiralty-header-menu-item>\n                  <admiralty-header-menu-item active=\"false\" menu-title=\"Item 2\" slot=\"items\"></admiralty-header-menu-item>\n                  <admiralty-header-menu-item active=\"false\" menu-title=\"Item 3\" slot=\"items\">\n                    <admiralty-header-sub-menu-item menu-title=\"sub item 3\"></admiralty-header-sub-menu-item>\n                  </admiralty-header-menu-item>\n                </div>\n                <div class=\"header-profile\" role=\"navigation\"></div>\n              </div>\n            </div>\n          </nav>\n        </div>\n      </admiralty-header>\n    `);\n  });\n});\n"]}

package/dist/components/admiralty-header.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h } from '@stencil/core/internal/client';
 import { i as faTimes, j as faBars, d as defineCustomElement$2 } from './icon.js';
 
 const headerCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-header{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header{display:none}}.admiralty-header.sc-admiralty-header{font-size:18px;font-weight:300;line-height:24px}.header-menu.sc-admiralty-header{border-bottom:1px solid #d8d8d8;display:flex;flex-direction:row;background-color:#fff;height:5em;min-height:5em;position:relative}@media (max-width: 1023px){.header-menu.sc-admiralty-header{height:56px;min-height:56px;position:relative}}.header-branding.sc-admiralty-header{display:flex;flex-direction:row;flex-grow:1;font-size:18px;padding:1.3em 0 1.3em 1.3em}@media (max-width: 1023px){.header-branding.sc-admiralty-header{padding-left:12px;padding-top:12px;padding-bottom:12px;flex-grow:1}}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header{background-color:transparent;color:#09315b}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header img.sc-admiralty-header{height:100%;width:9em}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header:focus{outline:3px solid #fd0;outline-offset:3px}.header-branding.sc-admiralty-header .vertical-seperator.sc-admiralty-header{border-right:1px solid #d8d8d8;margin-left:24px;margin-right:24px}@media (max-width: 1023px){.header-branding.sc-admiralty-header .vertical-seperator.sc-admiralty-header{margin-left:12px;margin-right:12px}}.header-branding.sc-admiralty-header .header-title.sc-admiralty-header{display:flex;flex-direction:column;flex-grow:1;justify-content:center;font-size:2em;line-height:2em;margin-bottom:unset !important;user-select:none}@media (max-width: 1023px){.header-branding.sc-admiralty-header .header-title.sc-admiralty-header{font-size:24px;line-height:24px !important;white-space:pre-wrap}}.header-branding.sc-admiralty-header .header-title.sc-admiralty-header a.sc-admiralty-header{cursor:pointer;font-size:1em;font-weight:normal;line-height:1;max-width:fit-content;text-decoration:none}@media (max-width: 1023px){.header-branding.sc-admiralty-header .header-title.sc-admiralty-header a.sc-admiralty-header{font-size:24px}}.header-branding.sc-admiralty-header .header-title.sc-admiralty-header a.sc-admiralty-header:focus{outline:3px solid #fd0;outline-offset:3px}.header-menus.sc-admiralty-header{display:flex;justify-content:flex-end}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header{display:none;flex-direction:column;justify-content:center}@media (max-width: 1023px){.header-menus.sc-admiralty-header .mobile-menu-toggle.display-hamburger.sc-admiralty-header{display:flex}}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header{background-color:unset}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header admiralty-icon.sc-admiralty-header{font-size:24px;font-weight:900;padding:12px;cursor:pointer;min-width:24px;min-height:24px;text-align:center;user-select:none;color:#09315b}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header:focus{outline:none;box-shadow:#ffdd00 inset 0 0 0 3px}@media (max-width: 1023px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header{display:none;min-height:56px;position:relative;right:0;position:absolute;top:100%;z-index:999;min-width:100%;background-color:#ffffff;border:1px solid #d8d8d8}}@media (max-width: 1023px) and (max-width: 1023px) and (min-width: 480px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header{min-width:50%;margin-left:50%}}@media (max-width: 1023px){.header-menus.sc-admiralty-header .menu-sections.mob-menus-visible.sc-admiralty-header{display:block}}@media (min-width: 1024px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header,.header-menus.sc-admiralty-header .menu-items.sc-admiralty-header,.header-menus.sc-admiralty-header .header-profile.sc-admiralty-header{display:flex;flex:0;flex-direction:row}}.sc-admiralty-header-s>admiralty-header-menu-item{color:red !important}";
@@ -17,6 +17,19 @@ const HeaderComponent = /*@__PURE__*/ proxyCustomElement(class HeaderComponent e
         this.mobileMenuOpen = false;
         this.displayHamburger = false;
     }
+    connectedCallback() {
+        this.observer = new MutationObserver(() => {
+            // when new menu items are added to the slots, we need to trigger a render cycle so that they render correctly
+            forceUpdate(this);
+        });
+        this.observer.observe(this.el, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
     componentWillRender() {
         const childMenus = this.el.querySelectorAll('admiralty-header-menu-item, admiralty-header-profile');
         this.displayHamburger = childMenus.length > 0;
@@ -30,7 +43,7 @@ const HeaderComponent = /*@__PURE__*/ proxyCustomElement(class HeaderComponent e
     }
     render() {
         const { logoAltText, logoLinkUrl, logoImgUrl, headerTitle, headerTitleUrl } = this;
-        return (h("div", { key: '2e7a86e2d3fed9dd00a1d320a68bf565e778f6ad', class: "admiralty-header" }, h("nav", { key: '42dd904434e4448b6393353870f24a919d623ab9', class: "header-menu" }, h("div", { key: 'a8e9e99042c67559ee4fe2cd5ed6e9a4bc576cae', class: "header-branding" }, h("a", { key: '1cbfc7fe8ac841f5ef221e0b92af5e9513fda86b', class: "header-logo", href: logoLinkUrl, tabindex: "0" }, h("img", { key: '42b527107ddaf14de1d1f86fd88bcee30b7ac53a', class: "header-image", alt: logoAltText, src: logoImgUrl })), h("div", { key: 'ce83028d072016a12d67705042147267da017f9f', class: "vertical-seperator" }), this.headerTitle ? (h("h1", { class: "header-title" }, h("a", { onClick: ev => this.handleClick(ev), href: headerTitleUrl, tabindex: "0" }, headerTitle))) : null), h("div", { key: '6b8621398f80afe1e0308f2a93da8d99fa34bfe7', class: "header-menus" }, h("div", { key: '8e8a0d694c30480e1ae5dd5c675a79cfb5052622', class: { 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger } }, h("button", { key: '457920ff25c168f8bec0382536b3d4cabe876fff', onClick: _ => this.toggleMobileMenu(), "aria-expanded": this.mobileMenuOpen }, h("admiralty-icon", { key: '2fa83e76fddc22aae9476673cc298b18f5c989d9', "icon-name": this.mobileMenuOpen ? faTimes.iconName : faBars.iconName }))), h("div", { key: '0fbc79615f65528702417f65b4fa6809d0f7d5db', class: { 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen } }, h("div", { key: 'bd710073b715e8bd7910405fa96c202a0b044eef', role: "navigation", class: "menu-items" }, h("slot", { key: '12213bb4d09752143db05065f6eb2f2b2f589052', name: "items" })), h("div", { key: '65ba572d7a52e7739844206f5f196a780874fb70', role: "navigation", class: "header-profile" }, h("slot", { key: 'b5f6e293705d7736885deefc038e85a086249c68', name: "profile" })))))));
+        return (h("div", { key: '1ce4c61d4203b02df4eb3ea59630435b4b8b4c6e', class: "admiralty-header" }, h("nav", { key: 'de38e2216d022b71633f2e28b5d93c3fbec84872', class: "header-menu" }, h("div", { key: 'f637e625b70754fc6b7c84c734d8e5a377119abc', class: "header-branding" }, h("a", { key: '095da57d90ff136a51c762f21b2b5c187d467ecc', class: "header-logo", href: logoLinkUrl, tabindex: "0" }, h("img", { key: '0ba6fd8e2c02f5dfd59391ed1247cef5ae11d710', class: "header-image", alt: logoAltText, src: logoImgUrl })), h("div", { key: 'e4cb7e380df3bf19013d3421861e73eacbf61c06', class: "vertical-seperator" }), this.headerTitle ? (h("h1", { class: "header-title" }, h("a", { onClick: ev => this.handleClick(ev), href: headerTitleUrl, tabindex: "0" }, headerTitle))) : null), h("div", { key: '8fe5d214fcde223ad31e24cb616fd49ec281d8f5', class: "header-menus" }, h("div", { key: '7204e6d73553d11820a2b5e9a1edb585c8b8f1e8', class: { 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger } }, h("button", { key: '5b00afc3d87e90988e97fbf30602f87679ee6449', onClick: _ => this.toggleMobileMenu(), "aria-expanded": this.mobileMenuOpen }, h("admiralty-icon", { key: '5744765cf43c31d5bf3483756107159e68d35732', "icon-name": this.mobileMenuOpen ? faTimes.iconName : faBars.iconName }))), h("div", { key: '2200401f504652a23f745a6e4b50f060efc586a2', class: { 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen } }, h("div", { key: '557d01ea17f49ba0794abcd4ef8d1652af8c3d62', role: "navigation", class: "menu-items" }, h("slot", { key: '66eb0934f464d70f8585a3ed4f6caf705fa006f3', name: "items" })), h("div", { key: '77017d42493565df403912554e01937e8b5f7409', role: "navigation", class: "header-profile" }, h("slot", { key: '1ab382697c15573f3ad150125eb2c3fedf0bde63', name: "profile" })))))));
     }
     get el() { return this; }
     static get style() { return AdmiraltyHeaderStyle0; }

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

@@ -1 +1 @@
-{"file":"admiralty-header.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,i9IAAi9I,CAAC;AACp+I,8BAAe,SAAS;;MCWX,eAAe;;;;;;8BAUO,IAAI;2BAKP,8BAA8B;0BAK/B,gCAAgC;2BAK/B,wBAAwB;8BAO5B,KAAK;gCAEH,KAAK;;IAEjC,mBAAmB;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sDAAsD,CAAC,CAAC;QACpG,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;KAC/C;IAEO,WAAW,CAAC,EAAc;QAChC,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9C;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;KAC5C;IAED,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAEnF,QACE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,aAAa,IACtB,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,0DAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAC,GAAG,IACpD,4DAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,GAAI,CAC7D,EACJ,4DAAK,KAAK,EAAC,oBAAoB,GAAO,EACrC,IAAI,CAAC,WAAW,IACf,UAAI,KAAK,EAAC,cAAc,IACtB,SAAG,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAC,GAAG,IACvE,WAAW,CACV,CACD,IACH,IAAI,CACJ,EACN,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IACpF,+DAAQ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,cAAc,IAC/E,oFAA2B,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAmB,CAC/F,CACL,EACN,4DAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,cAAc,EAAE,IAC7E,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,IACvC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gBAAgB,IAC3C,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/header/header.scss?tag=admiralty-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\n@use \"../../scss/base/responsive\";\n@use \"../../scss/vars/typography\";\n\n.admiralty-header {\n  font-size: 18px;\n  font-weight: typography.$font-weight-light;\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  @include responsive.not-desktop {\n    height: 56px;\n    min-height: 56px;\n    position: relative;\n  }\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  @include responsive.not-desktop {\n    padding-left: 12px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    flex-grow: 1;\n  }\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    @include responsive.not-desktop {\n      margin-left: 12px;\n      margin-right: 12px;\n    }\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    @include responsive.not-desktop {\n      font-size: 24px;\n      line-height: 24px !important;\n      white-space: pre-wrap;\n    }\n\n    a {\n      cursor: pointer;\n      font-size: 1em;\n      font-weight: typography.$font-weight-medium;\n      line-height: 1;\n      max-width: fit-content;\n      text-decoration: none;\n\n      @include responsive.not-desktop {\n        font-size: 24px;\n      }\n      &:focus {\n        outline: 3px solid #fd0;\n        outline-offset: 3px;\n      }\n    }\n  }\n}\n\n.header-menus {\n  display: flex;\n  justify-content: flex-end;\n\n  .mobile-menu-toggle {\n    display: none;\n\n    @include responsive.not-desktop {\n      &.display-hamburger {\n        display: flex;\n      }\n    }\n    flex-direction: column;\n    justify-content: center;\n\n    button {\n      background-color: unset;\n\n      admiralty-icon {\n        font-size: 24px;\n        font-weight: 900;\n        padding: 12px;\n        cursor: pointer;\n        min-width: 24px;\n        min-height: 24px;\n        text-align: center;\n        user-select: none;\n        color: colours.$colour-admiralty-blue;\n      }\n\n      &:focus {\n        outline: none;\n        box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n      }\n    }\n  }\n\n  @include responsive.not-desktop {\n    .menu-sections {\n      display: none;\n\n      min-height: 56px;\n      position: relative;\n      right: 0;\n\n      position: absolute;\n      top: 100%;\n      z-index: 999;\n      min-width: 100%;\n      @include responsive.tablet-only {\n        min-width: 50%;\n        margin-left: 50%;\n      }\n\n      background-color: colours.$colour-white;\n      border: 1px solid colours.$colour-bg-header;\n\n      &.mob-menus-visible {\n        display: block;\n      }\n    }\n  }\n\n  .menu-sections,\n  .menu-items,\n  .header-profile {\n    @include responsive.desktop-only {\n      display: flex;\n      flex: 0;\n      flex-direction: row;\n    }\n  }\n}\n\n::slotted(admiralty-header-menu-item) {\n  color: red !important;\n}\n","import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';\nimport { Component, Element, Prop, h, EventEmitter, Event, State } 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  scoped: true,\n})\nexport class HeaderComponent {\n  @Element() el: HTMLElement;\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\n  @State() mobileMenuOpen = false;\n\n  @State() displayHamburger = false;\n\n  componentWillRender() {\n    const childMenus = this.el.querySelectorAll('admiralty-header-menu-item, admiralty-header-profile');\n    this.displayHamburger = childMenus.length > 0;\n  }\n\n  private handleClick(ev: MouseEvent) {\n    ev.preventDefault();\n    this.titledClicked.emit(this.headerTitleUrl);\n  }\n\n  toggleMobileMenu() {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\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} tabindex=\"0\">\n              <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n            </a>\n            <div class=\"vertical-seperator\"></div>\n            {this.headerTitle ? (\n              <h1 class=\"header-title\">\n                <a onClick={ev => this.handleClick(ev)} href={headerTitleUrl} tabindex=\"0\">\n                  {headerTitle}\n                </a>\n              </h1>\n            ) : null}\n          </div>\n          <div class=\"header-menus\">\n            <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n              <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen}>\n                <admiralty-icon icon-name={this.mobileMenuOpen ? faTimes.iconName : faBars.iconName}></admiralty-icon>\n              </button>\n            </div>\n            <div class={{ 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen }}>\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            </div>\n          </div>\n        </nav>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-header.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,i9IAAi9I,CAAC;AACp+I,8BAAe,SAAS;;MCWX,eAAe;;;;;;8BAUO,IAAI;2BAKP,8BAA8B;0BAK/B,gCAAgC;2BAK/B,wBAAwB;8BAO5B,KAAK;gCAEH,KAAK;;IAIjC,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC;;YAEnC,WAAW,CAAC,IAAI,CAAC,CAAC;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YAC7B,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;IAED,mBAAmB;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sDAAsD,CAAC,CAAC;QACpG,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;KAC/C;IAEO,WAAW,CAAC,EAAc;QAChC,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9C;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;KAC5C;IAED,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAEnF,QACE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,aAAa,IACtB,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,0DAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAC,GAAG,IACpD,4DAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,GAAI,CAC7D,EACJ,4DAAK,KAAK,EAAC,oBAAoB,GAAO,EACrC,IAAI,CAAC,WAAW,IACf,UAAI,KAAK,EAAC,cAAc,IACtB,SAAG,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAC,GAAG,IACvE,WAAW,CACV,CACD,IACH,IAAI,CACJ,EACN,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IACpF,+DAAQ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,cAAc,IAC/E,oFAA2B,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAmB,CAC/F,CACL,EACN,4DAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,cAAc,EAAE,IAC7E,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,IACvC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gBAAgB,IAC3C,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/header/header.scss?tag=admiralty-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\n@use \"../../scss/base/responsive\";\n@use \"../../scss/vars/typography\";\n\n.admiralty-header {\n  font-size: 18px;\n  font-weight: typography.$font-weight-light;\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  @include responsive.not-desktop {\n    height: 56px;\n    min-height: 56px;\n    position: relative;\n  }\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  @include responsive.not-desktop {\n    padding-left: 12px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    flex-grow: 1;\n  }\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    @include responsive.not-desktop {\n      margin-left: 12px;\n      margin-right: 12px;\n    }\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    @include responsive.not-desktop {\n      font-size: 24px;\n      line-height: 24px !important;\n      white-space: pre-wrap;\n    }\n\n    a {\n      cursor: pointer;\n      font-size: 1em;\n      font-weight: typography.$font-weight-medium;\n      line-height: 1;\n      max-width: fit-content;\n      text-decoration: none;\n\n      @include responsive.not-desktop {\n        font-size: 24px;\n      }\n      &:focus {\n        outline: 3px solid #fd0;\n        outline-offset: 3px;\n      }\n    }\n  }\n}\n\n.header-menus {\n  display: flex;\n  justify-content: flex-end;\n\n  .mobile-menu-toggle {\n    display: none;\n\n    @include responsive.not-desktop {\n      &.display-hamburger {\n        display: flex;\n      }\n    }\n    flex-direction: column;\n    justify-content: center;\n\n    button {\n      background-color: unset;\n\n      admiralty-icon {\n        font-size: 24px;\n        font-weight: 900;\n        padding: 12px;\n        cursor: pointer;\n        min-width: 24px;\n        min-height: 24px;\n        text-align: center;\n        user-select: none;\n        color: colours.$colour-admiralty-blue;\n      }\n\n      &:focus {\n        outline: none;\n        box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n      }\n    }\n  }\n\n  @include responsive.not-desktop {\n    .menu-sections {\n      display: none;\n\n      min-height: 56px;\n      position: relative;\n      right: 0;\n\n      position: absolute;\n      top: 100%;\n      z-index: 999;\n      min-width: 100%;\n      @include responsive.tablet-only {\n        min-width: 50%;\n        margin-left: 50%;\n      }\n\n      background-color: colours.$colour-white;\n      border: 1px solid colours.$colour-bg-header;\n\n      &.mob-menus-visible {\n        display: block;\n      }\n    }\n  }\n\n  .menu-sections,\n  .menu-items,\n  .header-profile {\n    @include responsive.desktop-only {\n      display: flex;\n      flex: 0;\n      flex-direction: row;\n    }\n  }\n}\n\n::slotted(admiralty-header-menu-item) {\n  color: red !important;\n}\n","import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';\nimport { Component, Element, Prop, h, EventEmitter, Event, State, forceUpdate } 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  scoped: true,\n})\nexport class HeaderComponent {\n  @Element() el: HTMLElement;\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\n  @State() mobileMenuOpen = false;\n\n  @State() displayHamburger = false;\n\n  observer: MutationObserver;\n\n  connectedCallback() {\n    this.observer = new MutationObserver(() => {\n      // when new menu items are added to the slots, we need to trigger a render cycle so that they render correctly\n      forceUpdate(this);\n    });\n    this.observer.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n  }\n\n  componentWillRender() {\n    const childMenus = this.el.querySelectorAll('admiralty-header-menu-item, admiralty-header-profile');\n    this.displayHamburger = childMenus.length > 0;\n  }\n\n  private handleClick(ev: MouseEvent) {\n    ev.preventDefault();\n    this.titledClicked.emit(this.headerTitleUrl);\n  }\n\n  toggleMobileMenu() {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\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} tabindex=\"0\">\n              <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n            </a>\n            <div class=\"vertical-seperator\"></div>\n            {this.headerTitle ? (\n              <h1 class=\"header-title\">\n                <a onClick={ev => this.handleClick(ev)} href={headerTitleUrl} tabindex=\"0\">\n                  {headerTitle}\n                </a>\n              </h1>\n            ) : null}\n          </div>\n          <div class=\"header-menus\">\n            <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n              <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen}>\n                <admiralty-icon icon-name={this.mobileMenuOpen ? faTimes.iconName : faBars.iconName}></admiralty-icon>\n              </button>\n            </div>\n            <div class={{ 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen }}>\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            </div>\n          </div>\n        </nav>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-4f98c723.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-4f98c723.js';
 import { e as faTimes, g as faBars } from './index-9dc0c8fa.js';
 
 const headerCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-header{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header{display:none}}.admiralty-header.sc-admiralty-header{font-size:18px;font-weight:300;line-height:24px}.header-menu.sc-admiralty-header{border-bottom:1px solid #d8d8d8;display:flex;flex-direction:row;background-color:#fff;height:5em;min-height:5em;position:relative}@media (max-width: 1023px){.header-menu.sc-admiralty-header{height:56px;min-height:56px;position:relative}}.header-branding.sc-admiralty-header{display:flex;flex-direction:row;flex-grow:1;font-size:18px;padding:1.3em 0 1.3em 1.3em}@media (max-width: 1023px){.header-branding.sc-admiralty-header{padding-left:12px;padding-top:12px;padding-bottom:12px;flex-grow:1}}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header{background-color:transparent;color:#09315b}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header img.sc-admiralty-header{height:100%;width:9em}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header:focus{outline:3px solid #fd0;outline-offset:3px}.header-branding.sc-admiralty-header .vertical-seperator.sc-admiralty-header{border-right:1px solid #d8d8d8;margin-left:24px;margin-right:24px}@media (max-width: 1023px){.header-branding.sc-admiralty-header .vertical-seperator.sc-admiralty-header{margin-left:12px;margin-right:12px}}.header-branding.sc-admiralty-header .header-title.sc-admiralty-header{display:flex;flex-direction:column;flex-grow:1;justify-content:center;font-size:2em;line-height:2em;margin-bottom:unset !important;user-select:none}@media (max-width: 1023px){.header-branding.sc-admiralty-header .header-title.sc-admiralty-header{font-size:24px;line-height:24px !important;white-space:pre-wrap}}.header-branding.sc-admiralty-header .header-title.sc-admiralty-header a.sc-admiralty-header{cursor:pointer;font-size:1em;font-weight:normal;line-height:1;max-width:fit-content;text-decoration:none}@media (max-width: 1023px){.header-branding.sc-admiralty-header .header-title.sc-admiralty-header a.sc-admiralty-header{font-size:24px}}.header-branding.sc-admiralty-header .header-title.sc-admiralty-header a.sc-admiralty-header:focus{outline:3px solid #fd0;outline-offset:3px}.header-menus.sc-admiralty-header{display:flex;justify-content:flex-end}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header{display:none;flex-direction:column;justify-content:center}@media (max-width: 1023px){.header-menus.sc-admiralty-header .mobile-menu-toggle.display-hamburger.sc-admiralty-header{display:flex}}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header{background-color:unset}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header admiralty-icon.sc-admiralty-header{font-size:24px;font-weight:900;padding:12px;cursor:pointer;min-width:24px;min-height:24px;text-align:center;user-select:none;color:#09315b}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header:focus{outline:none;box-shadow:#ffdd00 inset 0 0 0 3px}@media (max-width: 1023px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header{display:none;min-height:56px;position:relative;right:0;position:absolute;top:100%;z-index:999;min-width:100%;background-color:#ffffff;border:1px solid #d8d8d8}}@media (max-width: 1023px) and (max-width: 1023px) and (min-width: 480px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header{min-width:50%;margin-left:50%}}@media (max-width: 1023px){.header-menus.sc-admiralty-header .menu-sections.mob-menus-visible.sc-admiralty-header{display:block}}@media (min-width: 1024px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header,.header-menus.sc-admiralty-header .menu-items.sc-admiralty-header,.header-menus.sc-admiralty-header .header-profile.sc-admiralty-header{display:flex;flex:0;flex-direction:row}}.sc-admiralty-header-s>admiralty-header-menu-item{color:red !important}";
@@ -16,6 +16,19 @@ const HeaderComponent = class {
         this.mobileMenuOpen = false;
         this.displayHamburger = false;
     }
+    connectedCallback() {
+        this.observer = new MutationObserver(() => {
+            // when new menu items are added to the slots, we need to trigger a render cycle so that they render correctly
+            forceUpdate(this);
+        });
+        this.observer.observe(this.el, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
     componentWillRender() {
         const childMenus = this.el.querySelectorAll('admiralty-header-menu-item, admiralty-header-profile');
         this.displayHamburger = childMenus.length > 0;
@@ -29,7 +42,7 @@ const HeaderComponent = class {
     }
     render() {
         const { logoAltText, logoLinkUrl, logoImgUrl, headerTitle, headerTitleUrl } = this;
-        return (h("div", { key: '2e7a86e2d3fed9dd00a1d320a68bf565e778f6ad', class: "admiralty-header" }, h("nav", { key: '42dd904434e4448b6393353870f24a919d623ab9', class: "header-menu" }, h("div", { key: 'a8e9e99042c67559ee4fe2cd5ed6e9a4bc576cae', class: "header-branding" }, h("a", { key: '1cbfc7fe8ac841f5ef221e0b92af5e9513fda86b', class: "header-logo", href: logoLinkUrl, tabindex: "0" }, h("img", { key: '42b527107ddaf14de1d1f86fd88bcee30b7ac53a', class: "header-image", alt: logoAltText, src: logoImgUrl })), h("div", { key: 'ce83028d072016a12d67705042147267da017f9f', class: "vertical-seperator" }), this.headerTitle ? (h("h1", { class: "header-title" }, h("a", { onClick: ev => this.handleClick(ev), href: headerTitleUrl, tabindex: "0" }, headerTitle))) : null), h("div", { key: '6b8621398f80afe1e0308f2a93da8d99fa34bfe7', class: "header-menus" }, h("div", { key: '8e8a0d694c30480e1ae5dd5c675a79cfb5052622', class: { 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger } }, h("button", { key: '457920ff25c168f8bec0382536b3d4cabe876fff', onClick: _ => this.toggleMobileMenu(), "aria-expanded": this.mobileMenuOpen }, h("admiralty-icon", { key: '2fa83e76fddc22aae9476673cc298b18f5c989d9', "icon-name": this.mobileMenuOpen ? faTimes.iconName : faBars.iconName }))), h("div", { key: '0fbc79615f65528702417f65b4fa6809d0f7d5db', class: { 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen } }, h("div", { key: 'bd710073b715e8bd7910405fa96c202a0b044eef', role: "navigation", class: "menu-items" }, h("slot", { key: '12213bb4d09752143db05065f6eb2f2b2f589052', name: "items" })), h("div", { key: '65ba572d7a52e7739844206f5f196a780874fb70', role: "navigation", class: "header-profile" }, h("slot", { key: 'b5f6e293705d7736885deefc038e85a086249c68', name: "profile" })))))));
+        return (h("div", { key: '1ce4c61d4203b02df4eb3ea59630435b4b8b4c6e', class: "admiralty-header" }, h("nav", { key: 'de38e2216d022b71633f2e28b5d93c3fbec84872', class: "header-menu" }, h("div", { key: 'f637e625b70754fc6b7c84c734d8e5a377119abc', class: "header-branding" }, h("a", { key: '095da57d90ff136a51c762f21b2b5c187d467ecc', class: "header-logo", href: logoLinkUrl, tabindex: "0" }, h("img", { key: '0ba6fd8e2c02f5dfd59391ed1247cef5ae11d710', class: "header-image", alt: logoAltText, src: logoImgUrl })), h("div", { key: 'e4cb7e380df3bf19013d3421861e73eacbf61c06', class: "vertical-seperator" }), this.headerTitle ? (h("h1", { class: "header-title" }, h("a", { onClick: ev => this.handleClick(ev), href: headerTitleUrl, tabindex: "0" }, headerTitle))) : null), h("div", { key: '8fe5d214fcde223ad31e24cb616fd49ec281d8f5', class: "header-menus" }, h("div", { key: '7204e6d73553d11820a2b5e9a1edb585c8b8f1e8', class: { 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger } }, h("button", { key: '5b00afc3d87e90988e97fbf30602f87679ee6449', onClick: _ => this.toggleMobileMenu(), "aria-expanded": this.mobileMenuOpen }, h("admiralty-icon", { key: '5744765cf43c31d5bf3483756107159e68d35732', "icon-name": this.mobileMenuOpen ? faTimes.iconName : faBars.iconName }))), h("div", { key: '2200401f504652a23f745a6e4b50f060efc586a2', class: { 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen } }, h("div", { key: '557d01ea17f49ba0794abcd4ef8d1652af8c3d62', role: "navigation", class: "menu-items" }, h("slot", { key: '66eb0934f464d70f8585a3ed4f6caf705fa006f3', name: "items" })), h("div", { key: '77017d42493565df403912554e01937e8b5f7409', role: "navigation", class: "header-profile" }, h("slot", { key: '1ab382697c15573f3ad150125eb2c3fedf0bde63', name: "profile" })))))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"admiralty-header.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,i9IAAi9I,CAAC;AACp+I,8BAAe,SAAS;;MCWX,eAAe;;;;;8BAUO,IAAI;2BAKP,8BAA8B;0BAK/B,gCAAgC;2BAK/B,wBAAwB;8BAO5B,KAAK;gCAEH,KAAK;;IAEjC,mBAAmB;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sDAAsD,CAAC,CAAC;QACpG,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;KAC/C;IAEO,WAAW,CAAC,EAAc;QAChC,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9C;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;KAC5C;IAED,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAEnF,QACE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,aAAa,IACtB,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,0DAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAC,GAAG,IACpD,4DAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,GAAI,CAC7D,EACJ,4DAAK,KAAK,EAAC,oBAAoB,GAAO,EACrC,IAAI,CAAC,WAAW,IACf,UAAI,KAAK,EAAC,cAAc,IACtB,SAAG,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAC,GAAG,IACvE,WAAW,CACV,CACD,IACH,IAAI,CACJ,EACN,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IACpF,+DAAQ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,cAAc,IAC/E,oFAA2B,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAmB,CAC/F,CACL,EACN,4DAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,cAAc,EAAE,IAC7E,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,IACvC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gBAAgB,IAC3C,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACF,EACN;KACH;;;;;;;","names":[],"sources":["src/components/header/header.scss?tag=admiralty-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\n@use \"../../scss/base/responsive\";\n@use \"../../scss/vars/typography\";\n\n.admiralty-header {\n  font-size: 18px;\n  font-weight: typography.$font-weight-light;\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  @include responsive.not-desktop {\n    height: 56px;\n    min-height: 56px;\n    position: relative;\n  }\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  @include responsive.not-desktop {\n    padding-left: 12px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    flex-grow: 1;\n  }\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    @include responsive.not-desktop {\n      margin-left: 12px;\n      margin-right: 12px;\n    }\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    @include responsive.not-desktop {\n      font-size: 24px;\n      line-height: 24px !important;\n      white-space: pre-wrap;\n    }\n\n    a {\n      cursor: pointer;\n      font-size: 1em;\n      font-weight: typography.$font-weight-medium;\n      line-height: 1;\n      max-width: fit-content;\n      text-decoration: none;\n\n      @include responsive.not-desktop {\n        font-size: 24px;\n      }\n      &:focus {\n        outline: 3px solid #fd0;\n        outline-offset: 3px;\n      }\n    }\n  }\n}\n\n.header-menus {\n  display: flex;\n  justify-content: flex-end;\n\n  .mobile-menu-toggle {\n    display: none;\n\n    @include responsive.not-desktop {\n      &.display-hamburger {\n        display: flex;\n      }\n    }\n    flex-direction: column;\n    justify-content: center;\n\n    button {\n      background-color: unset;\n\n      admiralty-icon {\n        font-size: 24px;\n        font-weight: 900;\n        padding: 12px;\n        cursor: pointer;\n        min-width: 24px;\n        min-height: 24px;\n        text-align: center;\n        user-select: none;\n        color: colours.$colour-admiralty-blue;\n      }\n\n      &:focus {\n        outline: none;\n        box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n      }\n    }\n  }\n\n  @include responsive.not-desktop {\n    .menu-sections {\n      display: none;\n\n      min-height: 56px;\n      position: relative;\n      right: 0;\n\n      position: absolute;\n      top: 100%;\n      z-index: 999;\n      min-width: 100%;\n      @include responsive.tablet-only {\n        min-width: 50%;\n        margin-left: 50%;\n      }\n\n      background-color: colours.$colour-white;\n      border: 1px solid colours.$colour-bg-header;\n\n      &.mob-menus-visible {\n        display: block;\n      }\n    }\n  }\n\n  .menu-sections,\n  .menu-items,\n  .header-profile {\n    @include responsive.desktop-only {\n      display: flex;\n      flex: 0;\n      flex-direction: row;\n    }\n  }\n}\n\n::slotted(admiralty-header-menu-item) {\n  color: red !important;\n}\n","import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';\nimport { Component, Element, Prop, h, EventEmitter, Event, State } 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  scoped: true,\n})\nexport class HeaderComponent {\n  @Element() el: HTMLElement;\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\n  @State() mobileMenuOpen = false;\n\n  @State() displayHamburger = false;\n\n  componentWillRender() {\n    const childMenus = this.el.querySelectorAll('admiralty-header-menu-item, admiralty-header-profile');\n    this.displayHamburger = childMenus.length > 0;\n  }\n\n  private handleClick(ev: MouseEvent) {\n    ev.preventDefault();\n    this.titledClicked.emit(this.headerTitleUrl);\n  }\n\n  toggleMobileMenu() {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\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} tabindex=\"0\">\n              <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n            </a>\n            <div class=\"vertical-seperator\"></div>\n            {this.headerTitle ? (\n              <h1 class=\"header-title\">\n                <a onClick={ev => this.handleClick(ev)} href={headerTitleUrl} tabindex=\"0\">\n                  {headerTitle}\n                </a>\n              </h1>\n            ) : null}\n          </div>\n          <div class=\"header-menus\">\n            <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n              <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen}>\n                <admiralty-icon icon-name={this.mobileMenuOpen ? faTimes.iconName : faBars.iconName}></admiralty-icon>\n              </button>\n            </div>\n            <div class={{ 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen }}>\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            </div>\n          </div>\n        </nav>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"admiralty-header.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,i9IAAi9I,CAAC;AACp+I,8BAAe,SAAS;;MCWX,eAAe;;;;;8BAUO,IAAI;2BAKP,8BAA8B;0BAK/B,gCAAgC;2BAK/B,wBAAwB;8BAO5B,KAAK;gCAEH,KAAK;;IAIjC,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC;;YAEnC,WAAW,CAAC,IAAI,CAAC,CAAC;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YAC7B,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;IAED,mBAAmB;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sDAAsD,CAAC,CAAC;QACpG,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;KAC/C;IAEO,WAAW,CAAC,EAAc;QAChC,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9C;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;KAC5C;IAED,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAEnF,QACE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,aAAa,IACtB,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,0DAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAC,GAAG,IACpD,4DAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,GAAI,CAC7D,EACJ,4DAAK,KAAK,EAAC,oBAAoB,GAAO,EACrC,IAAI,CAAC,WAAW,IACf,UAAI,KAAK,EAAC,cAAc,IACtB,SAAG,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAC,GAAG,IACvE,WAAW,CACV,CACD,IACH,IAAI,CACJ,EACN,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IACpF,+DAAQ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,cAAc,IAC/E,oFAA2B,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAmB,CAC/F,CACL,EACN,4DAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,cAAc,EAAE,IAC7E,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,IACvC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gBAAgB,IAC3C,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACF,EACN;KACH;;;;;;;","names":[],"sources":["src/components/header/header.scss?tag=admiralty-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\n@use \"../../scss/base/responsive\";\n@use \"../../scss/vars/typography\";\n\n.admiralty-header {\n  font-size: 18px;\n  font-weight: typography.$font-weight-light;\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  @include responsive.not-desktop {\n    height: 56px;\n    min-height: 56px;\n    position: relative;\n  }\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  @include responsive.not-desktop {\n    padding-left: 12px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    flex-grow: 1;\n  }\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    @include responsive.not-desktop {\n      margin-left: 12px;\n      margin-right: 12px;\n    }\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    @include responsive.not-desktop {\n      font-size: 24px;\n      line-height: 24px !important;\n      white-space: pre-wrap;\n    }\n\n    a {\n      cursor: pointer;\n      font-size: 1em;\n      font-weight: typography.$font-weight-medium;\n      line-height: 1;\n      max-width: fit-content;\n      text-decoration: none;\n\n      @include responsive.not-desktop {\n        font-size: 24px;\n      }\n      &:focus {\n        outline: 3px solid #fd0;\n        outline-offset: 3px;\n      }\n    }\n  }\n}\n\n.header-menus {\n  display: flex;\n  justify-content: flex-end;\n\n  .mobile-menu-toggle {\n    display: none;\n\n    @include responsive.not-desktop {\n      &.display-hamburger {\n        display: flex;\n      }\n    }\n    flex-direction: column;\n    justify-content: center;\n\n    button {\n      background-color: unset;\n\n      admiralty-icon {\n        font-size: 24px;\n        font-weight: 900;\n        padding: 12px;\n        cursor: pointer;\n        min-width: 24px;\n        min-height: 24px;\n        text-align: center;\n        user-select: none;\n        color: colours.$colour-admiralty-blue;\n      }\n\n      &:focus {\n        outline: none;\n        box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n      }\n    }\n  }\n\n  @include responsive.not-desktop {\n    .menu-sections {\n      display: none;\n\n      min-height: 56px;\n      position: relative;\n      right: 0;\n\n      position: absolute;\n      top: 100%;\n      z-index: 999;\n      min-width: 100%;\n      @include responsive.tablet-only {\n        min-width: 50%;\n        margin-left: 50%;\n      }\n\n      background-color: colours.$colour-white;\n      border: 1px solid colours.$colour-bg-header;\n\n      &.mob-menus-visible {\n        display: block;\n      }\n    }\n  }\n\n  .menu-sections,\n  .menu-items,\n  .header-profile {\n    @include responsive.desktop-only {\n      display: flex;\n      flex: 0;\n      flex-direction: row;\n    }\n  }\n}\n\n::slotted(admiralty-header-menu-item) {\n  color: red !important;\n}\n","import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';\nimport { Component, Element, Prop, h, EventEmitter, Event, State, forceUpdate } 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  scoped: true,\n})\nexport class HeaderComponent {\n  @Element() el: HTMLElement;\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\n  @State() mobileMenuOpen = false;\n\n  @State() displayHamburger = false;\n\n  observer: MutationObserver;\n\n  connectedCallback() {\n    this.observer = new MutationObserver(() => {\n      // when new menu items are added to the slots, we need to trigger a render cycle so that they render correctly\n      forceUpdate(this);\n    });\n    this.observer.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n  }\n\n  componentWillRender() {\n    const childMenus = this.el.querySelectorAll('admiralty-header-menu-item, admiralty-header-profile');\n    this.displayHamburger = childMenus.length > 0;\n  }\n\n  private handleClick(ev: MouseEvent) {\n    ev.preventDefault();\n    this.titledClicked.emit(this.headerTitleUrl);\n  }\n\n  toggleMobileMenu() {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\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} tabindex=\"0\">\n              <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n            </a>\n            <div class=\"vertical-seperator\"></div>\n            {this.headerTitle ? (\n              <h1 class=\"header-title\">\n                <a onClick={ev => this.handleClick(ev)} href={headerTitleUrl} tabindex=\"0\">\n                  {headerTitle}\n                </a>\n              </h1>\n            ) : null}\n          </div>\n          <div class=\"header-menus\">\n            <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n              <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen}>\n                <admiralty-icon icon-name={this.mobileMenuOpen ? faTimes.iconName : faBars.iconName}></admiralty-icon>\n              </button>\n            </div>\n            <div class={{ 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen }}>\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            </div>\n          </div>\n        </nav>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/types/components/header/header.d.ts

@@ -31,6 +31,9 @@ export declare class HeaderComponent {
     titledClicked: EventEmitter<string>;
     mobileMenuOpen: boolean;
     displayHamburger: boolean;
+    observer: MutationObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentWillRender(): void;
     private handleClick;
     toggleMobileMenu(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukho/admiralty-core",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -70,5 +70,5 @@
   "license": "MIT",
   "url": "https://github.com/UKHO/admiralty-design-system",
   "repository": "git://github.com/UKHO/admiralty-design-system.git",
-  "gitHead": "f26c5230f9f19e1ef3d7b14491838dbb3fefb89e"
+  "gitHead": "e86631ff61eb81d266a8cb09426741a20fcf8fb6"
 }

package/dist/admiralty/p-0e66fea2.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as a,h as d,g as i}from"./p-ac0ad15a.js";import{e as t,g as r}from"./p-a28a614b.js";const l="@media (max-width: 1023px){.desktop-only.sc-admiralty-header{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header{display:none}}.admiralty-header.sc-admiralty-header{font-size:18px;font-weight:300;line-height:24px}.header-menu.sc-admiralty-header{border-bottom:1px solid #d8d8d8;display:flex;flex-direction:row;background-color:#fff;height:5em;min-height:5em;position:relative}@media (max-width: 1023px){.header-menu.sc-admiralty-header{height:56px;min-height:56px;position:relative}}.header-branding.sc-admiralty-header{display:flex;flex-direction:row;flex-grow:1;font-size:18px;padding:1.3em 0 1.3em 1.3em}@media (max-width: 1023px){.header-branding.sc-admiralty-header{padding-left:12px;padding-top:12px;padding-bottom:12px;flex-grow:1}}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header{background-color:transparent;color:#09315b}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header img.sc-admiralty-header{height:100%;width:9em}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header:focus{outline:3px solid #fd0;outline-offset:3px}.header-branding.sc-admiralty-header .vertical-seperator.sc-admiralty-header{border-right:1px solid #d8d8d8;margin-left:24px;margin-right:24px}@media (max-width: 1023px){.header-branding.sc-admiralty-header .vertical-seperator.sc-admiralty-header{margin-left:12px;margin-right:12px}}.header-branding.sc-admiralty-header .header-title.sc-admiralty-header{display:flex;flex-direction:column;flex-grow:1;justify-content:center;font-size:2em;line-height:2em;margin-bottom:unset !important;user-select:none}@media (max-width: 1023px){.header-branding.sc-admiralty-header .header-title.sc-admiralty-header{font-size:24px;line-height:24px !important;white-space:pre-wrap}}.header-branding.sc-admiralty-header .header-title.sc-admiralty-header a.sc-admiralty-header{cursor:pointer;font-size:1em;font-weight:normal;line-height:1;max-width:fit-content;text-decoration:none}@media (max-width: 1023px){.header-branding.sc-admiralty-header .header-title.sc-admiralty-header a.sc-admiralty-header{font-size:24px}}.header-branding.sc-admiralty-header .header-title.sc-admiralty-header a.sc-admiralty-header:focus{outline:3px solid #fd0;outline-offset:3px}.header-menus.sc-admiralty-header{display:flex;justify-content:flex-end}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header{display:none;flex-direction:column;justify-content:center}@media (max-width: 1023px){.header-menus.sc-admiralty-header .mobile-menu-toggle.display-hamburger.sc-admiralty-header{display:flex}}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header{background-color:unset}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header admiralty-icon.sc-admiralty-header{font-size:24px;font-weight:900;padding:12px;cursor:pointer;min-width:24px;min-height:24px;text-align:center;user-select:none;color:#09315b}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header:focus{outline:none;box-shadow:#ffdd00 inset 0 0 0 3px}@media (max-width: 1023px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header{display:none;min-height:56px;position:relative;right:0;position:absolute;top:100%;z-index:999;min-width:100%;background-color:#ffffff;border:1px solid #d8d8d8}}@media (max-width: 1023px) and (max-width: 1023px) and (min-width: 480px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header{min-width:50%;margin-left:50%}}@media (max-width: 1023px){.header-menus.sc-admiralty-header .menu-sections.mob-menus-visible.sc-admiralty-header{display:block}}@media (min-width: 1024px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header,.header-menus.sc-admiralty-header .menu-items.sc-admiralty-header,.header-menus.sc-admiralty-header .header-profile.sc-admiralty-header{display:flex;flex:0;flex-direction:row}}.sc-admiralty-header-s>admiralty-header-menu-item{color:red !important}";const n=l;const s=class{constructor(d){e(this,d);this.titledClicked=a(this,"titledClicked",7);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";this.mobileMenuOpen=false;this.displayHamburger=false}componentWillRender(){const e=this.el.querySelectorAll("admiralty-header-menu-item, admiralty-header-profile");this.displayHamburger=e.length>0}handleClick(e){e.preventDefault();this.titledClicked.emit(this.headerTitleUrl)}toggleMobileMenu(){this.mobileMenuOpen=!this.mobileMenuOpen}render(){const{logoAltText:e,logoLinkUrl:a,logoImgUrl:i,headerTitle:l,headerTitleUrl:n}=this;return d("div",{key:"2e7a86e2d3fed9dd00a1d320a68bf565e778f6ad",class:"admiralty-header"},d("nav",{key:"42dd904434e4448b6393353870f24a919d623ab9",class:"header-menu"},d("div",{key:"a8e9e99042c67559ee4fe2cd5ed6e9a4bc576cae",class:"header-branding"},d("a",{key:"1cbfc7fe8ac841f5ef221e0b92af5e9513fda86b",class:"header-logo",href:a,tabindex:"0"},d("img",{key:"42b527107ddaf14de1d1f86fd88bcee30b7ac53a",class:"header-image",alt:e,src:i})),d("div",{key:"ce83028d072016a12d67705042147267da017f9f",class:"vertical-seperator"}),this.headerTitle?d("h1",{class:"header-title"},d("a",{onClick:e=>this.handleClick(e),href:n,tabindex:"0"},l)):null),d("div",{key:"6b8621398f80afe1e0308f2a93da8d99fa34bfe7",class:"header-menus"},d("div",{key:"8e8a0d694c30480e1ae5dd5c675a79cfb5052622",class:{"mobile-menu-toggle":true,"display-hamburger":this.displayHamburger}},d("button",{key:"457920ff25c168f8bec0382536b3d4cabe876fff",onClick:e=>this.toggleMobileMenu(),"aria-expanded":this.mobileMenuOpen},d("admiralty-icon",{key:"2fa83e76fddc22aae9476673cc298b18f5c989d9","icon-name":this.mobileMenuOpen?t.iconName:r.iconName}))),d("div",{key:"0fbc79615f65528702417f65b4fa6809d0f7d5db",class:{"menu-sections":true,"mob-menus-visible":this.mobileMenuOpen}},d("div",{key:"bd710073b715e8bd7910405fa96c202a0b044eef",role:"navigation",class:"menu-items"},d("slot",{key:"12213bb4d09752143db05065f6eb2f2b2f589052",name:"items"})),d("div",{key:"65ba572d7a52e7739844206f5f196a780874fb70",role:"navigation",class:"header-profile"},d("slot",{key:"b5f6e293705d7736885deefc038e85a086249c68",name:"profile"}))))))}get el(){return i(this)}};s.style=n;export{s as admiralty_header};
-//# sourceMappingURL=p-0e66fea2.entry.js.map

package/dist/admiralty/p-0e66fea2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["headerCss","AdmiraltyHeaderStyle0","HeaderComponent","componentWillRender","childMenus","this","el","querySelectorAll","displayHamburger","length","handleClick","ev","preventDefault","titledClicked","emit","headerTitleUrl","toggleMobileMenu","mobileMenuOpen","render","logoAltText","logoLinkUrl","logoImgUrl","headerTitle","h","key","class","href","tabindex","alt","src","onClick","_","faTimes","iconName","faBars","role","name"],"sources":["src/components/header/header.scss?tag=admiralty-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\n@use \"../../scss/base/responsive\";\n@use \"../../scss/vars/typography\";\n\n.admiralty-header {\n  font-size: 18px;\n  font-weight: typography.$font-weight-light;\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  @include responsive.not-desktop {\n    height: 56px;\n    min-height: 56px;\n    position: relative;\n  }\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  @include responsive.not-desktop {\n    padding-left: 12px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    flex-grow: 1;\n  }\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    @include responsive.not-desktop {\n      margin-left: 12px;\n      margin-right: 12px;\n    }\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    @include responsive.not-desktop {\n      font-size: 24px;\n      line-height: 24px !important;\n      white-space: pre-wrap;\n    }\n\n    a {\n      cursor: pointer;\n      font-size: 1em;\n      font-weight: typography.$font-weight-medium;\n      line-height: 1;\n      max-width: fit-content;\n      text-decoration: none;\n\n      @include responsive.not-desktop {\n        font-size: 24px;\n      }\n      &:focus {\n        outline: 3px solid #fd0;\n        outline-offset: 3px;\n      }\n    }\n  }\n}\n\n.header-menus {\n  display: flex;\n  justify-content: flex-end;\n\n  .mobile-menu-toggle {\n    display: none;\n\n    @include responsive.not-desktop {\n      &.display-hamburger {\n        display: flex;\n      }\n    }\n    flex-direction: column;\n    justify-content: center;\n\n    button {\n      background-color: unset;\n\n      admiralty-icon {\n        font-size: 24px;\n        font-weight: 900;\n        padding: 12px;\n        cursor: pointer;\n        min-width: 24px;\n        min-height: 24px;\n        text-align: center;\n        user-select: none;\n        color: colours.$colour-admiralty-blue;\n      }\n\n      &:focus {\n        outline: none;\n        box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n      }\n    }\n  }\n\n  @include responsive.not-desktop {\n    .menu-sections {\n      display: none;\n\n      min-height: 56px;\n      position: relative;\n      right: 0;\n\n      position: absolute;\n      top: 100%;\n      z-index: 999;\n      min-width: 100%;\n      @include responsive.tablet-only {\n        min-width: 50%;\n        margin-left: 50%;\n      }\n\n      background-color: colours.$colour-white;\n      border: 1px solid colours.$colour-bg-header;\n\n      &.mob-menus-visible {\n        display: block;\n      }\n    }\n  }\n\n  .menu-sections,\n  .menu-items,\n  .header-profile {\n    @include responsive.desktop-only {\n      display: flex;\n      flex: 0;\n      flex-direction: row;\n    }\n  }\n}\n\n::slotted(admiralty-header-menu-item) {\n  color: red !important;\n}\n","import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';\nimport { Component, Element, Prop, h, EventEmitter, Event, State } 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  scoped: true,\n})\nexport class HeaderComponent {\n  @Element() el: HTMLElement;\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\n  @State() mobileMenuOpen = false;\n\n  @State() displayHamburger = false;\n\n  componentWillRender() {\n    const childMenus = this.el.querySelectorAll('admiralty-header-menu-item, admiralty-header-profile');\n    this.displayHamburger = childMenus.length > 0;\n  }\n\n  private handleClick(ev: MouseEvent) {\n    ev.preventDefault();\n    this.titledClicked.emit(this.headerTitleUrl);\n  }\n\n  toggleMobileMenu() {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\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} tabindex=\"0\">\n              <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n            </a>\n            <div class=\"vertical-seperator\"></div>\n            {this.headerTitle ? (\n              <h1 class=\"header-title\">\n                <a onClick={ev => this.handleClick(ev)} href={headerTitleUrl} tabindex=\"0\">\n                  {headerTitle}\n                </a>\n              </h1>\n            ) : null}\n          </div>\n          <div class=\"header-menus\">\n            <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n              <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen}>\n                <admiralty-icon icon-name={this.mobileMenuOpen ? faTimes.iconName : faBars.iconName}></admiralty-icon>\n              </button>\n            </div>\n            <div class={{ 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen }}>\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            </div>\n          </div>\n        </nav>\n      </div>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,k9IAClB,MAAAC,EAAeD,E,MCWFE,EAAe,M,qHAUO,K,iBAKH,+B,gBAKD,iC,iBAKC,yB,oBAOJ,M,sBAEE,K,CAE5B,mBAAAC,GACE,MAAMC,EAAaC,KAAKC,GAAGC,iBAAiB,wDAC5CF,KAAKG,iBAAmBJ,EAAWK,OAAS,C,CAGtC,WAAAC,CAAYC,GAClBA,EAAGC,iBACHP,KAAKQ,cAAcC,KAAKT,KAAKU,e,CAG/B,gBAAAC,GACEX,KAAKY,gBAAkBZ,KAAKY,c,CAG9B,MAAAC,GACE,MAAMC,YAAEA,EAAWC,YAAEA,EAAWC,WAAEA,EAAUC,YAAEA,EAAWP,eAAEA,GAAmBV,KAE9E,OACEkB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,eACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACTF,EAAA,KAAAC,IAAA,2CAAGC,MAAM,cAAcC,KAAMN,EAAaO,SAAS,KACjDJ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,eAAeG,IAAKT,EAAaU,IAAKR,KAEnDE,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uBACVpB,KAAKiB,YACJC,EAAA,MAAIE,MAAM,gBACRF,EAAA,KAAGO,QAASnB,GAAMN,KAAKK,YAAYC,GAAKe,KAAMX,EAAgBY,SAAS,KACpEL,IAGH,MAENC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAO,CAAE,qBAAsB,KAAM,oBAAqBpB,KAAKG,mBAClEe,EAAA,UAAAC,IAAA,2CAAQM,QAASC,GAAK1B,KAAKW,mBAAkB,gBAAiBX,KAAKY,gBACjEM,EAAA,kBAAAC,IAAA,uDAA2BnB,KAAKY,eAAiBe,EAAQC,SAAWC,EAAOD,aAG/EV,EAAA,OAAAC,IAAA,2CAAKC,MAAO,CAAE,gBAAiB,KAAM,oBAAqBpB,KAAKY,iBAC7DM,EAAA,OAAAC,IAAA,2CAAKW,KAAK,aAAaV,MAAM,cAC3BF,EAAA,QAAAC,IAAA,2CAAMY,KAAK,WAEbb,EAAA,OAAAC,IAAA,2CAAKW,KAAK,aAAaV,MAAM,kBAC3BF,EAAA,QAAAC,IAAA,2CAAMY,KAAK,gB"}