npm - @ukho/admiralty-core - Versions diffs - 2.0.0-next.2 → 2.0.0-next.3 - Mend

@ukho/admiralty-core 2.0.0-next.2 → 2.0.0-next.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

package/dist/admiralty/admiralty.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,b as a}from"./p-ac0ad15a.js";export{s as setNonce}from"./p-ac0ad15a.js";import{g as i}from"./p-e1255160.js";var l=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};l().then((async e=>{await i();return a([["p-9f1ab1d1",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-521116dd",[[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-125f507d",[[6,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]},null,{value:["valueChanged"]}]]],["p-21224c21",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]},null,{value:["valueChanged"]}]]],["p-9ef5ea5f",[[6,"admiralty-radio-group",{name:[1],label:[1],hint:[1],disabled:[4],value:[1032],displayVertical:[4,"display-vertical"],invalid:[4],invalidMessage:[1,"invalid-message"]},null,{value:["valueChanged"],invalid:["invalidChanged"]}]]],["p-a958e2d1",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],href:[1],linkText:[1,"link-text"],suppressRedirect:[4,"suppress-redirect"],enableCardEvent:[4,"enable-card-event"],actionText:[1,"action-text"]}]]],["p-009be8ce",[[6,"admiralty-error-summary",{heading:[1]}]]],["p-8a6641b3",[[2,"admiralty-file-input",{label:[1],multiple:[4],invalid:[4],invalidMessage:[1,"invalid-message"],files:[32]}]]],["p-a61db279",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-f7257983",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-68c4f38b",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-6a7c18ee",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-cb595c9f",[[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-ef5e2631",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]},null,{progression:["progressionChanged"]}]]],["p-b7de208a",[[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-001ebddc",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1028],value:[8],labelText:[1,"label-text"]},null,{checked:["checkedChanged"]}]]],["p-0b6301a1",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-b77056ca",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-cd14c0ce",[[6,"admiralty-header-menu-link",{menuTitle:[1,"menu-title"],active:[4],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-f11b5fef",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"],signInOnly:[4,"sign-in-only"]}]]],["p-a9e7cf65",[[2,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"]}]]],["p-0c33ad50",[[2,"admiralty-hr"]]],["p-45fd5f1b",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-eb8b87b4",[[6,"admiralty-modal-dialog",{heading:[1],label:[1],description:[1],show:[4]}]]],["p-99d08a0d",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-884b1692",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-73bc113d",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],invalid:[4],buttonTabindex:[32],setButtonTabindex:[64]},null,{value:["valueChanged"]}]]],["p-ebdca57f",[[6,"admiralty-side-nav",{label:[1]}]]],["p-848442a6",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-5e3f7ae5",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-1951aad7",[[2,"admiralty-skip-link",{href:[1]}]]],["p-9f4b8515",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-e3ba7ad0",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-e39e7a78",[[6,"admiralty-table",{caption:[1]}]]],["p-5ff4ed64",[[6,"admiralty-table-body"]]],["p-f7e749e6",[[6,"admiralty-table-cell"]]],["p-6ba5f185",[[6,"admiralty-table-header"]]],["p-f112d077",[[6,"admiralty-table-header-cell"]]],["p-93d4d98a",[[6,"admiralty-table-row"]]],["p-327e92bb",[[2,"admiralty-type-ahead-item",{value:[1]}]]],["p-13208687",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-3a6a5795",[[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]},null,{value:["valueChanged"]}]]],["p-79fbd232",[[6,"admiralty-dialogue",{type:[1],heading:[1],sectionRole:[1,"section-role"]}]]],["p-90e2bfad",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-e5105a8a",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1],form:[1],name:[1],value:[1]}]]],["p-f930d6b0",[[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-label",{disabled:[4],for:[1]}],[6,"admiralty-input-invalid"]]]],e)}));
+import{p as e,b as a}from"./p-ac0ad15a.js";export{s as setNonce}from"./p-ac0ad15a.js";import{g as i}from"./p-e1255160.js";var l=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};l().then((async e=>{await i();return a([["p-9f1ab1d1",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-521116dd",[[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-125f507d",[[6,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]},null,{value:["valueChanged"]}]]],["p-21224c21",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]},null,{value:["valueChanged"]}]]],["p-9ef5ea5f",[[6,"admiralty-radio-group",{name:[1],label:[1],hint:[1],disabled:[4],value:[1032],displayVertical:[4,"display-vertical"],invalid:[4],invalidMessage:[1,"invalid-message"]},null,{value:["valueChanged"],invalid:["invalidChanged"]}]]],["p-a958e2d1",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],href:[1],linkText:[1,"link-text"],suppressRedirect:[4,"suppress-redirect"],enableCardEvent:[4,"enable-card-event"],actionText:[1,"action-text"]}]]],["p-009be8ce",[[6,"admiralty-error-summary",{heading:[1]}]]],["p-8a6641b3",[[2,"admiralty-file-input",{label:[1],multiple:[4],invalid:[4],invalidMessage:[1,"invalid-message"],files:[32]}]]],["p-a61db279",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-f7257983",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-68c4f38b",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-6a7c18ee",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-019c0cc9",[[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-ef5e2631",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]},null,{progression:["progressionChanged"]}]]],["p-b7de208a",[[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-001ebddc",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1028],value:[8],labelText:[1,"label-text"]},null,{checked:["checkedChanged"]}]]],["p-0b6301a1",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-30548549",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-161da3ad",[[6,"admiralty-header-menu-link",{menuTitle:[1,"menu-title"],active:[4],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-4bad0fd1",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"],signInOnly:[4,"sign-in-only"]}]]],["p-73d4c637",[[2,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"]}]]],["p-0c33ad50",[[2,"admiralty-hr"]]],["p-45fd5f1b",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-eb8b87b4",[[6,"admiralty-modal-dialog",{heading:[1],label:[1],description:[1],show:[4]}]]],["p-99d08a0d",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-884b1692",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-73bc113d",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],invalid:[4],buttonTabindex:[32],setButtonTabindex:[64]},null,{value:["valueChanged"]}]]],["p-ebdca57f",[[6,"admiralty-side-nav",{label:[1]}]]],["p-848442a6",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-5e3f7ae5",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-1951aad7",[[2,"admiralty-skip-link",{href:[1]}]]],["p-9f4b8515",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-e3ba7ad0",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-e39e7a78",[[6,"admiralty-table",{caption:[1]}]]],["p-5ff4ed64",[[6,"admiralty-table-body"]]],["p-f7e749e6",[[6,"admiralty-table-cell"]]],["p-6ba5f185",[[6,"admiralty-table-header"]]],["p-f112d077",[[6,"admiralty-table-header-cell"]]],["p-93d4d98a",[[6,"admiralty-table-row"]]],["p-327e92bb",[[2,"admiralty-type-ahead-item",{value:[1]}]]],["p-13208687",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-3a6a5795",[[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]},null,{value:["valueChanged"]}]]],["p-79fbd232",[[6,"admiralty-dialogue",{type:[1],heading:[1],sectionRole:[1,"section-role"]}]]],["p-90e2bfad",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-e5105a8a",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1],form:[1],name:[1],value:[1]}]]],["p-f930d6b0",[[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-label",{disabled:[4],for:[1]}],[6,"admiralty-input-invalid"]]]],e)}));
 //# sourceMappingURL=admiralty.esm.js.map

package/dist/admiralty/{p-cb595c9f.entry.js → p-019c0cc9.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,c as a,f as d,h as i,g as t}from"./p-ac0ad15a.js";import{a as r,b as n}from"./p-5f6bf081.js";const s="@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}}.visually-hidden.sc-admiralty-header:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}.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:#ffffff;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 transparent;color:#000000;background-color:#ffdd00;box-shadow:0 -2px #ffdd00, 0 4px #333333;text-decoration:none}.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-top:4px;margin-bottom:unset;user-select:none}@media (max-width: 1023px){.header-branding.sc-admiralty-header .header-title.sc-admiralty-header{font-size:24px;line-height:24px;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-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}}";const l=s;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";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-menu-link, 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:s}=this;return i("div",{key:"8c36e37ed4d4796a0c69ace32639eb365779cec3",class:"admiralty-header"},i("nav",{key:"ed644487140be5f707a9c5dd9b242e1324da7d01",class:"header-menu"},i("div",{key:"5a2bc9425f8b9db953e9226a8dc6e0975f38e04e",class:"header-branding"},i("a",{key:"d7a4c27a4bd0961ba7ec9e785ef54eeed71c4253",class:"header-logo",href:a,tabindex:"0"},i("img",{key:"cd2c9cb0ce7d8846e34bfb0d5774f4c9efaac0af",class:"header-image",alt:e,src:d})),i("div",{key:"7036ff6013a0dcf40ce95022b2ec3daeb9a789b9",class:"vertical-seperator"}),this.headerTitle?i("h2",{class:"header-title"},i("a",{onClick:e=>this.handleClick(e),href:s,tabindex:"0"},t)):null),i("div",{key:"97a3db2bd701b5dadb3fe20efd03e594c675a213",class:"header-menus"},i("div",{key:"8a2432347b318bafdf7681660400af2cee61a509",class:{"mobile-menu-toggle":true,"display-hamburger":this.displayHamburger}},i("button",{key:"3c7707b0d0cde675ba1123b21c4a5371bd3cbdf7",onClick:e=>this.toggleMobileMenu(),"aria-expanded":this.mobileMenuOpen,"aria-label":this.mobileMenuOpen?"Hide menu":"Show menu"},i("admiralty-icon",{key:"8f5b78d4f86550e2efd1c9c39db1f5b69616bf09","icon-name":this.mobileMenuOpen?r.iconName:n.iconName}))),i("div",{key:"00fbfcbca8f286ee481c951dabe0f71ad71a67a0",class:{"menu-sections":true,"mob-menus-visible":this.mobileMenuOpen}},i("div",{key:"203f3d8393030bed1f0d5ca9aadefd8535bb4c70",role:"navigation",class:"menu-items"},i("slot",{key:"bfa82f167991f8ac4213cc96d519f784f78531c7",name:"items"})),i("div",{key:"c9019fca46e9e6c17581834df9e747b21e89a3b7",role:"navigation",class:"header-profile"},i("slot",{key:"094f92edcc247d2a75b7824a5d87ee82e0f14715",name:"profile"}))))))}get el(){return t(this)}};h.style=l;export{h as admiralty_header};
-//# sourceMappingURL=p-cb595c9f.entry.js.map
+import{r as e,c as a,f as d,h as i,g as t}from"./p-ac0ad15a.js";import{a as r,b as n}from"./p-5f6bf081.js";const s="@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}}.visually-hidden.sc-admiralty-header:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}.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:#ffffff;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 transparent;color:#000000;background-color:#ffdd00;box-shadow:0 -2px #ffdd00, 0 4px #333333;text-decoration:none}.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-top:4px;margin-bottom:unset;user-select:none}@media (max-width: 1023px){.header-branding.sc-admiralty-header .header-title.sc-admiralty-header{font-size:24px;line-height:24px;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-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:3px solid transparent;color:#000000;background-color:#ffdd00;box-shadow:0 -2px #ffdd00, 0 4px #333333;text-decoration:none;outline:none;box-shadow:0 -4px #333333 inset}@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}}";const l=s;const o=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";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-menu-link, 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:s}=this;return i("div",{key:"8c36e37ed4d4796a0c69ace32639eb365779cec3",class:"admiralty-header"},i("div",{key:"ed644487140be5f707a9c5dd9b242e1324da7d01",class:"header-menu"},i("div",{key:"5a2bc9425f8b9db953e9226a8dc6e0975f38e04e",class:"header-branding"},i("a",{key:"d7a4c27a4bd0961ba7ec9e785ef54eeed71c4253",class:"header-logo",href:a,tabindex:"0"},i("img",{key:"cd2c9cb0ce7d8846e34bfb0d5774f4c9efaac0af",class:"header-image",alt:e,src:d})),i("div",{key:"7036ff6013a0dcf40ce95022b2ec3daeb9a789b9",class:"vertical-seperator"}),this.headerTitle?i("h2",{class:"header-title"},i("a",{onClick:e=>this.handleClick(e),href:s,tabindex:"0"},t)):null),i("nav",{key:"2f5c978408f906a8bf42b10c3c0b6a57182c1aed",role:"navigation",class:"header-menus","aria-label":"Site navigation"},i("div",{key:"9a24f3222cac6248310d1dde390dc884d8d6b26a",class:{"mobile-menu-toggle":true,"display-hamburger":this.displayHamburger}},i("button",{key:"b1b54883c28042b4b598a55aff412a2840a0cc51",onClick:e=>this.toggleMobileMenu(),"aria-expanded":this.mobileMenuOpen,"aria-label":this.mobileMenuOpen?"Hide menu":"Show menu"},i("admiralty-icon",{key:"6c69b37937d9bdd0622139dbb96549f01ba76d8e","icon-name":this.mobileMenuOpen?r.iconName:n.iconName}))),i("div",{key:"a579676d6ca0d7812118d8fb30adae6c55ec1dd3",class:{"menu-sections":true,"mob-menus-visible":this.mobileMenuOpen}},i("div",{key:"ca94d0a2f02866796b493fccd01be130ad8b4705",class:"menu-items"},i("slot",{key:"3838390149f8b4c277c16abcfb01cb0a35634d6f",name:"items"})),i("div",{key:"07d3b491c5c38a958b39f98e4c919347a75ad8a4",class:"header-profile"},i("slot",{key:"92daa1dc23f19725e04a57bf62515932e153898f",name:"profile"}))))))}get el(){return t(this)}};o.style=l;export{o as admiralty_header};
+//# sourceMappingURL=p-019c0cc9.entry.js.map

package/dist/admiralty/p-019c0cc9.entry.js.map ADDED Viewed

@@ -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","role","_","faTimes","iconName","faBars","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@use '../../scss/base/a11y';\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: colours.$colour-bg;\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 @include a11y.focus-highlight;\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-top: 4px;\n margin-bottom: unset;\n user-select: none;\n\n @include responsive.not-desktop {\n font-size: 24px;\n line-height: 24px;\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 }\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 @include a11y.focus-highlight;\n\n outline: none;\n box-shadow: 0 -4px colours.$colour-text inset;\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","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' and 'admiralty-header-menu-link menu-title' components are placed here for appropriate 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';\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-menu-link, 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 <div 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 <h2 class=\"header-title\">\n <a onClick={ev => this.handleClick(ev)} href={headerTitleUrl} tabindex=\"0\">\n {headerTitle}\n </a>\n </h2>\n ) : null}\n </div>\n <nav role=\"navigation\" class=\"header-menus\" aria-label=\"Site navigation\">\n <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen} aria-label={this.mobileMenuOpen ? 'Hide menu' : 'Show menu'}>\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 class=\"menu-items\">\n <slot name=\"items\"></slot>\n </div>\n <div class=\"header-profile\">\n <slot name=\"profile\"></slot>\n </div>\n </div>\n </nav>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"2GAAA,MAAMA,EAAY,qzJAClB,MAAAC,EAAeD,E,MCWFE,EAAe,M,qHAUO,K,iBAKH,+B,gBAKD,iC,iBAKC,Y,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,oFAC5CZ,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,2CAAKO,KAAK,aAAaN,MAAM,eAAc,aAAY,mBACrDF,EAAA,OAAAC,IAAA,2CAAKC,MAAO,CAAE,qBAAsB,KAAM,oBAAqB9B,KAAKa,mBAClEe,EAAA,UAAAC,IAAA,2CAAQM,QAASE,GAAKrC,KAAKqB,mBAAkB,gBAAiBrB,KAAKsB,eAAc,aAActB,KAAKsB,eAAiB,YAAc,aACjIM,EAAA,kBAAAC,IAAA,uDAA2B7B,KAAKsB,eAAiBgB,EAAQC,SAAWC,EAAOD,aAG/EX,EAAA,OAAAC,IAAA,2CAAKC,MAAO,CAAE,gBAAiB,KAAM,oBAAqB9B,KAAKsB,iBAC7DM,EAAA,OAAAC,IAAA,2CAAKC,MAAM,cACTF,EAAA,QAAAC,IAAA,2CAAMY,KAAK,WAEbb,EAAA,OAAAC,IAAA,2CAAKC,MAAM,kBACTF,EAAA,QAAAC,IAAA,2CAAMY,KAAK,gB"}

package/dist/admiralty/p-161da3ad.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as i,h as a,H as n,g as t}from"./p-ac0ad15a.js";const d="@media (max-width: 1023px){.desktop-only.sc-admiralty-header-menu-link{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-menu-link{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-menu-link{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-menu-link{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-menu-link{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-menu-link{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-menu-link{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-menu-link{display:none}}.menu-item.sc-admiralty-header-menu-link{cursor:pointer}.menu-item.sc-admiralty-header-menu-link a.sc-admiralty-header-menu-link{font-size:18px;font-weight:normal;text-decoration:none;outline-offset:3px;color:#09315b}@media (min-width: 1024px){.menu-item.sc-admiralty-header-menu-link{display:flex;flex:0;flex-direction:column;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.menu-item.sc-admiralty-header-menu-link:hover{box-shadow:inset 0 -5px #09315b;background-color:#f0f0f0}.menu-item.active.sc-admiralty-header-menu-link{box-shadow:inset 0 -5px #09315b}}@media (max-width: 1023px){.menu-item.sc-admiralty-header-menu-link{display:block;box-sizing:border-box;background-color:unset;text-align:unset;text-decoration:unset;padding:12px}.menu-item.sc-admiralty-header-menu-link a.sc-admiralty-header-menu-link{font-weight:normal}.menu-item.sc-admiralty-header-menu-link a.sc-admiralty-header-menu-link:focus{box-shadow:0 -4px #ffdd00, 0 4px #333333}.menu-item.sc-admiralty-header-menu-link:hover{background-color:#f0f0f0}}";const m=d;const l=class{constructor(a){e(this,a);this.menuItemClick=i(this,"menuItemClick",7);this.menuTitle=undefined;this.active=false;this.href=undefined;this.suppressRedirect=false}handleClick(e){if(this.suppressRedirect){e.preventDefault()}e.stopPropagation();return this.menuItemClick.emit()}render(){let e="menu-item ";e+=this.active?"active":"";return a(n,{key:"7a24a90e2e969ca15db8f415379929a41c116c41"},a("div",{key:"46bc49d041f29e1f50b145e29de6e695cf90220e",class:e,onClick:e=>this.handleClick(e)},a("a",{key:"15247cef11e572b91089edab7c447fbfbf28b14c",href:this.href,onClick:e=>this.handleClick(e)},this.menuTitle,a("slot",{key:"9e1dc79ce9909ee06dc8a38f2a0484ec6bfeac43"}))))}get el(){return t(this)}};l.style=m;export{l as admiralty_header_menu_link};
2	+ //# sourceMappingURL=p-161da3ad.entry.js.map

package/dist/admiralty/p-161da3ad.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["headerMenuLinkCss","AdmiraltyHeaderMenuLinkStyle0","HeaderMenuLinkComponent","handleClick","ev","this","suppressRedirect","preventDefault","stopPropagation","menuItemClick","emit","render","menuClass","active","h","Host","key","class","onClick","href","menuTitle"],"sources":["src/components/header-menu-link/header-menu-link.scss?tag=admiralty-header-menu-link&encapsulation=scoped","src/components/header-menu-link/header-menu-link.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n\n@mixin active {\n box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\n}\n\n.menu-item {\n cursor: pointer;\n\n a {\n font-size: typography.$font-size-normal;\n font-weight: typography.$font-weight-medium;\n text-decoration: none;\n outline-offset: 3px;\n color: colours.$colour-admiralty-blue;\n }\n}\n\n@include responsive.desktop-only {\n .menu-item {\n display: flex;\n flex: 0;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n line-height: 1.33em;\n margin-bottom: 0;\n min-width: 4em;\n max-width: 11.1em;\n padding: 0 1.65em;\n position: relative;\n text-align: center;\n\n &:hover {\n @include active;\n background-color: colours.$colour-nav-bg-hover;\n }\n\n &.active {\n @include active;\n }\n }\n}\n\n@include responsive.not-desktop {\n .menu-item {\n display: block;\n box-sizing: border-box;\n\n background-color: unset;\n text-align: unset;\n text-decoration: unset;\n padding: 12px;\n\n a {\n font-weight: typography.$font-weight-medium;\n &:focus {\n box-shadow:\n 0 -4px colours.$colour-utility-focus,\n 0 4px colours.$colour-text;\n }\n }\n\n &:hover {\n background-color: colours.$colour-nav-bg-hover;\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'admiralty-header-menu-link',\n styleUrl: 'header-menu-link.scss',\n scoped: true,\n})\nexport class HeaderMenuLinkComponent {\n @Element() el: HTMLElement;\n\n /**\n * The text that will be displayed in the menu.\n */\n @Prop() menuTitle?: string;\n\n /**\n * Whether the item is active\n */\n @Prop() active?: boolean = false;\n\n /**\n * The URL to link to.\n */\n @Prop() href: string;\n\n /**\n * Causes the default browser redirect to be suppressed. Can be used in conjunction with the\n * `onMenuItemClick` event to use a navigation router and prevent a full page reload when navigating.\n */\n @Prop() suppressRedirect?: boolean = false;\n\n /**\n * The event that is fired when a user clicks on the menu.\n */\n @Event() menuItemClick: EventEmitter<void>;\n\n handleClick(ev: MouseEvent): CustomEvent<void> {\n if (this.suppressRedirect) {\n ev.preventDefault();\n }\n ev.stopPropagation();\n\n return this.menuItemClick.emit();\n }\n\n render() {\n let menuClass = 'menu-item ';\n menuClass += this.active ? 'active' : '';\n\n return (\n <Host>\n <div class={menuClass} onClick={ev => this.handleClick(ev)}>\n <a href={this.href} onClick={ev => this.handleClick(ev)}>\n {this.menuTitle}\n <slot></slot>\n </a>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAoB,q1DAC1B,MAAAC,EAAeD,E,MCMFE,EAAuB,M,2GAWP,M,0CAWU,K,CAOrC,WAAAC,CAAYC,GACV,GAAIC,KAAKC,iBAAkB,CACzBF,EAAGG,gB,CAELH,EAAGI,kBAEH,OAAOH,KAAKI,cAAcC,M,CAG5B,MAAAC,GACE,IAAIC,EAAY,aAChBA,GAAaP,KAAKQ,OAAS,SAAW,GAEtC,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAOL,EAAWM,QAASd,GAAMC,KAAKF,YAAYC,IACrDU,EAAA,KAAAE,IAAA,2CAAGG,KAAMd,KAAKc,KAAMD,QAASd,GAAMC,KAAKF,YAAYC,IACjDC,KAAKe,UACNN,EAAA,QAAAE,IAAA,+C"}

package/dist/admiralty/p-30548549.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as i,h as t,H as a,g as d}from"./p-ac0ad15a.js";const m="@media (max-width: 1023px){.desktop-only.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-menu-item{display:none}}.visually-hidden.sc-admiralty-header-menu-item:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}.menu-item.sc-admiralty-header-menu-item{cursor:pointer}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item div.sc-admiralty-header-menu-item{font-size:18px;color:#09315b}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:focus div.sc-admiralty-header-menu-item{outline:3px solid transparent;color:#000000;background-color:#ffdd00;box-shadow:0 -2px #ffdd00, 0 4px #333333;text-decoration:none}button.sc-admiralty-header-menu-item{all:unset;height:100%;width:100%}@media (min-width: 1024px){.menu-item.sc-admiralty-header-menu-item{display:flex;flex:0;flex-direction:column;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.menu-item.sc-admiralty-header-menu-item:hover{box-shadow:inset 0 -5px #09315b;background-color:#f0f0f0}.menu-item.sc-admiralty-header-menu-item:hover .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.active.sc-admiralty-header-menu-item{box-shadow:inset 0 -5px #09315b}.menu-item.active.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item div.sc-admiralty-header-menu-item{font-weight:normal}.menu-item.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:none;flex-direction:column;position:absolute;border:1px solid #d8d8d8;right:0;top:100%}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-visible.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-hide.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px){.menu-item.sc-admiralty-header-menu-item{display:block;box-sizing:border-box;background-color:unset;text-align:unset;text-decoration:unset}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item div.sc-admiralty-header-menu-item{display:inline-block;margin:12px;font-weight:normal}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:hover{background-color:#f0f0f0}}";const n=m;const s=class{constructor(t){e(this,t);this.menuItemClick=i(this,"menuItemClick",7);this.menuTitle=undefined;this.active=false}connectedCallback(){try{this.subMenuSelector=this.el.querySelector("admiralty-header-sub-menu-item");this.subMenuExists=true;if(this.subMenuExists){this.subMenuSelector.setAttribute("aria-hidden","true")}}catch(e){this.subMenuExists=false}}toggleSubMenu(){const e=this.el.querySelector("div.sub-menu");if(e.classList.contains("desktop-hide")){e.classList.add("desktop-visible");e.classList.remove("desktop-hide")}else{e.classList.add("desktop-hide");e.classList.remove("desktop-visible")}}closeSubMenu(){const e=this.el.querySelector("div.sub-menu");e.classList.add("desktop-hide")}handleClick(e){e.stopPropagation();if(this.subMenuExists){this.subMenuSelector.setAttribute("aria-hidden","false");this.toggleSubMenu()}return this.menuItemClick.emit()}handleMouseOver(){if(this.subMenuExists){this.subMenuSelector.setAttribute("aria-hidden","false");this.toggleSubMenu()}}handleMouseOut(e){if(this.subMenuExists){this.subMenuSelector.setAttribute("aria-hidden","true");this.closeSubMenu()}}handleFocusOut(e){var i;const t=e===null\|\|e===void 0?void 0:e.relatedTarget;if(((i=t===null\|\|t===void 0?void 0:t.outerHTML)===null\|\|i===void 0?void 0:i.indexOf("button"))!==-1){this.closeSubMenu()}}render(){const{active:e,menuTitle:i}=this;let d="menu-item ";d+=e?"active":"";return t(a,{key:"5a8900488549afd778fbc9b4592fcf516558db74",onMouseOver:e=>this.handleMouseOver(),onMouseOut:e=>this.handleMouseOut(e)},t("div",{key:"358ad11664745099f42dd9ad4dd97c15573fb100",class:d,onClick:e=>this.handleClick(e)},t("button",{key:"8a440d8401b5290fac02d74a17465e2d55ab62d7",class:"menu-title",tabindex:"0"},t("div",{key:"38c9764f4be202fb25615246c810b4d583c05566"},i)),t("div",{key:"48fc7690abfc937cf677ce1c19b156f44976204d",class:"sub-menu desktop-hide",onFocusout:e=>this.handleFocusOut(e)},t("slot",{key:"e14548e82081ce91f7703d0eac0687e27392ec01"}))))}get el(){return d(this)}};s.style=n;export{s as admiralty_header_menu_item};
2	+ //# sourceMappingURL=p-30548549.entry.js.map

package/dist/admiralty/p-30548549.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["headerMenuItemCss","AdmiraltyHeaderMenuItemStyle0","HeaderMenuItemComponent","connectedCallback","this","subMenuSelector","el","querySelector","subMenuExists","setAttribute","e","toggleSubMenu","subMenu","classList","contains","add","remove","closeSubMenu","handleClick","ev","stopPropagation","menuItemClick","emit","handleMouseOver","handleMouseOut","_ev","handleFocusOut","relatedTarget","_a","outerHTML","indexOf","render","active","menuTitle","menuClass","h","Host","key","onMouseOver","_","onMouseOut","class","onClick","tabindex","onFocusout"],"sources":["src/components/header-menu-item/header-menu-item.scss?tag=admiralty-header-menu-item&encapsulation=scoped","src/components/header-menu-item/header-menu-item.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n@use '../../scss/base/a11y';\n\n@mixin active {\n box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\n}\n\n.menu-item {\n cursor: pointer;\n\n .menu-title {\n div {\n font-size: typography.$font-size-normal;\n color: colours.$colour-admiralty-blue;\n }\n\n &:focus div {\n @include a11y.focus-highlight;\n }\n }\n}\n\nbutton {\n all: unset;\n height: 100%;\n width: 100%;\n}\n\n@include responsive.desktop-only {\n .menu-item {\n display: flex;\n flex: 0;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n line-height: 1.33em;\n margin-bottom: 0;\n min-width: 4em;\n max-width: 11.1em;\n padding: 0 1.65em;\n position: relative;\n text-align: center;\n\n &:hover {\n @include active;\n background-color: colours.$colour-nav-bg-hover;\n\n .sub-menu {\n display: flex;\n }\n }\n\n &.active {\n @include active;\n\n .sub-menu {\n display: flex;\n }\n }\n\n .menu-title div {\n font-weight: typography.$font-weight-medium;\n }\n\n .sub-menu {\n display: none;\n flex-direction: column;\n position: absolute;\n border: 1px solid colours.$colour-divider;\n right: 0;\n top: 100%;\n\n &.desktop-visible {\n display: flex;\n }\n\n &.desktop-hide {\n display: none;\n }\n }\n }\n}\n\n@include responsive.not-desktop {\n .menu-item {\n display: block;\n box-sizing: border-box;\n background-color: unset;\n text-align: unset;\n text-decoration: unset;\n\n .menu-title {\n div {\n display: inline-block;\n margin: 12px;\n font-weight: typography.$font-weight-medium;\n }\n\n &:hover {\n background-color: colours.$colour-nav-bg-hover;\n }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * @slot - 'admiralty-sub-header-menu-item' a number of components can be placed here to add sub items\n */\n@Component({\n tag: 'admiralty-header-menu-item',\n styleUrl: 'header-menu-item.scss',\n scoped: true,\n})\nexport class HeaderMenuItemComponent {\n @Element() el: HTMLElement;\n\n /**\n * The text that will be displayed in the menu\n */\n @Prop() menuTitle: string;\n\n /**\n * Whether the item is active\n */\n @Prop() active?: boolean = false;\n\n /**\n * The event that is fired when a user clicks on the menu\n */\n @Event() menuItemClick: EventEmitter<void>;\n\n subMenuExists: boolean;\n subMenuSelector: HTMLElement;\n\n connectedCallback() {\n // check if submenu exists on this menu item\n try {\n this.subMenuSelector = this.el.querySelector('admiralty-header-sub-menu-item');\n this.subMenuExists = true;\n\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'true');\n }\n } catch (e) {\n this.subMenuExists = false;\n }\n }\n\n private toggleSubMenu() {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n\n if (subMenu.classList.contains('desktop-hide')) {\n subMenu.classList.add('desktop-visible');\n subMenu.classList.remove('desktop-hide');\n } else {\n subMenu.classList.add('desktop-hide');\n subMenu.classList.remove('desktop-visible');\n }\n }\n\n private closeSubMenu() {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n subMenu.classList.add('desktop-hide');\n }\n\n handleClick(ev: MouseEvent): CustomEvent<void> {\n ev.stopPropagation();\n\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n this.toggleSubMenu();\n }\n return this.menuItemClick.emit();\n }\n\n /**\n * Handles mouseover events, used to set the aria hidden attribute when submenu\n * is visible\n */\n handleMouseOver(): void {\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n this.toggleSubMenu();\n }\n }\n\n /**\n * Handles mouseout events, used to set the aria hidden attribute when submenu\n * is no longer visible\n */\n handleMouseOut(_ev: Event): void {\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'true');\n this.closeSubMenu();\n }\n }\n\n handleFocusOut(ev: FocusEvent) {\n const relatedTarget: any = ev?.relatedTarget;\n\n if (relatedTarget?.outerHTML?.indexOf('button') !== -1) {\n this.closeSubMenu();\n }\n }\n\n render() {\n const { active, menuTitle } = this;\n let menuClass = 'menu-item ';\n menuClass += active ? 'active' : '';\n\n return (\n <Host onMouseOver={_ => this.handleMouseOver()} onMouseOut={(ev: Event) => this.handleMouseOut(ev)}>\n <div class={menuClass} onClick={ev => this.handleClick(ev)}>\n <button class=\"menu-title\" tabindex=\"0\">\n <div>{menuTitle}</div>\n </button>\n <div class=\"sub-menu desktop-hide\" onFocusout={ev => this.handleFocusOut(ev)}>\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAoB,ksGAC1B,MAAAC,EAAeD,E,MCSFE,EAAuB,M,2GAWP,K,CAU3B,iBAAAC,GAEE,IACEC,KAAKC,gBAAkBD,KAAKE,GAAGC,cAAc,kCAC7CH,KAAKI,cAAgB,KAErB,GAAIJ,KAAKI,cAAe,CACtBJ,KAAKC,gBAAgBI,aAAa,cAAe,O,EAEnD,MAAOC,GACPN,KAAKI,cAAgB,K,EAIjB,aAAAG,GACN,MAAMC,EAA0BR,KAAKE,GAAGC,cAAc,gBAEtD,GAAIK,EAAQC,UAAUC,SAAS,gBAAiB,CAC9CF,EAAQC,UAAUE,IAAI,mBACtBH,EAAQC,UAAUG,OAAO,e,KACpB,CACLJ,EAAQC,UAAUE,IAAI,gBACtBH,EAAQC,UAAUG,OAAO,kB,EAIrB,YAAAC,GACN,MAAML,EAA0BR,KAAKE,GAAGC,cAAc,gBACtDK,EAAQC,UAAUE,IAAI,e,CAGxB,WAAAG,CAAYC,GACVA,EAAGC,kBAEH,GAAIhB,KAAKI,cAAe,CACtBJ,KAAKC,gBAAgBI,aAAa,cAAe,SAEjDL,KAAKO,e,CAEP,OAAOP,KAAKiB,cAAcC,M,CAO5B,eAAAC,GACE,GAAInB,KAAKI,cAAe,CACtBJ,KAAKC,gBAAgBI,aAAa,cAAe,SAEjDL,KAAKO,e,EAQT,cAAAa,CAAeC,GACb,GAAIrB,KAAKI,cAAe,CACtBJ,KAAKC,gBAAgBI,aAAa,cAAe,QACjDL,KAAKa,c,EAIT,cAAAS,CAAeP,G,MACb,MAAMQ,EAAqBR,IAAE,MAAFA,SAAE,SAAFA,EAAIQ,cAE/B,KAAIC,EAAAD,IAAa,MAAbA,SAAa,SAAbA,EAAeE,aAAS,MAAAD,SAAA,SAAAA,EAAEE,QAAQ,cAAe,EAAG,CACtD1B,KAAKa,c,EAIT,MAAAc,GACE,MAAMC,OAAEA,EAAMC,UAAEA,GAAc7B,KAC9B,IAAI8B,EAAY,aAChBA,GAAaF,EAAS,SAAW,GAEjC,OACEG,EAACC,EAAI,CAAAC,IAAA,2CAACC,YAAaC,GAAKnC,KAAKmB,kBAAmBiB,WAAarB,GAAcf,KAAKoB,eAAeL,IAC7FgB,EAAA,OAAAE,IAAA,2CAAKI,MAAOP,EAAWQ,QAASvB,GAAMf,KAAKc,YAAYC,IACrDgB,EAAA,UAAAE,IAAA,2CAAQI,MAAM,aAAaE,SAAS,KAClCR,EAAA,OAAAE,IAAA,4CAAMJ,IAERE,EAAA,OAAAE,IAAA,2CAAKI,MAAM,wBAAwBG,WAAYzB,GAAMf,KAAKsB,eAAeP,IACvEgB,EAAA,QAAAE,IAAA,+C"}

package/dist/admiralty/p-4bad0fd1.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as i,h as a,H as r,g as t}from"./p-ac0ad15a.js";const d="@media (max-width: 1023px){.desktop-only.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-profile{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-profile{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-profile{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-profile{display:none}}.visually-hidden.sc-admiralty-header-profile:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}.header-profile.sc-admiralty-header-profile{color:#09315b;cursor:pointer}@media (min-width: 1024px){.header-profile.sc-admiralty-header-profile{display:flex;flex:0;flex-direction:column;font-size:18px !important;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.header-profile.sc-admiralty-header-profile .not-desktop.sc-admiralty-header-profile{display:none}.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile{all:unset;height:100%;width:100%}.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile span.sc-admiralty-header-profile{color:#09315b;font-weight:normal;padding:4px 0}.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile:focus span.sc-admiralty-header-profile,.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile:focus div.sc-admiralty-header-profile{outline:3px solid transparent;color:#000000;background-color:#ffdd00;box-shadow:0 -2px #ffdd00, 0 4px #333333;text-decoration:none}.header-profile.sc-admiralty-header-profile:hover{box-shadow:inset 0 -5px #09315b;background-color:#f0f0f0}.header-profile.sc-admiralty-header-profile:hover .desktop.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile{display:flex}.header-profile.active.sc-admiralty-header-profile{box-shadow:inset 0 -5px #09315b}.header-profile.active.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile{display:flex}.header-profile.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile{display:none;flex-direction:column;font-size:18px;position:absolute;top:100%;right:0;border:1px solid #d8d8d8;width:300px}.header-profile.sc-admiralty-header-profile .sub-menu.desktop-visible.sc-admiralty-header-profile{display:flex}.header-profile.sc-admiralty-header-profile .sub-menu.desktop-hide.sc-admiralty-header-profile{display:none}.header-profile.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile{box-sizing:content-box;margin:0;width:100%;all:unset;box-sizing:border-box;display:block;font-weight:300;height:100%;padding:10px;text-align:left;width:100%}.header-profile.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:hover{background-color:#f0f0f0}}@media (max-width: 1023px){.header-profile.sc-admiralty-header-profile{border-top:1px solid #d8d8d8}.header-profile.sc-admiralty-header-profile .desktop.sc-admiralty-header-profile{display:none}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile{display:block;box-sizing:border-box;background-color:unset;text-align:unset;text-decoration:unset;width:100%;padding:12px}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile span.sc-admiralty-header-profile{padding:4px 0;color:#09315b;font-size:18px;font-weight:normal}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:hover{background-color:#f0f0f0}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:focus{outline:none}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:focus span.sc-admiralty-header-profile{outline:3px solid transparent;color:#000000;background-color:#ffdd00;box-shadow:0 -2px #ffdd00, 0 4px #333333;text-decoration:none}}";const o=d;const l=class{constructor(a){e(this,a);this.signInClicked=i(this,"signInClicked",7);this.yourAccountClicked=i(this,"yourAccountClicked",7);this.signOutClicked=i(this,"signOutClicked",7);this.handleSignIn=()=>{this.signInClicked.emit()};this.handleSignOut=()=>{this.signOutClicked.emit()};this.handleYourAccount=()=>{this.yourAccountClicked.emit()};this.closeDropdown=()=>{const e=this.el.querySelector("div.sub-menu");e.classList.add("desktop-hide")};this.toggleDropdown=e=>{const i=this.el.querySelector("div.sub-menu");if(e){i.classList.add("desktop-visible");i.classList.remove("desktop-hide")}else{i.classList.add("desktop-hide");i.classList.remove("desktop-visible")}};this.handleClickSignedIn=e=>{e.stopPropagation();this.toggleDropdown(false)};this.isSignedIn=false;this.signedInText="replace";this.signInOnly=false}render(){let{isSignedIn:e,signedInText:i,signInOnly:t}=this;return a(r,{key:"568e15aea2703c66cb8b399b7666d7b4fe2a6076"},a("div",{key:"4fef36124e626d2061a4293511e640bebb69b430",class:"header-profile"},e?a("div",null,a("div",{class:"desktop",onMouseEnter:()=>this.toggleDropdown(true),onMouseLeave:()=>this.toggleDropdown(false)},a("button",{onClick:this.handleClickSignedIn},a("span",null,i)),!t?a("div",{class:"sub-menu desktop-hide"},a("button",{class:"sub-menu-item",onClick:this.handleYourAccount},a("div",null,"Your Account")),a("button",{class:"sub-menu-item",onClick:this.handleSignOut},a("div",null,"Sign Out"))):null),!t?a("div",{class:"not-desktop"},a("button",{class:"sub-menu-item",onClick:this.handleYourAccount,tabindex:"0"},a("span",null,"Your Account")),a("button",{class:"sub-menu-item",onClick:this.handleSignOut,tabindex:"0"},a("span",null,"Sign Out"))):null):a("button",{class:"sub-menu-item",onClick:this.handleSignIn},a("span",null,"Sign In"))))}get el(){return t(this)}};l.style=o;export{l as admiralty_header_profile};
2	+ //# sourceMappingURL=p-4bad0fd1.entry.js.map

package/dist/admiralty/p-4bad0fd1.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["headerProfileCss","AdmiraltyHeaderProfileStyle0","HeaderProfileComponent","this","handleSignIn","signInClicked","emit","handleSignOut","signOutClicked","handleYourAccount","yourAccountClicked","closeDropdown","subMenu","el","querySelector","classList","add","toggleDropdown","showMenu","remove","handleClickSignedIn","ev","stopPropagation","render","isSignedIn","signedInText","signInOnly","h","Host","key","class","onMouseEnter","onMouseLeave","onClick","tabindex"],"sources":["src/components/header-profile/header-profile.scss?tag=admiralty-header-profile&encapsulation=scoped","src/components/header-profile/header-profile.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n@use '../../scss/base/a11y';\n\n@mixin active {\n box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\n}\n\n.header-profile {\n color: colours.$colour-admiralty-blue;\n cursor: pointer;\n\n @include responsive.desktop-only {\n .not-desktop {\n display: none;\n }\n\n display: flex;\n flex: 0;\n flex-direction: column;\n font-size: typography.$font-size-normal !important;\n height: 100%;\n justify-content: center;\n line-height: 1.33em;\n margin-bottom: 0;\n min-width: 4em;\n max-width: 11.1em;\n padding: 0 1.65em;\n position: relative;\n text-align: center;\n\n button {\n all: unset;\n height: 100%;\n width: 100%;\n span {\n color: colours.$colour-admiralty-blue;\n font-weight: typography.$font-weight-medium;\n padding: 4px 0;\n }\n\n &:focus span,\n &:focus div {\n @include a11y.focus-highlight;\n }\n }\n\n &:hover {\n @include active;\n background-color: colours.$colour-nav-bg-hover;\n\n .desktop .sub-menu {\n display: flex;\n }\n }\n\n &.active {\n @include active;\n\n .sub-menu {\n display: flex;\n }\n }\n\n .sub-menu {\n display: none;\n flex-direction: column;\n font-size: typography.$font-size-normal;\n position: absolute;\n top: 100%;\n right: 0;\n border: 1px solid colours.$colour-divider;\n width: 300px;\n\n &.desktop-visible {\n display: flex;\n }\n\n &.desktop-hide {\n display: none;\n }\n\n .sub-menu-item {\n box-sizing: content-box;\n margin: 0;\n width: 100%;\n\n all: unset;\n box-sizing: border-box;\n display: block;\n font-weight: typography.$font-weight-light;\n height: 100%;\n padding: 10px;\n text-align: left;\n width: 100%;\n\n &:hover {\n background-color: colours.$colour-nav-bg-hover;\n }\n }\n }\n }\n\n @include responsive.not-desktop {\n .desktop {\n display: none;\n }\n\n border-top: 1px solid colours.$colour-bg-header;\n\n .sub-menu-item {\n display: block;\n box-sizing: border-box;\n background-color: unset;\n text-align: unset;\n text-decoration: unset;\n width: 100%;\n padding: 12px;\n\n span {\n padding: 4px 0;\n color: colours.$colour-admiralty-blue;\n font-size: typography.$font-size-normal;\n font-weight: typography.$font-weight-medium;\n }\n\n &:hover {\n background-color: colours.$colour-nav-bg-hover;\n }\n\n &:focus {\n outline: none;\n span {\n @include a11y.focus-highlight;\n }\n }\n }\n }\n}\n","import { Component, Event, Host, h, Prop, EventEmitter, Element } from '@stencil/core';\n\n@Component({\n tag: 'admiralty-header-profile',\n styleUrl: 'header-profile.scss',\n scoped: true,\n})\nexport class HeaderProfileComponent {\n @Element() el: HTMLElement;\n\n /**\n * A boolean to indicate if the user is signed in or not\n */\n @Prop() isSignedIn: boolean = false;\n\n /**\n * The text that is displayed after the user signs in\n */\n @Prop() signedInText: string = 'replace';\n\n /**\n * A boolean to indicate if the component should hide\n * the sign-out and account buttons, useful for internal\n * sites where the user must be always signed in.\n */\n @Prop() signInOnly: boolean = false;\n\n /**\n * The event that is fired when the user clicks on\n * the sign in button\n */\n @Event() signInClicked: EventEmitter<void>;\n\n /**\n * The event that is fired when the user clicks on the\n * 'Your account' button\n */\n @Event() yourAccountClicked: EventEmitter<void>;\n\n /**\n * The event that is fired when the user clicks on the\n * 'sign out' button\n */\n @Event() signOutClicked: EventEmitter<void>;\n\n handleSignIn = () => {\n this.signInClicked.emit();\n };\n\n handleSignOut = () => {\n this.signOutClicked.emit();\n };\n\n handleYourAccount = () => {\n this.yourAccountClicked.emit();\n };\n\n closeDropdown = () => {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n subMenu.classList.add('desktop-hide');\n };\n\n toggleDropdown = (showMenu: boolean) => {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n\n if (showMenu) {\n subMenu.classList.add('desktop-visible');\n subMenu.classList.remove('desktop-hide');\n } else {\n subMenu.classList.add('desktop-hide');\n subMenu.classList.remove('desktop-visible');\n }\n };\n\n handleClickSignedIn = (ev: MouseEvent) => {\n ev.stopPropagation();\n this.toggleDropdown(false);\n };\n\n render() {\n let { isSignedIn, signedInText, signInOnly } = this;\n return (\n <Host>\n <div class=\"header-profile\">\n {isSignedIn ? (\n <div>\n <div class=\"desktop\" onMouseEnter={() => this.toggleDropdown(true)} onMouseLeave={() => this.toggleDropdown(false)}>\n <button onClick={this.handleClickSignedIn}>\n <span>{signedInText}</span>\n\n </button>\n {!signInOnly ? (\n <div class=\"sub-menu desktop-hide\">\n <button class=\"sub-menu-item\" onClick={this.handleYourAccount}>\n <div>Your Account</div>\n </button>\n <button class=\"sub-menu-item\" onClick={this.handleSignOut}>\n <div>Sign Out</div>\n </button>\n </div>\n ) : null}\n </div>\n {!signInOnly ? (\n <div class=\"not-desktop\">\n <button class=\"sub-menu-item\" onClick={this.handleYourAccount} tabindex=\"0\">\n <span>Your Account</span>\n </button>\n <button class=\"sub-menu-item\" onClick={this.handleSignOut} tabindex=\"0\">\n <span>Sign Out</span>\n </button>\n </div>\n ) : null}\n </div>\n ) : (\n <button class=\"sub-menu-item\" onClick={this.handleSignIn}>\n <span>Sign In</span>\n </button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAmB,y8IACzB,MAAAC,EAAeD,E,MCMFE,EAAsB,M,4KAsCjCC,KAAAC,aAAe,KACbD,KAAKE,cAAcC,MAAM,EAG3BH,KAAAI,cAAgB,KACdJ,KAAKK,eAAeF,MAAM,EAG5BH,KAAAM,kBAAoB,KAClBN,KAAKO,mBAAmBJ,MAAM,EAGhCH,KAAAQ,cAAgB,KACd,MAAMC,EAA0BT,KAAKU,GAAGC,cAAc,gBACtDF,EAAQG,UAAUC,IAAI,eAAe,EAGvCb,KAAAc,eAAkBC,IAChB,MAAMN,EAA0BT,KAAKU,GAAGC,cAAc,gBAEtD,GAAII,EAAU,CACZN,EAAQG,UAAUC,IAAI,mBACtBJ,EAAQG,UAAUI,OAAO,e,KACpB,CACLP,EAAQG,UAAUC,IAAI,gBACtBJ,EAAQG,UAAUI,OAAO,kB,GAI7BhB,KAAAiB,oBAAuBC,IACrBA,EAAGC,kBACHnB,KAAKc,eAAe,MAAM,E,gBA/DE,M,kBAKC,U,gBAOD,K,CAsD9B,MAAAM,GACE,IAAIC,WAAEA,EAAUC,aAAEA,EAAYC,WAAEA,GAAevB,KAC/C,OACEwB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACRN,EACCG,EAAA,WACEA,EAAA,OAAKG,MAAM,UAAUC,aAAc,IAAM5B,KAAKc,eAAe,MAAOe,aAAc,IAAM7B,KAAKc,eAAe,QAC1GU,EAAA,UAAQM,QAAS9B,KAAKiB,qBACpBO,EAAA,YAAOF,KAGPC,EACAC,EAAA,OAAKG,MAAM,yBACTH,EAAA,UAAQG,MAAM,gBAAgBG,QAAS9B,KAAKM,mBAC1CkB,EAAA,4BAEFA,EAAA,UAAQG,MAAM,gBAAgBG,QAAS9B,KAAKI,eAC1CoB,EAAA,yBAGF,OAEJD,EACAC,EAAA,OAAKG,MAAM,eACTH,EAAA,UAAQG,MAAM,gBAAgBG,QAAS9B,KAAKM,kBAAmByB,SAAS,KACtEP,EAAA,6BAEFA,EAAA,UAAQG,MAAM,gBAAgBG,QAAS9B,KAAKI,cAAe2B,SAAS,KAClEP,EAAA,0BAGF,MAGNA,EAAA,UAAQG,MAAM,gBAAgBG,QAAS9B,KAAKC,cAC1CuB,EAAA,yB"}

package/dist/admiralty/p-73d4c637.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as t,h as i,H as a}from"./p-ac0ad15a.js";import{K as d}from"./p-a4bd6904.js";const n="@media (max-width: 1023px){.desktop-only.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-sub-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-sub-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-sub-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-sub-menu-item{display:none}}.visually-hidden.sc-admiralty-header-sub-menu-item:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}.header-sub-menu-item.sc-admiralty-header-sub-menu-item .title.sc-admiralty-header-sub-menu-item{font-size:18px;font-weight:300}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:focus{outline:none}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:focus span.sc-admiralty-header-sub-menu-item{outline:3px solid transparent;color:#000000;background-color:#ffdd00;box-shadow:0 -2px #ffdd00, 0 4px #333333;text-decoration:none}@media (min-width: 1024px){.header-sub-menu-item.sc-admiralty-header-sub-menu-item{box-sizing:border-box;color:#09315b;display:block;margin-bottom:0;padding:10px;text-align:center;width:300px}.header-sub-menu-item.sc-admiralty-header-sub-menu-item .title.sc-admiralty-header-sub-menu-item{display:block;text-align:center}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:hover{background-color:#f0f0f0}}@media (max-width: 1023px){.header-sub-menu-item.sc-admiralty-header-sub-menu-item{display:block;box-sizing:border-box;padding:12px 24px;cursor:pointer;color:#09315b;font-weight:500;background-color:unset;text-align:unset;text-decoration:unset}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:hover{background-color:#f0f0f0}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:focus .title.sc-admiralty-header-sub-menu-item{box-shadow:0 -4px #ffdd00, 0 4px #333333}}";const m=n;const s=class{constructor(i){e(this,i);this.subMenuItemClick=t(this,"subMenuItemClick",7);this.menuTitle=undefined}handleClick(e){e.stopPropagation();return this.subMenuItemClick.emit(this.menuTitle)}onKeyDown(e){if(e.key===d.ENTER\|\|e.key===d.SPACE){this.subMenuItemClick.emit(this.menuTitle)}}render(){return i(a,{key:"1126a9867121981238c431d01f34349c0fad067f"},i("div",{key:"be63ce05df1f8777d36fe9dd42ddc92023e79729",class:"header-sub-menu-item",onClick:e=>this.handleClick(e),onKeyDown:e=>this.onKeyDown(e),tabindex:"0"},i("span",{key:"94e0dcf5cdf289ebfe99f760ca10545b689885e3",class:"title"},this.menuTitle)))}};s.style=m;export{s as admiralty_header_sub_menu_item};
2	+ //# sourceMappingURL=p-73d4c637.entry.js.map

package/dist/admiralty/p-73d4c637.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["headerSubMenuItemCss","AdmiraltyHeaderSubMenuItemStyle0","HeaderSubMenuItemComponent","handleClick","ev","stopPropagation","this","subMenuItemClick","emit","menuTitle","onKeyDown","key","Keys","ENTER","SPACE","render","h","Host","class","onClick","tabindex"],"sources":["src/components/header-sub-menu-item/header-sub-menu-item.scss?tag=admiralty-header-sub-menu-item&encapsulation=scoped","src/components/header-sub-menu-item/header-sub-menu-item.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n@use '../../scss/base/a11y';\n\n@mixin active {\n background-color: colours.$colour-nav-bg-hover;\n}\n\n.header-sub-menu-item {\n .title {\n font-size: typography.$font-size-normal;\n font-weight: typography.$font-weight-light;\n }\n\n &:focus {\n outline: none;\n\n span {\n @include a11y.focus-highlight;\n }\n }\n\n @include responsive.desktop-only {\n box-sizing: border-box;\n color: colours.$colour-admiralty-blue;\n display: block;\n margin-bottom: 0;\n padding: 10px;\n text-align: center;\n width: 300px;\n\n .title {\n display: block;\n text-align: center;\n }\n\n &:hover {\n @include active;\n }\n }\n\n @include responsive.not-desktop {\n display: block;\n box-sizing: border-box;\n padding: 12px 24px;\n cursor: pointer;\n color: colours.$colour-admiralty-blue;\n font-weight: 500;\n background-color: unset;\n text-align: unset;\n text-decoration: unset;\n\n &:hover {\n @include active;\n }\n\n &:focus {\n .title {\n box-shadow:\n 0 -4px colours.$colour-utility-focus,\n 0 4px colours.$colour-text;\n }\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { Keys } from '../Keys';\n\n@Component({\n tag: 'admiralty-header-sub-menu-item',\n styleUrl: 'header-sub-menu-item.scss',\n scoped: true,\n})\nexport class HeaderSubMenuItemComponent {\n /**\n * The text that will be displayed in the menu\n */\n @Prop() menuTitle: string;\n\n /**\n * The event that is fired when a user clicks on the menu.\n * Event contains the menu item text.\n */\n @Event() subMenuItemClick: EventEmitter<string>;\n\n handleClick(ev: MouseEvent): CustomEvent<string> {\n ev.stopPropagation();\n return this.subMenuItemClick.emit(this.menuTitle);\n };\n\n onKeyDown(ev: KeyboardEvent): void {\n if (ev.key === Keys.ENTER || ev.key === Keys.SPACE) {\n this.subMenuItemClick.emit(this.menuTitle);\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"header-sub-menu-item\" onClick={ev=>this.handleClick(ev)} onKeyDown={ev=>this.onKeyDown(ev)} tabindex=\"0\">\n <span class=\"title\">{this.menuTitle}</span>\n </div>\n </Host>\n );\n }\n\n}\n"],"mappings":"6FAAA,MAAMA,EAAuB,m6EAC7B,MAAAC,EAAeD,E,MCOFE,EAA0B,M,qGAYrC,WAAAC,CAAYC,GACVA,EAAGC,kBACH,OAAOC,KAAKC,iBAAiBC,KAAKF,KAAKG,U,CAGzC,SAAAC,CAAUN,GACR,GAAIA,EAAGO,MAAQC,EAAKC,OAAST,EAAGO,MAAQC,EAAKE,MAAO,CAClDR,KAAKC,iBAAiBC,KAAKF,KAAKG,U,EAIpC,MAAAM,GACE,OACEC,EAACC,EAAI,CAAAN,IAAA,4CACHK,EAAA,OAAAL,IAAA,2CAAKO,MAAM,uBAAuBC,QAASf,GAAIE,KAAKH,YAAYC,GAAKM,UAAWN,GAAIE,KAAKI,UAAUN,GAAKgB,SAAS,KAC/GJ,EAAA,QAAAL,IAAA,2CAAMO,MAAM,SAASZ,KAAKG,Y"}

package/dist/cjs/admiralty-header-menu-item.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ae771770.js');
-const headerMenuItemCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-menu-item{display:none}}.visually-hidden.sc-admiralty-header-menu-item:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}.menu-item.sc-admiralty-header-menu-item{color:#09315b;cursor:pointer}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{font-size:18px}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:focus div.sc-admiralty-header-menu-item{outline:3px solid transparent;color:#000000;background-color:#ffdd00;box-shadow:0 -2px #ffdd00, 0 4px #333333;text-decoration:none}button.sc-admiralty-header-menu-item{all:unset;height:100%;width:100%}@media (min-width: 1024px){.menu-item.sc-admiralty-header-menu-item{display:flex;flex:0;flex-direction:column;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.menu-item.sc-admiralty-header-menu-item:hover{box-shadow:inset 0 -5px #09315b;background-color:#f0f0f0}.menu-item.sc-admiralty-header-menu-item:hover .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.active.sc-admiralty-header-menu-item{box-shadow:inset 0 -5px #09315b}.menu-item.active.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item div.sc-admiralty-header-menu-item{font-weight:normal}.menu-item.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:none;flex-direction:column;position:absolute;border:1px solid #d8d8d8;right:0;top:100%}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-visible.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-hide.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px){.menu-item.sc-admiralty-header-menu-item{display:block;box-sizing:border-box;background-color:unset;text-align:unset;text-decoration:unset}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{padding:12px;font-weight:500}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:hover{background-color:#f0f0f0}}";
+const headerMenuItemCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-menu-item{display:none}}.visually-hidden.sc-admiralty-header-menu-item:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}.menu-item.sc-admiralty-header-menu-item{cursor:pointer}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item div.sc-admiralty-header-menu-item{font-size:18px;color:#09315b}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:focus div.sc-admiralty-header-menu-item{outline:3px solid transparent;color:#000000;background-color:#ffdd00;box-shadow:0 -2px #ffdd00, 0 4px #333333;text-decoration:none}button.sc-admiralty-header-menu-item{all:unset;height:100%;width:100%}@media (min-width: 1024px){.menu-item.sc-admiralty-header-menu-item{display:flex;flex:0;flex-direction:column;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.menu-item.sc-admiralty-header-menu-item:hover{box-shadow:inset 0 -5px #09315b;background-color:#f0f0f0}.menu-item.sc-admiralty-header-menu-item:hover .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.active.sc-admiralty-header-menu-item{box-shadow:inset 0 -5px #09315b}.menu-item.active.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item div.sc-admiralty-header-menu-item{font-weight:normal}.menu-item.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:none;flex-direction:column;position:absolute;border:1px solid #d8d8d8;right:0;top:100%}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-visible.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-hide.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px){.menu-item.sc-admiralty-header-menu-item{display:block;box-sizing:border-box;background-color:unset;text-align:unset;text-decoration:unset}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item div.sc-admiralty-header-menu-item{display:inline-block;margin:12px;font-weight:normal}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:hover{background-color:#f0f0f0}}";
 const AdmiraltyHeaderMenuItemStyle0 = headerMenuItemCss;
 const HeaderMenuItemComponent = class {

package/dist/cjs/admiralty-header-menu-item.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-header-menu-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,~~smGAAsmG~~,CAAC;~~AACjoG~~,sCAAe,iBAAiB;;MCSnB,uBAAuB;;;;;sBAWP,KAAK;;IAUhC,iBAAiB;;QAEf,IAAI;YACF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gCAAgC,CAAC,CAAC;YAC/E,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAE1B,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;aAC1D;SACF;QAAC,OAAO,CAAC,EAAE;YACV,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;KACF;IAEO,aAAa;QACnB,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAEtE,IAAI,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;YAC9C,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;YACzC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;SAC1C;aAAM;YACL,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;YACtC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;SAC7C;KACF;IAEO,YAAY;QAClB,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QACtE,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;KACvC;IAED,WAAW,CAAC,EAAc;QACxB,EAAE,CAAC,eAAe,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YAE1D,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;QACD,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAClC;;;;;IAMD,eAAe;QACb,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YAE1D,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;KACF;;;;;IAMD,cAAc,CAAC,GAAU;QACvB,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;YACzD,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;IAED,cAAc,CAAC,EAAc;;QAC3B,MAAM,aAAa,GAAQ,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,aAAa,CAAC;QAE7C,IAAI,CAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,0CAAE,OAAO,CAAC,QAAQ,CAAC,MAAK,CAAC,CAAC,EAAE;YACtD,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;IAED,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACnC,IAAI,SAAS,GAAG,YAAY,CAAC;QAC7B,SAAS,IAAI,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC;QAEpC,QACEA,QAACC,UAAI,qDAAC,WAAW,EAAE,CAAC,IAAI,IAAI,CAAC,eAAe,EAAE,EAAE,UAAU,EAAE,CAAC,EAAS,KAAK,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,IAChGD,kEAAK,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACxDA,qEAAQ,KAAK,EAAC,YAAY,EAAC,QAAQ,EAAC,GAAG,IACrCA,oEAAM,SAAS,CAAO,CACf,EACTA,kEAAK,KAAK,EAAC,uBAAuB,EAAC,UAAU,EAAE,EAAE,IAAI,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,IAC1EA,oEAAQ,CACJ,CACF,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/header-menu-item/header-menu-item.scss?tag=admiralty-header-menu-item&encapsulation=scoped","src/components/header-menu-item/header-menu-item.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n@use '../../scss/base/a11y';\n\n@mixin active {\n box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\n}\n\n.menu-item {\n ~~color: colours.$colour-admiralty-blue;\n~~ cursor: pointer;\n\n .menu-title {\n font-size: typography.$font-size-normal;\n\n &:focus div {\n @include a11y.focus-highlight;\n }\n }\n}\n\nbutton {\n all: unset;\n height: 100%;\n width: 100%;\n}\n\n@include responsive.desktop-only {\n .menu-item {\n display: flex;\n flex: 0;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n line-height: 1.33em;\n margin-bottom: 0;\n min-width: 4em;\n max-width: 11.1em;\n padding: 0 1.65em;\n position: relative;\n text-align: center;\n\n &:hover {\n @include active;\n background-color: colours.$colour-nav-bg-hover;\n\n .sub-menu {\n display: flex;\n }\n }\n\n &.active {\n @include active;\n\n .sub-menu {\n display: flex;\n }\n }\n\n .menu-title div {\n font-weight: typography.$font-weight-medium;\n }\n\n .sub-menu {\n display: none;\n flex-direction: column;\n position: absolute;\n border: 1px solid colours.$colour-divider;\n right: 0;\n top: 100%;\n\n &.desktop-visible {\n display: flex;\n }\n\n &.desktop-hide {\n display: none;\n }\n }\n }\n}\n\n@include responsive.not-desktop {\n .menu-item {\n display: block;\n box-sizing: border-box;\n background-color: unset;\n text-align: unset;\n text-decoration: unset;\n\n .menu-title {\n ~~padding~~: 12px;\n font-weight: ~~500~~;\n\n &:hover {\n background-color: colours.$colour-nav-bg-hover;\n }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/*\n @slot - 'admiralty-sub-header-menu-item' a number of components can be placed here to add sub items\n /\n@Component({\n tag: 'admiralty-header-menu-item',\n styleUrl: 'header-menu-item.scss',\n scoped: true,\n})\nexport class HeaderMenuItemComponent {\n @Element() el: HTMLElement;\n\n /\n The text that will be displayed in the menu\n /\n @Prop() menuTitle: string;\n\n /\n Whether the item is active\n /\n @Prop() active?: boolean = false;\n\n /\n The event that is fired when a user clicks on the menu\n /\n @Event() menuItemClick: EventEmitter<void>;\n\n subMenuExists: boolean;\n subMenuSelector: HTMLElement;\n\n connectedCallback() {\n // check if submenu exists on this menu item\n try {\n this.subMenuSelector = this.el.querySelector('admiralty-header-sub-menu-item');\n this.subMenuExists = true;\n\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'true');\n }\n } catch (e) {\n this.subMenuExists = false;\n }\n }\n\n private toggleSubMenu() {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n\n if (subMenu.classList.contains('desktop-hide')) {\n subMenu.classList.add('desktop-visible');\n subMenu.classList.remove('desktop-hide');\n } else {\n subMenu.classList.add('desktop-hide');\n subMenu.classList.remove('desktop-visible');\n }\n }\n\n private closeSubMenu() {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n subMenu.classList.add('desktop-hide');\n }\n\n handleClick(ev: MouseEvent): CustomEvent<void> {\n ev.stopPropagation();\n\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n this.toggleSubMenu();\n }\n return this.menuItemClick.emit();\n }\n\n /\n Handles mouseover events, used to set the aria hidden attribute when submenu\n * is visible\n /\n handleMouseOver(): void {\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n this.toggleSubMenu();\n }\n }\n\n /\n Handles mouseout events, used to set the aria hidden attribute when submenu\n * is no longer visible\n */\n handleMouseOut(_ev: Event): void {\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'true');\n this.closeSubMenu();\n }\n }\n\n handleFocusOut(ev: FocusEvent) {\n const relatedTarget: any = ev?.relatedTarget;\n\n if (relatedTarget?.outerHTML?.indexOf('button') !== -1) {\n this.closeSubMenu();\n }\n }\n\n render() {\n const { active, menuTitle } = this;\n let menuClass = 'menu-item ';\n menuClass += active ? 'active' : '';\n\n return (\n <Host onMouseOver={_ => this.handleMouseOver()} onMouseOut={(ev: Event) => this.handleMouseOut(ev)}>\n <div class={menuClass} onClick={ev => this.handleClick(ev)}>\n <button class=\"menu-title\" tabindex=\"0\">\n <div>{menuTitle}</div>\n </button>\n <div class=\"sub-menu desktop-hide\" onFocusout={ev => this.handleFocusOut(ev)}>\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"admiralty-header-menu-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,isGAAisG,CAAC;AAC5tG,sCAAe,iBAAiB;;MCSnB,uBAAuB;;;;;sBAWP,KAAK;;IAUhC,iBAAiB;;QAEf,IAAI;YACF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gCAAgC,CAAC,CAAC;YAC/E,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAE1B,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;aAC1D;SACF;QAAC,OAAO,CAAC,EAAE;YACV,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;KACF;IAEO,aAAa;QACnB,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAEtE,IAAI,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;YAC9C,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;YACzC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;SAC1C;aAAM;YACL,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;YACtC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;SAC7C;KACF;IAEO,YAAY;QAClB,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QACtE,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;KACvC;IAED,WAAW,CAAC,EAAc;QACxB,EAAE,CAAC,eAAe,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YAE1D,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;QACD,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAClC;;;;;IAMD,eAAe;QACb,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YAE1D,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;KACF;;;;;IAMD,cAAc,CAAC,GAAU;QACvB,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;YACzD,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;IAED,cAAc,CAAC,EAAc;;QAC3B,MAAM,aAAa,GAAQ,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,aAAa,CAAC;QAE7C,IAAI,CAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,0CAAE,OAAO,CAAC,QAAQ,CAAC,MAAK,CAAC,CAAC,EAAE;YACtD,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;IAED,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACnC,IAAI,SAAS,GAAG,YAAY,CAAC;QAC7B,SAAS,IAAI,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC;QAEpC,QACEA,QAACC,UAAI,qDAAC,WAAW,EAAE,CAAC,IAAI,IAAI,CAAC,eAAe,EAAE,EAAE,UAAU,EAAE,CAAC,EAAS,KAAK,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,IAChGD,kEAAK,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACxDA,qEAAQ,KAAK,EAAC,YAAY,EAAC,QAAQ,EAAC,GAAG,IACrCA,oEAAM,SAAS,CAAO,CACf,EACTA,kEAAK,KAAK,EAAC,uBAAuB,EAAC,UAAU,EAAE,EAAE,IAAI,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,IAC1EA,oEAAQ,CACJ,CACF,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/header-menu-item/header-menu-item.scss?tag=admiralty-header-menu-item&encapsulation=scoped","src/components/header-menu-item/header-menu-item.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n@use '../../scss/base/a11y';\n\n@mixin active {\n box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\n}\n\n.menu-item {\n cursor: pointer;\n\n .menu-title {\n div {\n font-size: typography.$font-size-normal;\n color: colours.$colour-admiralty-blue;\n }\n\n &:focus div {\n @include a11y.focus-highlight;\n }\n }\n}\n\nbutton {\n all: unset;\n height: 100%;\n width: 100%;\n}\n\n@include responsive.desktop-only {\n .menu-item {\n display: flex;\n flex: 0;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n line-height: 1.33em;\n margin-bottom: 0;\n min-width: 4em;\n max-width: 11.1em;\n padding: 0 1.65em;\n position: relative;\n text-align: center;\n\n &:hover {\n @include active;\n background-color: colours.$colour-nav-bg-hover;\n\n .sub-menu {\n display: flex;\n }\n }\n\n &.active {\n @include active;\n\n .sub-menu {\n display: flex;\n }\n }\n\n .menu-title div {\n font-weight: typography.$font-weight-medium;\n }\n\n .sub-menu {\n display: none;\n flex-direction: column;\n position: absolute;\n border: 1px solid colours.$colour-divider;\n right: 0;\n top: 100%;\n\n &.desktop-visible {\n display: flex;\n }\n\n &.desktop-hide {\n display: none;\n }\n }\n }\n}\n\n@include responsive.not-desktop {\n .menu-item {\n display: block;\n box-sizing: border-box;\n background-color: unset;\n text-align: unset;\n text-decoration: unset;\n\n .menu-title {\n div {\n display: inline-block;\n margin: 12px;\n font-weight: typography.$font-weight-medium;\n }\n\n &:hover {\n background-color: colours.$colour-nav-bg-hover;\n }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/*\n @slot - 'admiralty-sub-header-menu-item' a number of components can be placed here to add sub items\n /\n@Component({\n tag: 'admiralty-header-menu-item',\n styleUrl: 'header-menu-item.scss',\n scoped: true,\n})\nexport class HeaderMenuItemComponent {\n @Element() el: HTMLElement;\n\n /\n The text that will be displayed in the menu\n /\n @Prop() menuTitle: string;\n\n /\n Whether the item is active\n /\n @Prop() active?: boolean = false;\n\n /\n The event that is fired when a user clicks on the menu\n /\n @Event() menuItemClick: EventEmitter<void>;\n\n subMenuExists: boolean;\n subMenuSelector: HTMLElement;\n\n connectedCallback() {\n // check if submenu exists on this menu item\n try {\n this.subMenuSelector = this.el.querySelector('admiralty-header-sub-menu-item');\n this.subMenuExists = true;\n\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'true');\n }\n } catch (e) {\n this.subMenuExists = false;\n }\n }\n\n private toggleSubMenu() {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n\n if (subMenu.classList.contains('desktop-hide')) {\n subMenu.classList.add('desktop-visible');\n subMenu.classList.remove('desktop-hide');\n } else {\n subMenu.classList.add('desktop-hide');\n subMenu.classList.remove('desktop-visible');\n }\n }\n\n private closeSubMenu() {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n subMenu.classList.add('desktop-hide');\n }\n\n handleClick(ev: MouseEvent): CustomEvent<void> {\n ev.stopPropagation();\n\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n this.toggleSubMenu();\n }\n return this.menuItemClick.emit();\n }\n\n /\n Handles mouseover events, used to set the aria hidden attribute when submenu\n * is visible\n /\n handleMouseOver(): void {\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n this.toggleSubMenu();\n }\n }\n\n /\n Handles mouseout events, used to set the aria hidden attribute when submenu\n * is no longer visible\n */\n handleMouseOut(_ev: Event): void {\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'true');\n this.closeSubMenu();\n }\n }\n\n handleFocusOut(ev: FocusEvent) {\n const relatedTarget: any = ev?.relatedTarget;\n\n if (relatedTarget?.outerHTML?.indexOf('button') !== -1) {\n this.closeSubMenu();\n }\n }\n\n render() {\n const { active, menuTitle } = this;\n let menuClass = 'menu-item ';\n menuClass += active ? 'active' : '';\n\n return (\n <Host onMouseOver={_ => this.handleMouseOver()} onMouseOut={(ev: Event) => this.handleMouseOut(ev)}>\n <div class={menuClass} onClick={ev => this.handleClick(ev)}>\n <button class=\"menu-title\" tabindex=\"0\">\n <div>{menuTitle}</div>\n </button>\n <div class=\"sub-menu desktop-hide\" onFocusout={ev => this.handleFocusOut(ev)}>\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/admiralty-header-menu-link.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ae771770.js');
-const headerMenuLinkCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-header-menu-link{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-menu-link{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-menu-link{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-menu-link{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-menu-link{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-menu-link{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-menu-link{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-menu-link{display:none}}.menu-item.sc-admiralty-header-menu-link{cursor:pointer}.menu-item.sc-admiralty-header-menu-link a.sc-admiralty-header-menu-link{font-size:18px;font-weight:normal;text-decoration:none;outline-offset:3px}@media (min-width: 1024px){.menu-item.sc-admiralty-header-menu-link{display:flex;flex:0;flex-direction:column;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.menu-item.sc-admiralty-header-menu-link:hover{box-shadow:inset 0 -5px #09315b;background-color:#f0f0f0}.menu-item.active.sc-admiralty-header-menu-link{box-shadow:inset 0 -5px #09315b}}@media (max-width: 1023px){.menu-item.sc-admiralty-header-menu-link{display:block;box-sizing:border-box;color:#09315b;background-color:unset;text-align:unset;text-decoration:unset}}";
+const headerMenuLinkCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-header-menu-link{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-menu-link{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-menu-link{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-menu-link{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-menu-link{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-menu-link{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-menu-link{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-menu-link{display:none}}.menu-item.sc-admiralty-header-menu-link{cursor:pointer}.menu-item.sc-admiralty-header-menu-link a.sc-admiralty-header-menu-link{font-size:18px;font-weight:normal;text-decoration:none;outline-offset:3px;color:#09315b}@media (min-width: 1024px){.menu-item.sc-admiralty-header-menu-link{display:flex;flex:0;flex-direction:column;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.menu-item.sc-admiralty-header-menu-link:hover{box-shadow:inset 0 -5px #09315b;background-color:#f0f0f0}.menu-item.active.sc-admiralty-header-menu-link{box-shadow:inset 0 -5px #09315b}}@media (max-width: 1023px){.menu-item.sc-admiralty-header-menu-link{display:block;box-sizing:border-box;background-color:unset;text-align:unset;text-decoration:unset;padding:12px}.menu-item.sc-admiralty-header-menu-link a.sc-admiralty-header-menu-link{font-weight:normal}.menu-item.sc-admiralty-header-menu-link a.sc-admiralty-header-menu-link:focus{box-shadow:0 -4px #ffdd00, 0 4px #333333}.menu-item.sc-admiralty-header-menu-link:hover{background-color:#f0f0f0}}";
 const AdmiraltyHeaderMenuLinkStyle0 = headerMenuLinkCss;
 const HeaderMenuLinkComponent = class {

package/dist/cjs/admiralty-header-menu-link.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-header-menu-link.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,~~2iDAA2iD~~,CAAC;~~AACtkD~~,sCAAe,iBAAiB;;MCMnB,uBAAuB;;;;;sBAWP,KAAK;;gCAWK,KAAK;;IAO1C,WAAW,CAAC,EAAc;QACxB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,EAAE,CAAC,cAAc,EAAE,CAAC;SACrB;QACD,EAAE,CAAC,eAAe,EAAE,CAAC;QAErB,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAClC;IAED,MAAM;QACJ,IAAI,SAAS,GAAG,YAAY,CAAC;QAC7B,SAAS,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC;QAEzC,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACxDA,gEAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACpD,IAAI,CAAC,SAAS,EACfA,oEAAa,CACX,CACA,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/header-menu-link/header-menu-link.scss?tag=admiralty-header-menu-link&encapsulation=scoped","src/components/header-menu-link/header-menu-link.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n\n@mixin active {\n box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\n}\n\n.menu-item {\n cursor: pointer;\n\n a {\n font-size: typography.$font-size-normal;\n font-weight: typography.$font-weight-medium;\n text-decoration: none;\n outline-offset: 3px;\n }\n}\n\n@include responsive.desktop-only {\n .menu-item {\n display: flex;\n flex: 0;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n line-height: 1.33em;\n margin-bottom: 0;\n min-width: 4em;\n max-width: 11.1em;\n padding: 0 1.65em;\n position: relative;\n text-align: center;\n\n &:hover {\n @include active;\n background-color: colours.$colour-nav-bg-hover;\n }\n\n &.active {\n @include active;\n }\n }\n}\n\n@include responsive.not-desktop {\n .menu-item {\n display: block;\n box-sizing: border-box;\n ~~color: colours.$colour-admiralty-blue;\~~n background-color: unset;\n text-align: unset;\n text-decoration: unset;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'admiralty-header-menu-link',\n styleUrl: 'header-menu-link.scss',\n scoped: true,\n})\nexport class HeaderMenuLinkComponent {\n @Element() el: HTMLElement;\n\n /*\n The text that will be displayed in the menu.\n /\n @Prop() menuTitle?: string;\n\n /\n Whether the item is active\n /\n @Prop() active?: boolean = false;\n\n /\n The URL to link to.\n /\n @Prop() href: string;\n\n /\n Causes the default browser redirect to be suppressed. Can be used in conjunction with the\n * `onMenuItemClick` event to use a navigation router and prevent a full page reload when navigating.\n /\n @Prop() suppressRedirect?: boolean = false;\n\n /\n The event that is fired when a user clicks on the menu.\n */\n @Event() menuItemClick: EventEmitter<void>;\n\n handleClick(ev: MouseEvent): CustomEvent<void> {\n if (this.suppressRedirect) {\n ev.preventDefault();\n }\n ev.stopPropagation();\n\n return this.menuItemClick.emit();\n }\n\n render() {\n let menuClass = 'menu-item ';\n menuClass += this.active ? 'active' : '';\n\n return (\n <Host>\n <div class={menuClass} onClick={ev => this.handleClick(ev)}>\n <a href={this.href} onClick={ev => this.handleClick(ev)}>\n {this.menuTitle}\n <slot></slot>\n </a>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"admiralty-header-menu-link.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,o1DAAo1D,CAAC;AAC/2D,sCAAe,iBAAiB;;MCMnB,uBAAuB;;;;;sBAWP,KAAK;;gCAWK,KAAK;;IAO1C,WAAW,CAAC,EAAc;QACxB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,EAAE,CAAC,cAAc,EAAE,CAAC;SACrB;QACD,EAAE,CAAC,eAAe,EAAE,CAAC;QAErB,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAClC;IAED,MAAM;QACJ,IAAI,SAAS,GAAG,YAAY,CAAC;QAC7B,SAAS,IAAI,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC;QAEzC,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACxDA,gEAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACpD,IAAI,CAAC,SAAS,EACfA,oEAAa,CACX,CACA,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/header-menu-link/header-menu-link.scss?tag=admiralty-header-menu-link&encapsulation=scoped","src/components/header-menu-link/header-menu-link.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n\n@mixin active {\n box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\n}\n\n.menu-item {\n cursor: pointer;\n\n a {\n font-size: typography.$font-size-normal;\n font-weight: typography.$font-weight-medium;\n text-decoration: none;\n outline-offset: 3px;\n color: colours.$colour-admiralty-blue;\n }\n}\n\n@include responsive.desktop-only {\n .menu-item {\n display: flex;\n flex: 0;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n line-height: 1.33em;\n margin-bottom: 0;\n min-width: 4em;\n max-width: 11.1em;\n padding: 0 1.65em;\n position: relative;\n text-align: center;\n\n &:hover {\n @include active;\n background-color: colours.$colour-nav-bg-hover;\n }\n\n &.active {\n @include active;\n }\n }\n}\n\n@include responsive.not-desktop {\n .menu-item {\n display: block;\n box-sizing: border-box;\n\n background-color: unset;\n text-align: unset;\n text-decoration: unset;\n padding: 12px;\n\n a {\n font-weight: typography.$font-weight-medium;\n &:focus {\n box-shadow:\n 0 -4px colours.$colour-utility-focus,\n 0 4px colours.$colour-text;\n }\n }\n\n &:hover {\n background-color: colours.$colour-nav-bg-hover;\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'admiralty-header-menu-link',\n styleUrl: 'header-menu-link.scss',\n scoped: true,\n})\nexport class HeaderMenuLinkComponent {\n @Element() el: HTMLElement;\n\n /*\n The text that will be displayed in the menu.\n /\n @Prop() menuTitle?: string;\n\n /\n Whether the item is active\n /\n @Prop() active?: boolean = false;\n\n /\n The URL to link to.\n /\n @Prop() href: string;\n\n /\n Causes the default browser redirect to be suppressed. Can be used in conjunction with the\n * `onMenuItemClick` event to use a navigation router and prevent a full page reload when navigating.\n /\n @Prop() suppressRedirect?: boolean = false;\n\n /\n The event that is fired when a user clicks on the menu.\n */\n @Event() menuItemClick: EventEmitter<void>;\n\n handleClick(ev: MouseEvent): CustomEvent<void> {\n if (this.suppressRedirect) {\n ev.preventDefault();\n }\n ev.stopPropagation();\n\n return this.menuItemClick.emit();\n }\n\n render() {\n let menuClass = 'menu-item ';\n menuClass += this.active ? 'active' : '';\n\n return (\n <Host>\n <div class={menuClass} onClick={ev => this.handleClick(ev)}>\n <a href={this.href} onClick={ev => this.handleClick(ev)}>\n {this.menuTitle}\n <slot></slot>\n </a>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/admiralty-header-profile.cjs.entry.js CHANGED Viewed

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ae771770.js');
-const Keys = require('./Keys-019752ee.js');
-const headerProfileCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-profile{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-profile{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-profile{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-profile{display:none}}.visually-hidden.sc-admiralty-header-profile:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}.header-profile.sc-admiralty-header-profile{color:#09315b;cursor:pointer}@media (min-width: 1024px){.header-profile.sc-admiralty-header-profile{display:flex;flex:0;flex-direction:column;font-size:18px !important;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.header-profile.sc-admiralty-header-profile .not-desktop.sc-admiralty-header-profile{display:none}.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile{all:unset;height:100%;width:100%}.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile div.sc-admiralty-header-profile{font-weight:normal}.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile:focus div.sc-admiralty-header-profile{outline:3px solid transparent;color:#000000;background-color:#ffdd00;box-shadow:0 -2px #ffdd00, 0 4px #333333;text-decoration:none}.header-profile.sc-admiralty-header-profile:hover{box-shadow:inset 0 -5px #09315b;background-color:#f0f0f0}.header-profile.sc-admiralty-header-profile:hover .desktop.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile{display:flex}.header-profile.active.sc-admiralty-header-profile{box-shadow:inset 0 -5px #09315b}.header-profile.active.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile{display:flex}.header-profile.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile{display:none;flex-direction:column;font-size:18px;position:absolute;top:100%;right:0;border:1px solid #d8d8d8;width:300px}.header-profile.sc-admiralty-header-profile .sub-menu.desktop-visible.sc-admiralty-header-profile{display:flex}.header-profile.sc-admiralty-header-profile .sub-menu.desktop-hide.sc-admiralty-header-profile{display:none}.header-profile.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile{box-sizing:content-box;margin:0;width:100%;all:unset;box-sizing:border-box;display:block;font-weight:300;height:100%;padding:10px;text-align:left;width:100%}.header-profile.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:focus{outline:none;box-shadow:#ffdd00 inset 0 0 0 3px}.header-profile.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:hover{background-color:#f0f0f0}}@media (max-width: 1023px){.header-profile.sc-admiralty-header-profile{border-top:1px solid #d8d8d8}.header-profile.sc-admiralty-header-profile .desktop.sc-admiralty-header-profile{display:none}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile{display:block;box-sizing:border-box;font-size:18px;font-weight:500;background-color:unset;text-align:unset;text-decoration:unset;padding:12px}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:hover{background-color:#f0f0f0}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:focus{outline:none;box-shadow:#ffdd00 inset 0 0 0 3px}}";
+const headerProfileCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-profile{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-profile{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-profile{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-profile{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-profile{display:none}}.visually-hidden.sc-admiralty-header-profile:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}.header-profile.sc-admiralty-header-profile{color:#09315b;cursor:pointer}@media (min-width: 1024px){.header-profile.sc-admiralty-header-profile{display:flex;flex:0;flex-direction:column;font-size:18px !important;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.header-profile.sc-admiralty-header-profile .not-desktop.sc-admiralty-header-profile{display:none}.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile{all:unset;height:100%;width:100%}.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile span.sc-admiralty-header-profile{color:#09315b;font-weight:normal;padding:4px 0}.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile:focus span.sc-admiralty-header-profile,.header-profile.sc-admiralty-header-profile button.sc-admiralty-header-profile:focus div.sc-admiralty-header-profile{outline:3px solid transparent;color:#000000;background-color:#ffdd00;box-shadow:0 -2px #ffdd00, 0 4px #333333;text-decoration:none}.header-profile.sc-admiralty-header-profile:hover{box-shadow:inset 0 -5px #09315b;background-color:#f0f0f0}.header-profile.sc-admiralty-header-profile:hover .desktop.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile{display:flex}.header-profile.active.sc-admiralty-header-profile{box-shadow:inset 0 -5px #09315b}.header-profile.active.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile{display:flex}.header-profile.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile{display:none;flex-direction:column;font-size:18px;position:absolute;top:100%;right:0;border:1px solid #d8d8d8;width:300px}.header-profile.sc-admiralty-header-profile .sub-menu.desktop-visible.sc-admiralty-header-profile{display:flex}.header-profile.sc-admiralty-header-profile .sub-menu.desktop-hide.sc-admiralty-header-profile{display:none}.header-profile.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile{box-sizing:content-box;margin:0;width:100%;all:unset;box-sizing:border-box;display:block;font-weight:300;height:100%;padding:10px;text-align:left;width:100%}.header-profile.sc-admiralty-header-profile .sub-menu.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:hover{background-color:#f0f0f0}}@media (max-width: 1023px){.header-profile.sc-admiralty-header-profile{border-top:1px solid #d8d8d8}.header-profile.sc-admiralty-header-profile .desktop.sc-admiralty-header-profile{display:none}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile{display:block;box-sizing:border-box;background-color:unset;text-align:unset;text-decoration:unset;width:100%;padding:12px}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile span.sc-admiralty-header-profile{padding:4px 0;color:#09315b;font-size:18px;font-weight:normal}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:hover{background-color:#f0f0f0}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:focus{outline:none}.header-profile.sc-admiralty-header-profile .sub-menu-item.sc-admiralty-header-profile:focus span.sc-admiralty-header-profile{outline:3px solid transparent;color:#000000;background-color:#ffdd00;box-shadow:0 -2px #ffdd00, 0 4px #333333;text-decoration:none}}";
 const AdmiraltyHeaderProfileStyle0 = headerProfileCss;
 const HeaderProfileComponent = class {
@@ -17,27 +16,12 @@ const HeaderProfileComponent = class {
         this.handleSignIn = () => {
             this.signInClicked.emit();
         };
-        this.handleSignInKeyDown = (ev) => {
-            if (ev.key === Keys.Keys.ENTER || ev.key === Keys.Keys.SPACE) {
-                this.signInClicked.emit();
-            }
-        };
         this.handleSignOut = () => {
             this.signOutClicked.emit();
         };
-        this.handleSignOutKeyDown = (ev) => {
-            if (ev.key === Keys.Keys.ENTER || ev.key === Keys.Keys.SPACE) {
-                this.signOutClicked.emit();
-            }
-        };
         this.handleYourAccount = () => {
             this.yourAccountClicked.emit();
         };
-        this.handleYourAccountKeyDown = (ev) => {
-            if (ev.key === Keys.Keys.ENTER || ev.key === Keys.Keys.SPACE) {
-                this.yourAccountClicked.emit();
-            }
-        };
         this.closeDropdown = () => {
             const subMenu = this.el.querySelector('div.sub-menu');
             subMenu.classList.add('desktop-hide');
@@ -63,7 +47,7 @@ const HeaderProfileComponent = class {
     }
     render() {
         let { isSignedIn, signedInText, signInOnly } = this;
-        return (index.h(index.Host, { key: '1879b01fe2dcc687eeb8c16ffe2408ff1a30d386' }, index.h("div", { key: '97cb68a31860877932657e47e617075224292f77', class: "header-profile" }, isSignedIn ? (index.h("div", null, index.h("div", { class: "desktop", onMouseEnter: () => this.toggleDropdown(true), onMouseLeave: () => this.toggleDropdown(false) }, index.h("button", { onClick: this.handleClickSignedIn }, index.h("div", null, signedInText)), !signInOnly ? (index.h("div", { class: "sub-menu desktop-hide" }, index.h("button", { class: "sub-menu-item", onClick: this.handleYourAccount }, index.h("div", null, "Your Account")), index.h("button", { class: "sub-menu-item", onClick: this.handleSignOut }, index.h("div", null, "Sign Out")))) : null), !signInOnly ? (index.h("div", { class: "not-desktop" }, index.h("div", { class: "sub-menu-item", onClick: this.handleYourAccount, onKeyDown: this.handleYourAccountKeyDown, tabindex: "0" }, "Your Account"), index.h("div", { class: "sub-menu-item", onClick: this.handleSignOut, onKeyDown: this.handleSignOutKeyDown, tabindex: "0" }, "Sign Out"))) : null)) : (index.h("button", { class: "sub-menu-item", onClick: this.handleSignIn }, index.h("div", null, "Sign In"))))));
+        return (index.h(index.Host, { key: '568e15aea2703c66cb8b399b7666d7b4fe2a6076' }, index.h("div", { key: '4fef36124e626d2061a4293511e640bebb69b430', class: "header-profile" }, isSignedIn ? (index.h("div", null, index.h("div", { class: "desktop", onMouseEnter: () => this.toggleDropdown(true), onMouseLeave: () => this.toggleDropdown(false) }, index.h("button", { onClick: this.handleClickSignedIn }, index.h("span", null, signedInText)), !signInOnly ? (index.h("div", { class: "sub-menu desktop-hide" }, index.h("button", { class: "sub-menu-item", onClick: this.handleYourAccount }, index.h("div", null, "Your Account")), index.h("button", { class: "sub-menu-item", onClick: this.handleSignOut }, index.h("div", null, "Sign Out")))) : null), !signInOnly ? (index.h("div", { class: "not-desktop" }, index.h("button", { class: "sub-menu-item", onClick: this.handleYourAccount, tabindex: "0" }, index.h("span", null, "Your Account")), index.h("button", { class: "sub-menu-item", onClick: this.handleSignOut, tabindex: "0" }, index.h("span", null, "Sign Out")))) : null)) : (index.h("button", { class: "sub-menu-item", onClick: this.handleSignIn }, index.h("span", null, "Sign In"))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/admiralty-header-profile.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-header-profile.entry.cjs.js","mappings":"~~;;;;;;;~~AAAA,MAAM,gBAAgB,GAAG,~~wmIAAwmI~~,CAAC;~~AACloI~~,qCAAe,gBAAgB;;~~MCOlB~~,sBAAsB;;;;;;QAsCjC,iBAAY,GAAG;YACb,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;SAC3B,CAAC;QAEF,~~wBAAmB,GAAG,CAAC,EAAiB;YACtC,IAAI,EAAE,CAAC,GAAG,KAAKA,SAAI,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,KAAKA,SAAI,CAAC,KAAK,EAAE;gBAClD,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;aAC3B;SACF,CAAC;QAEF,~~kBAAa,GAAG;YACd,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAC5B,CAAC;QAEF,~~yBAAoB,GAAG,CAAC,EAAiB;YACvC,IAAI,EAAE,CAAC,GAAG,KAAKA,SAAI,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,KAAKA,SAAI,CAAC,KAAK,EAAE;gBAClD,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;aAC5B;SACF,CAAC;QAEF,~~sBAAiB,GAAG;YAClB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;SAChC,CAAC;QAEF,~~6BAAwB,GAAG,CAAC,EAAiB;YAC3C,IAAI,EAAE,CAAC,GAAG,KAAKA,SAAI,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,KAAKA,SAAI,CAAC,KAAK,EAAE;gBAClD,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;aAChC;SACF,CAAC;QAEF,~~kBAAa,GAAG;YACd,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACtE,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;SACvC,CAAC;QAEF,mBAAc,GAAG,CAAC,QAAiB;YACjC,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YAEtE,IAAI,QAAQ,EAAE;gBACZ,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;gBACzC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;aAC1C;iBAAM;gBACL,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;gBACtC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;aAC7C;SACF,CAAC;QAEF,wBAAmB,GAAG,CAAC,EAAc;YACnC,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;SAC5B,CAAC;~~0BAlF4B~~,KAAK;4BAKJ,SAAS;0BAOV,KAAK;;~~IAwEnC~~,MAAM;QACJ,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QACpD,~~QACEC~~,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,gBAAgB,IACxB,UAAU,IACTA,qBACEA,iBAAK,KAAK,EAAC,SAAS,EAAC,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,IAChHA,oBAAQ,OAAO,EAAE,IAAI,CAAC,mBAAmB,IACvCA,~~qBAAM~~,YAAY,~~CAAO~~,~~CAClB~~,EACR,CAAC,UAAU,IACVA,iBAAK,KAAK,EAAC,uBAAuB,IAChCA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAC3DA,oCAAuB,CAChB,EACTA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IACvDA,gCAAmB,CACZ,CACL,IACJ,IAAI,CACJ,EACL,CAAC,UAAU,IACVA,iBAAK,KAAK,EAAC,aAAa,IACtBA,~~iBAAK~~,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,~~SAAS,EAAE,IAAI,CAAC,wBAAwB,EAAE,~~QAAQ,EAAC,GAAG,~~mBAE5G~~,~~EACNA~~,~~iBAAK~~,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,~~SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,~~QAAQ,EAAC,GAAG,~~eAEpG~~,~~CACF~~,IACJ,IAAI,CACJ,KAENA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IACtDA~~,+BAAkB~~,~~CACX~~,CACV,CACG,CACD,EACP;KACH;;;;;;;","names":["~~Keys","~~h","Host"],"sources":["src/components/header-profile/header-profile.scss?tag=admiralty-header-profile&encapsulation=scoped","src/components/header-profile/header-profile.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n@use '../../scss/base/a11y';\n\n@mixin active {\n box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\n}\n\n.header-profile {\n color: colours.$colour-admiralty-blue;\n cursor: pointer;\n\n @include responsive.desktop-only {\n .not-desktop {\n display: none;\n }\n\n display: flex;\n flex: 0;\n flex-direction: column;\n font-size: typography.$font-size-normal !important;\n height: 100%;\n justify-content: center;\n line-height: 1.33em;\n margin-bottom: 0;\n min-width: 4em;\n max-width: 11.1em;\n padding: 0 1.65em;\n position: relative;\n text-align: center;\n\n button {\n all: unset;\n height: 100%;\n width: 100%;\n ~~div~~ {\n font-weight: typography.$font-weight-medium;\n }\n\n &:focus div {\n @include a11y.focus-highlight;\n }\n }\n\n &:hover {\n @include active;\n background-color: colours.$colour-nav-bg-hover;\n\n .desktop .sub-menu {\n display: flex;\n }\n }\n\n &.active {\n @include active;\n\n .sub-menu {\n display: flex;\n }\n }\n\n .sub-menu {\n display: none;\n flex-direction: column;\n font-size: typography.$font-size-normal;\n position: absolute;\n top: 100%;\n right: 0;\n border: 1px solid colours.$colour-divider;\n width: 300px;\n\n &.desktop-visible {\n display: flex;\n }\n\n &.desktop-hide {\n display: none;\n }\n\n .sub-menu-item {\n box-sizing: content-box;\n margin: 0;\n width: 100%;\n\n all: unset;\n box-sizing: border-box;\n display: block;\n font-weight: typography.$font-weight-light;\n height: 100%;\n padding: 10px;\n text-align: left;\n width: 100%;\n\n &:~~focus {\n outline: none;\n box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n }\n &:~~hover {\n background-color: colours.$colour-nav-bg-hover;\n }\n }\n }\n }\n\n @include responsive.not-desktop {\n .desktop {\n display: none;\n }\n\n border-top: 1px solid colours.$colour-bg-header;\n\n .sub-menu-item {\n display: block;\n box-sizing: border-box;\n ~~font~~-~~size~~: ~~typography.$font-size-normal~~;\n ~~font~~-~~weight~~: ~~500~~;\n ~~background~~-~~color~~: unset;\n ~~text-align~~: ~~unset;\~~n ~~text-decoration~~: ~~unset~~;\n\n padding: ~~12px~~;\n &:hover {\n background-color: colours.$colour-nav-bg-hover;\n }\n\n &:focus {\n outline: none;\n ~~box-shadow:~~ ~~colours.$colour~~-~~utility-focus inset 0 0 0 3px~~;\n }\n }\n }\n}\n","import { Component, Event, Host, h, Prop, EventEmitter, Element } from '@stencil/core';\~~nimport { Keys } from '../Keys';\~~n\n@Component({\n tag: 'admiralty-header-profile',\n styleUrl: 'header-profile.scss',\n scoped: true,\n})\nexport class HeaderProfileComponent {\n @Element() el: HTMLElement;\n\n /*\n A boolean to indicate if the user is signed in or not\n /\n @Prop() isSignedIn: boolean = false;\n\n /\n The text that is displayed after the user signs in\n /\n @Prop() signedInText: string = 'replace';\n\n /\n A boolean to indicate if the component should hide\n * the sign-out and account buttons, useful for internal\n * sites where the user must be always signed in.\n /\n @Prop() signInOnly: boolean = false;\n\n /\n The event that is fired when the user clicks on\n * the sign in button\n /\n @Event() signInClicked: EventEmitter<void>;\n\n /\n The event that is fired when the user clicks on the\n * 'Your account' button\n /\n @Event() yourAccountClicked: EventEmitter<void>;\n\n /\n The event that is fired when the user clicks on the\n * 'sign out' button\n */\n @Event() signOutClicked: EventEmitter<void>;\n\n handleSignIn = () => {\n this.signInClicked.emit();\n };\n\n ~~handleSignInKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === Keys.ENTER \|\| ev.key === Keys.SPACE) {\n this.signInClicked.emit();\n }\n };\n\n~~ handleSignOut = () => {\n this.signOutClicked.emit();\n };\n\n ~~handleSignOutKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === Keys.ENTER \|\| ev.key === Keys.SPACE) {\n this.signOutClicked.emit();\n }\n };\n\n~~ handleYourAccount = () => {\n this.yourAccountClicked.emit();\n };\n\n ~~handleYourAccountKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === Keys.ENTER \|\| ev.key === Keys.SPACE) {\n this.yourAccountClicked.emit();\n }\n };\n\n~~ closeDropdown = () => {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n subMenu.classList.add('desktop-hide');\n };\n\n toggleDropdown = (showMenu: boolean) => {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n\n if (showMenu) {\n subMenu.classList.add('desktop-visible');\n subMenu.classList.remove('desktop-hide');\n } else {\n subMenu.classList.add('desktop-hide');\n subMenu.classList.remove('desktop-visible');\n }\n };\n\n handleClickSignedIn = (ev: MouseEvent) => {\n ev.stopPropagation();\n this.toggleDropdown(false);\n };\n\n render() {\n let { isSignedIn, signedInText, signInOnly } = this;\n return (\n <Host>\n <div class=\"header-profile\">\n {isSignedIn ? (\n <div>\n <div class=\"desktop\" onMouseEnter={() => this.toggleDropdown(true)} onMouseLeave={() => this.toggleDropdown(false)}>\n <button onClick={this.handleClickSignedIn}>\n <~~div~~>{signedInText}</~~div~~>\n </button>\n {!signInOnly ? (\n <div class=\"sub-menu desktop-hide\">\n <button class=\"sub-menu-item\" onClick={this.handleYourAccount}>\n <div>Your Account</div>\n </button>\n <button class=\"sub-menu-item\" onClick={this.handleSignOut}>\n <div>Sign Out</div>\n </button>\n </div>\n ) : null}\n </div>\n {!signInOnly ? (\n <div class=\"not-desktop\">\n <~~div~~ class=\"sub-menu-item\" onClick={this.handleYourAccount} ~~onKeyDown={this.handleYourAccountKeyDown}~~ tabindex=\"0\">\n Your Account\n </~~div~~>\n <~~div~~ class=\"sub-menu-item\" onClick={this.handleSignOut} ~~onKeyDown={this.handleSignOutKeyDown}~~ tabindex=\"0\">\n Sign Out\n </~~div~~>\n </div>\n ) : null}\n </div>\n ) : (\n <button class=\"sub-menu-item\" onClick={this.handleSignIn}>\n <~~div~~>Sign In</~~div~~>\n </button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"admiralty-header-profile.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,w8IAAw8I,CAAC;AACl+I,qCAAe,gBAAgB;;MCMlB,sBAAsB;;;;;;QAsCjC,iBAAY,GAAG;YACb,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;SAC3B,CAAC;QAEF,kBAAa,GAAG;YACd,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAC5B,CAAC;QAEF,sBAAiB,GAAG;YAClB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;SAChC,CAAC;QAEF,kBAAa,GAAG;YACd,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YACtE,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;SACvC,CAAC;QAEF,mBAAc,GAAG,CAAC,QAAiB;YACjC,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YAEtE,IAAI,QAAQ,EAAE;gBACZ,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;gBACzC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;aAC1C;iBAAM;gBACL,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;gBACtC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;aAC7C;SACF,CAAC;QAEF,wBAAmB,GAAG,CAAC,EAAc;YACnC,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;SAC5B,CAAC;0BAhE4B,KAAK;4BAKJ,SAAS;0BAOV,KAAK;;IAsDnC,MAAM;QACJ,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QACpD,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,gBAAgB,IACxB,UAAU,IACTA,qBACEA,iBAAK,KAAK,EAAC,SAAS,EAAC,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,IAChHA,oBAAQ,OAAO,EAAE,IAAI,CAAC,mBAAmB,IACvCA,sBAAO,YAAY,CAAQ,CAEpB,EACR,CAAC,UAAU,IACVA,iBAAK,KAAK,EAAC,uBAAuB,IAChCA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAC3DA,oCAAuB,CAChB,EACTA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IACvDA,gCAAmB,CACZ,CACL,IACJ,IAAI,CACJ,EACL,CAAC,UAAU,IACVA,iBAAK,KAAK,EAAC,aAAa,IACtBA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,QAAQ,EAAC,GAAG,IACzEA,qCAAyB,CAClB,EACTA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,QAAQ,EAAC,GAAG,IACrEA,iCAAqB,CACd,CACL,IACJ,IAAI,CACJ,KAENA,oBAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IACtDA,gCAAoB,CACb,CACV,CACG,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/header-profile/header-profile.scss?tag=admiralty-header-profile&encapsulation=scoped","src/components/header-profile/header-profile.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n@use '../../scss/base/a11y';\n\n@mixin active {\n box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\n}\n\n.header-profile {\n color: colours.$colour-admiralty-blue;\n cursor: pointer;\n\n @include responsive.desktop-only {\n .not-desktop {\n display: none;\n }\n\n display: flex;\n flex: 0;\n flex-direction: column;\n font-size: typography.$font-size-normal !important;\n height: 100%;\n justify-content: center;\n line-height: 1.33em;\n margin-bottom: 0;\n min-width: 4em;\n max-width: 11.1em;\n padding: 0 1.65em;\n position: relative;\n text-align: center;\n\n button {\n all: unset;\n height: 100%;\n width: 100%;\n span {\n color: colours.$colour-admiralty-blue;\n font-weight: typography.$font-weight-medium;\n padding: 4px 0;\n }\n\n &:focus span,\n &:focus div {\n @include a11y.focus-highlight;\n }\n }\n\n &:hover {\n @include active;\n background-color: colours.$colour-nav-bg-hover;\n\n .desktop .sub-menu {\n display: flex;\n }\n }\n\n &.active {\n @include active;\n\n .sub-menu {\n display: flex;\n }\n }\n\n .sub-menu {\n display: none;\n flex-direction: column;\n font-size: typography.$font-size-normal;\n position: absolute;\n top: 100%;\n right: 0;\n border: 1px solid colours.$colour-divider;\n width: 300px;\n\n &.desktop-visible {\n display: flex;\n }\n\n &.desktop-hide {\n display: none;\n }\n\n .sub-menu-item {\n box-sizing: content-box;\n margin: 0;\n width: 100%;\n\n all: unset;\n box-sizing: border-box;\n display: block;\n font-weight: typography.$font-weight-light;\n height: 100%;\n padding: 10px;\n text-align: left;\n width: 100%;\n\n &:hover {\n background-color: colours.$colour-nav-bg-hover;\n }\n }\n }\n }\n\n @include responsive.not-desktop {\n .desktop {\n display: none;\n }\n\n border-top: 1px solid colours.$colour-bg-header;\n\n .sub-menu-item {\n display: block;\n box-sizing: border-box;\n background-color: unset;\n text-align: unset;\n text-decoration: unset;\n width: 100%;\n padding: 12px;\n\n span {\n padding: 4px 0;\n color: colours.$colour-admiralty-blue;\n font-size: typography.$font-size-normal;\n font-weight: typography.$font-weight-medium;\n }\n\n &:hover {\n background-color: colours.$colour-nav-bg-hover;\n }\n\n &:focus {\n outline: none;\n span {\n @include a11y.focus-highlight;\n }\n }\n }\n }\n}\n","import { Component, Event, Host, h, Prop, EventEmitter, Element } from '@stencil/core';\n\n@Component({\n tag: 'admiralty-header-profile',\n styleUrl: 'header-profile.scss',\n scoped: true,\n})\nexport class HeaderProfileComponent {\n @Element() el: HTMLElement;\n\n /*\n A boolean to indicate if the user is signed in or not\n /\n @Prop() isSignedIn: boolean = false;\n\n /\n The text that is displayed after the user signs in\n /\n @Prop() signedInText: string = 'replace';\n\n /\n A boolean to indicate if the component should hide\n * the sign-out and account buttons, useful for internal\n * sites where the user must be always signed in.\n /\n @Prop() signInOnly: boolean = false;\n\n /\n The event that is fired when the user clicks on\n * the sign in button\n /\n @Event() signInClicked: EventEmitter<void>;\n\n /\n The event that is fired when the user clicks on the\n * 'Your account' button\n /\n @Event() yourAccountClicked: EventEmitter<void>;\n\n /\n The event that is fired when the user clicks on the\n * 'sign out' button\n */\n @Event() signOutClicked: EventEmitter<void>;\n\n handleSignIn = () => {\n this.signInClicked.emit();\n };\n\n handleSignOut = () => {\n this.signOutClicked.emit();\n };\n\n handleYourAccount = () => {\n this.yourAccountClicked.emit();\n };\n\n closeDropdown = () => {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n subMenu.classList.add('desktop-hide');\n };\n\n toggleDropdown = (showMenu: boolean) => {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n\n if (showMenu) {\n subMenu.classList.add('desktop-visible');\n subMenu.classList.remove('desktop-hide');\n } else {\n subMenu.classList.add('desktop-hide');\n subMenu.classList.remove('desktop-visible');\n }\n };\n\n handleClickSignedIn = (ev: MouseEvent) => {\n ev.stopPropagation();\n this.toggleDropdown(false);\n };\n\n render() {\n let { isSignedIn, signedInText, signInOnly } = this;\n return (\n <Host>\n <div class=\"header-profile\">\n {isSignedIn ? (\n <div>\n <div class=\"desktop\" onMouseEnter={() => this.toggleDropdown(true)} onMouseLeave={() => this.toggleDropdown(false)}>\n <button onClick={this.handleClickSignedIn}>\n <span>{signedInText}</span>\n\n </button>\n {!signInOnly ? (\n <div class=\"sub-menu desktop-hide\">\n <button class=\"sub-menu-item\" onClick={this.handleYourAccount}>\n <div>Your Account</div>\n </button>\n <button class=\"sub-menu-item\" onClick={this.handleSignOut}>\n <div>Sign Out</div>\n </button>\n </div>\n ) : null}\n </div>\n {!signInOnly ? (\n <div class=\"not-desktop\">\n <button class=\"sub-menu-item\" onClick={this.handleYourAccount} tabindex=\"0\">\n <span>Your Account</span>\n </button>\n <button class=\"sub-menu-item\" onClick={this.handleSignOut} tabindex=\"0\">\n <span>Sign Out</span>\n </button>\n </div>\n ) : null}\n </div>\n ) : (\n <button class=\"sub-menu-item\" onClick={this.handleSignIn}>\n <span>Sign In</span>\n </button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/admiralty-header-sub-menu-item.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ae771770.js');
 const Keys = require('./Keys-019752ee.js');
-const headerSubMenuItemCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-sub-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-sub-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-sub-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-sub-menu-item{display:none}}.header-sub-menu-item.sc-admiralty-header-sub-menu-item .title.sc-admiralty-header-sub-menu-item{font-size:18px;font-weight:300}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:focus{outline:none;box-shadow:#ffdd00 inset 0 0 0 3px}@media (min-width: 1024px){.header-sub-menu-item.sc-admiralty-header-sub-menu-item{box-sizing:border-box;color:#09315b;display:block;margin-bottom:0;padding:0 0.66em;text-align:center;width:300px}.header-sub-menu-item.sc-admiralty-header-sub-menu-item .title.sc-admiralty-header-sub-menu-item{display:block;padding:10px;text-align:center}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:hover{background-color:#f0f0f0}}@media (max-width: 1023px){.header-sub-menu-item.sc-admiralty-header-sub-menu-item{display:block;box-sizing:border-box;padding:12px 24px;cursor:pointer;color:#09315b;font-weight:500;background-color:unset;text-align:unset;text-decoration:unset}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:hover{background-color:#f0f0f0}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:focus{outline:none;box-shadow:#ffdd00 inset 0 0 0 3px}}";
+const headerSubMenuItemCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-sub-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-sub-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-sub-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-sub-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-sub-menu-item{display:none}}.visually-hidden.sc-admiralty-header-sub-menu-item:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}.header-sub-menu-item.sc-admiralty-header-sub-menu-item .title.sc-admiralty-header-sub-menu-item{font-size:18px;font-weight:300}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:focus{outline:none}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:focus span.sc-admiralty-header-sub-menu-item{outline:3px solid transparent;color:#000000;background-color:#ffdd00;box-shadow:0 -2px #ffdd00, 0 4px #333333;text-decoration:none}@media (min-width: 1024px){.header-sub-menu-item.sc-admiralty-header-sub-menu-item{box-sizing:border-box;color:#09315b;display:block;margin-bottom:0;padding:10px;text-align:center;width:300px}.header-sub-menu-item.sc-admiralty-header-sub-menu-item .title.sc-admiralty-header-sub-menu-item{display:block;text-align:center}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:hover{background-color:#f0f0f0}}@media (max-width: 1023px){.header-sub-menu-item.sc-admiralty-header-sub-menu-item{display:block;box-sizing:border-box;padding:12px 24px;cursor:pointer;color:#09315b;font-weight:500;background-color:unset;text-align:unset;text-decoration:unset}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:hover{background-color:#f0f0f0}.header-sub-menu-item.sc-admiralty-header-sub-menu-item:focus .title.sc-admiralty-header-sub-menu-item{box-shadow:0 -4px #ffdd00, 0 4px #333333}}";
 const AdmiraltyHeaderSubMenuItemStyle0 = headerSubMenuItemCss;
 const HeaderSubMenuItemComponent = class {

package/dist/cjs/admiralty-header-sub-menu-item.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"admiralty-header-sub-menu-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,oBAAoB,GAAG,~~41DAA41D~~,CAAC;~~AAC13D~~,yCAAe,oBAAoB;;MCOtB,0BAA0B;;;;;;IAYrC,WAAW,CAAC,EAAc;QACxB,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACnD;;IAED,SAAS,CAAC,EAAiB;QACzB,IAAI,EAAE,CAAC,GAAG,KAAKA,SAAI,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,KAAKA,SAAI,CAAC,KAAK,EAAE;YAClD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SAC5C;KACF;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,EAAE,IAAE,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,IAAE,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAC,GAAG,IAClHA,mEAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAQ,CACvC,CACD,EACP;KACH;;;;;;","names":["Keys","h","Host"],"sources":["src/components/header-sub-menu-item/header-sub-menu-item.scss?tag=admiralty-header-sub-menu-item&encapsulation=scoped","src/components/header-sub-menu-item/header-sub-menu-item.tsx"],"sourcesContent":["@use \"../../scss/vars/colours\" as colours;\n@use \"../../scss/base/responsive\";\n@use \"../../scss/vars/typography\";\n\n@mixin active {\n background-color: colours.$colour-nav-bg-hover;\n}\n\n.header-sub-menu-item {\n .title {\n font-size: typography.$font-size-normal;\n font-weight: typography.$font-weight-light;\n }\n\n &:focus {\n outline: none;\n ~~box-shadow:~~ ~~colours.$colour~~-~~utility-focus inset 0 0 0 3px~~;\n }\n\n @include responsive.desktop-only {\n box-sizing: border-box;\n color: colours.$colour-admiralty-blue;\n display: block;\n margin-bottom: 0;\n padding: ~~0 0.66em~~;\n text-align: center;\n width: 300px;\n\n .title {\n display: block;\n ~~padding: 10px;\n~~ text-align: center;\n }\n\n &:hover {\n @include active;\n }\n }\n\n @include responsive.not-desktop {\n display: block;\n box-sizing: border-box;\n padding: 12px 24px;\n cursor: pointer;\n color: colours.$colour-admiralty-blue;\n font-weight: 500;\n background-color: unset;\n text-align: unset;\n text-decoration: unset;\n\n &:hover {\n @include active;\n }\n\n &:focus {\n ~~outline:~~ ~~none;\~~n box-shadow: colours.$colour-utility-focus ~~inset~~ 0 0 ~~0 3px~~;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { Keys } from '../Keys';\n\n@Component({\n tag: 'admiralty-header-sub-menu-item',\n styleUrl: 'header-sub-menu-item.scss',\n scoped: true,\n})\nexport class HeaderSubMenuItemComponent {\n /*\n The text that will be displayed in the menu\n /\n @Prop() menuTitle: string;\n\n /\n The event that is fired when a user clicks on the menu.\n * Event contains the menu item text.\n */\n @Event() subMenuItemClick: EventEmitter<string>;\n\n handleClick(ev: MouseEvent): CustomEvent<string> {\n ev.stopPropagation();\n return this.subMenuItemClick.emit(this.menuTitle);\n };\n\n onKeyDown(ev: KeyboardEvent): void {\n if (ev.key === Keys.ENTER \|\| ev.key === Keys.SPACE) {\n this.subMenuItemClick.emit(this.menuTitle);\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"header-sub-menu-item\" onClick={ev=>this.handleClick(ev)} onKeyDown={ev=>this.onKeyDown(ev)} tabindex=\"0\">\n <span class=\"title\">{this.menuTitle}</span>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"admiralty-header-sub-menu-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,oBAAoB,GAAG,k6EAAk6E,CAAC;AACh8E,yCAAe,oBAAoB;;MCOtB,0BAA0B;;;;;;IAYrC,WAAW,CAAC,EAAc;QACxB,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACnD;;IAED,SAAS,CAAC,EAAiB;QACzB,IAAI,EAAE,CAAC,GAAG,KAAKA,SAAI,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,KAAKA,SAAI,CAAC,KAAK,EAAE;YAClD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SAC5C;KACF;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,EAAE,IAAE,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,IAAE,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAC,GAAG,IAClHA,mEAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAQ,CACvC,CACD,EACP;KACH;;;;;;","names":["Keys","h","Host"],"sources":["src/components/header-sub-menu-item/header-sub-menu-item.scss?tag=admiralty-header-sub-menu-item&encapsulation=scoped","src/components/header-sub-menu-item/header-sub-menu-item.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n@use '../../scss/base/a11y';\n\n@mixin active {\n background-color: colours.$colour-nav-bg-hover;\n}\n\n.header-sub-menu-item {\n .title {\n font-size: typography.$font-size-normal;\n font-weight: typography.$font-weight-light;\n }\n\n &:focus {\n outline: none;\n\n span {\n @include a11y.focus-highlight;\n }\n }\n\n @include responsive.desktop-only {\n box-sizing: border-box;\n color: colours.$colour-admiralty-blue;\n display: block;\n margin-bottom: 0;\n padding: 10px;\n text-align: center;\n width: 300px;\n\n .title {\n display: block;\n text-align: center;\n }\n\n &:hover {\n @include active;\n }\n }\n\n @include responsive.not-desktop {\n display: block;\n box-sizing: border-box;\n padding: 12px 24px;\n cursor: pointer;\n color: colours.$colour-admiralty-blue;\n font-weight: 500;\n background-color: unset;\n text-align: unset;\n text-decoration: unset;\n\n &:hover {\n @include active;\n }\n\n &:focus {\n .title {\n box-shadow:\n 0 -4px colours.$colour-utility-focus,\n 0 4px colours.$colour-text;\n }\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { Keys } from '../Keys';\n\n@Component({\n tag: 'admiralty-header-sub-menu-item',\n styleUrl: 'header-sub-menu-item.scss',\n scoped: true,\n})\nexport class HeaderSubMenuItemComponent {\n /*\n The text that will be displayed in the menu\n /\n @Prop() menuTitle: string;\n\n /\n The event that is fired when a user clicks on the menu.\n * Event contains the menu item text.\n */\n @Event() subMenuItemClick: EventEmitter<string>;\n\n handleClick(ev: MouseEvent): CustomEvent<string> {\n ev.stopPropagation();\n return this.subMenuItemClick.emit(this.menuTitle);\n };\n\n onKeyDown(ev: KeyboardEvent): void {\n if (ev.key === Keys.ENTER \|\| ev.key === Keys.SPACE) {\n this.subMenuItemClick.emit(this.menuTitle);\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"header-sub-menu-item\" onClick={ev=>this.handleClick(ev)} onKeyDown={ev=>this.onKeyDown(ev)} tabindex=\"0\">\n <span class=\"title\">{this.menuTitle}</span>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ae771770.js');
 const index$1 = require('./index-8af1d72c.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}}.visually-hidden.sc-admiralty-header:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}.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:#ffffff;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 transparent;color:#000000;background-color:#ffdd00;box-shadow:0 -2px #ffdd00, 0 4px #333333;text-decoration:none}.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-top:4px;margin-bottom:unset;user-select:none}@media (max-width: 1023px){.header-branding.sc-admiralty-header .header-title.sc-admiralty-header{font-size:24px;line-height:24px;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-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}}";
+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}}.visually-hidden.sc-admiralty-header:not(:focus):not(:active){position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important}.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:#ffffff;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 transparent;color:#000000;background-color:#ffdd00;box-shadow:0 -2px #ffdd00, 0 4px #333333;text-decoration:none}.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-top:4px;margin-bottom:unset;user-select:none}@media (max-width: 1023px){.header-branding.sc-admiralty-header .header-title.sc-admiralty-header{font-size:24px;line-height:24px;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-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:3px solid transparent;color:#000000;background-color:#ffdd00;box-shadow:0 -2px #ffdd00, 0 4px #333333;text-decoration:none;outline:none;box-shadow:0 -4px #333333 inset}@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}}";
 const AdmiraltyHeaderStyle0 = headerCss;
 const HeaderComponent = class {
@@ -46,7 +46,7 @@ const HeaderComponent = class {
     }
     render() {
         const { logoAltText, logoLinkUrl, logoImgUrl, headerTitle, headerTitleUrl } = this;
-        return (index.h("div", { key: '8c36e37ed4d4796a0c69ace32639eb365779cec3', class: "admiralty-header" }, index.h("nav", { key: 'ed644487140be5f707a9c5dd9b242e1324da7d01', class: "header-menu" }, index.h("div", { key: '5a2bc9425f8b9db953e9226a8dc6e0975f38e04e', class: "header-branding" }, index.h("a", { key: 'd7a4c27a4bd0961ba7ec9e785ef54eeed71c4253', class: "header-logo", href: logoLinkUrl, tabindex: "0" }, index.h("img", { key: 'cd2c9cb0ce7d8846e34bfb0d5774f4c9efaac0af', class: "header-image", alt: logoAltText, src: logoImgUrl })), index.h("div", { key: '7036ff6013a0dcf40ce95022b2ec3daeb9a789b9', class: "vertical-seperator" }), this.headerTitle ? (index.h("h2", { class: "header-title" }, index.h("a", { onClick: ev => this.handleClick(ev), href: headerTitleUrl, tabindex: "0" }, headerTitle))) : null), index.h("div", { key: '97a3db2bd701b5dadb3fe20efd03e594c675a213', class: "header-menus" }, index.h("div", { key: '8a2432347b318bafdf7681660400af2cee61a509', class: { 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger } }, index.h("button", { key: '3c7707b0d0cde675ba1123b21c4a5371bd3cbdf7', onClick: _ => this.toggleMobileMenu(), "aria-expanded": this.mobileMenuOpen, "aria-label": this.mobileMenuOpen ? 'Hide menu' : 'Show menu' }, index.h("admiralty-icon", { key: '8f5b78d4f86550e2efd1c9c39db1f5b69616bf09', "icon-name": this.mobileMenuOpen ? index$1.faTimes.iconName : index$1.faBars.iconName }))), index.h("div", { key: '00fbfcbca8f286ee481c951dabe0f71ad71a67a0', class: { 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen } }, index.h("div", { key: '203f3d8393030bed1f0d5ca9aadefd8535bb4c70', role: "navigation", class: "menu-items" }, index.h("slot", { key: 'bfa82f167991f8ac4213cc96d519f784f78531c7', name: "items" })), index.h("div", { key: 'c9019fca46e9e6c17581834df9e747b21e89a3b7', role: "navigation", class: "header-profile" }, index.h("slot", { key: '094f92edcc247d2a75b7824a5d87ee82e0f14715', name: "profile" })))))));
+        return (index.h("div", { key: '8c36e37ed4d4796a0c69ace32639eb365779cec3', class: "admiralty-header" }, index.h("div", { key: 'ed644487140be5f707a9c5dd9b242e1324da7d01', class: "header-menu" }, index.h("div", { key: '5a2bc9425f8b9db953e9226a8dc6e0975f38e04e', class: "header-branding" }, index.h("a", { key: 'd7a4c27a4bd0961ba7ec9e785ef54eeed71c4253', class: "header-logo", href: logoLinkUrl, tabindex: "0" }, index.h("img", { key: 'cd2c9cb0ce7d8846e34bfb0d5774f4c9efaac0af', class: "header-image", alt: logoAltText, src: logoImgUrl })), index.h("div", { key: '7036ff6013a0dcf40ce95022b2ec3daeb9a789b9', class: "vertical-seperator" }), this.headerTitle ? (index.h("h2", { class: "header-title" }, index.h("a", { onClick: ev => this.handleClick(ev), href: headerTitleUrl, tabindex: "0" }, headerTitle))) : null), index.h("nav", { key: '2f5c978408f906a8bf42b10c3c0b6a57182c1aed', role: "navigation", class: "header-menus", "aria-label": "Site navigation" }, index.h("div", { key: '9a24f3222cac6248310d1dde390dc884d8d6b26a', class: { 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger } }, index.h("button", { key: 'b1b54883c28042b4b598a55aff412a2840a0cc51', onClick: _ => this.toggleMobileMenu(), "aria-expanded": this.mobileMenuOpen, "aria-label": this.mobileMenuOpen ? 'Hide menu' : 'Show menu' }, index.h("admiralty-icon", { key: '6c69b37937d9bdd0622139dbb96549f01ba76d8e', "icon-name": this.mobileMenuOpen ? index$1.faTimes.iconName : index$1.faBars.iconName }))), index.h("div", { key: 'a579676d6ca0d7812118d8fb30adae6c55ec1dd3', class: { 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen } }, index.h("div", { key: 'ca94d0a2f02866796b493fccd01be130ad8b4705', class: "menu-items" }, index.h("slot", { key: '3838390149f8b4c277c16abcfb01cb0a35634d6f', name: "items" })), index.h("div", { key: '07d3b491c5c38a958b39f98e4c919347a75ad8a4', class: "header-profile" }, index.h("slot", { key: '92daa1dc23f19725e04a57bf62515932e153898f', name: "profile" })))))));
     }
     get el() { return index.getElement(this); }
 };