@ukho/admiralty-core 0.23.1 → 0.23.2
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.
- package/dist/admiralty/admiralty.esm.js +1 -1
- package/dist/admiralty/{p-da7e7c15.entry.js → p-81291aa6.entry.js} +2 -2
- package/dist/admiralty/{p-da7e7c15.entry.js.map → p-81291aa6.entry.js.map} +1 -1
- package/dist/cjs/admiralty-header.cjs.entry.js +2 -2
- package/dist/cjs/admiralty-header.cjs.entry.js.map +1 -1
- package/dist/collection/components/header/header.js +3 -3
- package/dist/collection/components/header/header.js.map +1 -1
- package/dist/collection/components/header/header.spec.js +3 -3
- package/dist/collection/components/header/header.spec.js.map +1 -1
- package/dist/components/admiralty-header.js +2 -2
- package/dist/components/admiralty-header.js.map +1 -1
- package/dist/esm/admiralty-header.entry.js +2 -2
- package/dist/esm/admiralty-header.entry.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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-0819cd8b",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-3c98e54e",[[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-4f1dbf3c",[[6,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]},null,{value:["valueChanged"]}]]],["p-49aa4cb6",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]},null,{value:["valueChanged"]}]]],["p-e867cab7",[[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-d7bd6c02",[[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-9e8c621f",[[2,"admiralty-file-input",{label:[1],multiple:[4],invalid:[4],invalidMessage:[1,"invalid-message"],files:[32]}]]],["p-b59477dc",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-c94ab9be",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-c82a4fc0",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-b743ca74",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-262f1d94",[[6,"admiralty-dialogue",{type:[1],heading:[1]}]]],["p-
|
|
1
|
+
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-0819cd8b",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-3c98e54e",[[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-4f1dbf3c",[[6,"admiralty-select",{disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],hint:[1],label:[1],width:[2],value:[1032]},null,{value:["valueChanged"]}]]],["p-49aa4cb6",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]},null,{value:["valueChanged"]}]]],["p-e867cab7",[[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-d7bd6c02",[[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-9e8c621f",[[2,"admiralty-file-input",{label:[1],multiple:[4],invalid:[4],invalidMessage:[1,"invalid-message"],files:[32]}]]],["p-b59477dc",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-c94ab9be",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-c82a4fc0",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-b743ca74",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-262f1d94",[[6,"admiralty-dialogue",{type:[1],heading:[1]}]]],["p-81291aa6",[[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-47f67bd9",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]},null,{progression:["progressionChanged"]}]]],["p-14d3a0f9",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-ae23a899",[[2,"admiralty-autocomplete-option",{value:[8]}]]],["p-298fe86e",[[6,"admiralty-breadcrumbs"]]],["p-00bdb9a8",[[6,"admiralty-card",{heading:[1]}]]],["p-5fb35437",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1028],value:[8],labelText:[1,"label-text"]},null,{checked:["checkedChanged"]}]]],["p-f0b95318",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-6828ab68",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-5f9ea53c",[[6,"admiralty-header-menu-link",{menuTitle:[1,"menu-title"],active:[4],href:[1],suppressRedirect:[4,"suppress-redirect"]}]]],["p-57441e1c",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"],signInOnly:[4,"sign-in-only"]}]]],["p-b484016d",[[2,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"]}]]],["p-bf7b6853",[[2,"admiralty-hr"]]],["p-789cfd7d",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-1b5a01a2",[[6,"admiralty-modal-dialog",{heading:[1],label:[1],description:[1],show:[4]}]]],["p-76d6284c",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-9b6908a6",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-1fccce47",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],invalid:[4],buttonTabindex:[32],setButtonTabindex:[64]},null,{value:["valueChanged"]}]]],["p-9d1a3669",[[6,"admiralty-side-nav",{label:[1]}]]],["p-806b24df",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-987f5f82",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-842e6a77",[[2,"admiralty-skip-link",{href:[1]}]]],["p-8ad6ad39",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-6f78b615",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-a3ff9e59",[[6,"admiralty-table",{caption:[1]}]]],["p-c0bbf9ba",[[6,"admiralty-table-body"]]],["p-2a4d3696",[[6,"admiralty-table-cell"]]],["p-ce97c255",[[6,"admiralty-table-header"]]],["p-de8d7559",[[6,"admiralty-table-header-cell"]]],["p-e93b2143",[[6,"admiralty-table-row"]]],["p-a69cd00e",[[2,"admiralty-type-ahead-item",{value:[1]}]]],["p-ca422e42",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-201f71e1",[[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-070251e2",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-ffbcf125",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1],form:[1],name:[1],value:[1]}]]],["p-ce855081",[[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-label",{disabled:[4],for:[1]}],[6,"admiralty-input-invalid"]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=admiralty.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as a,f as d,h as i,g as t}from"./p-ac0ad15a.js";import{e as r,g as s}from"./p-a28a614b.js";const
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as a,f as d,h as i,g as t}from"./p-ac0ad15a.js";import{e as r,g as s}from"./p-a28a614b.js";const n="@media (max-width: 1023px){.desktop-only.sc-admiralty-header{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header{display:none}}.admiralty-header.sc-admiralty-header{font-size:18px;font-weight:300;line-height:24px}.header-menu.sc-admiralty-header{border-bottom:1px solid #d8d8d8;display:flex;flex-direction:row;background-color:#fff;height:5em;min-height:5em;position:relative}@media (max-width: 1023px){.header-menu.sc-admiralty-header{height:56px;min-height:56px;position:relative}}.header-branding.sc-admiralty-header{display:flex;flex-direction:row;flex-grow:1;font-size:18px;padding:1.3em 0 1.3em 1.3em}@media (max-width: 1023px){.header-branding.sc-admiralty-header{padding-left:12px;padding-top:12px;padding-bottom:12px;flex-grow:1}}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header{background-color:transparent;color:#09315b}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header img.sc-admiralty-header{height:100%;width:9em}.header-branding.sc-admiralty-header a.header-logo.sc-admiralty-header:focus{outline:3px solid #fd0;outline-offset:3px}.header-branding.sc-admiralty-header .vertical-seperator.sc-admiralty-header{border-right:1px solid #d8d8d8;margin-left:24px;margin-right:24px}@media (max-width: 1023px){.header-branding.sc-admiralty-header .vertical-seperator.sc-admiralty-header{margin-left:12px;margin-right:12px}}.header-branding.sc-admiralty-header .header-title.sc-admiralty-header{display:flex;flex-direction:column;flex-grow:1;justify-content:center;font-size:2em;line-height:2em;margin-bottom:unset;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-branding.sc-admiralty-header .header-title.sc-admiralty-header a.sc-admiralty-header:focus{outline:3px solid #fd0;outline-offset:3px}.header-menus.sc-admiralty-header{display:flex;justify-content:flex-end}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header{display:none;flex-direction:column;justify-content:center}@media (max-width: 1023px){.header-menus.sc-admiralty-header .mobile-menu-toggle.display-hamburger.sc-admiralty-header{display:flex}}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header{background-color:unset}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header admiralty-icon.sc-admiralty-header{font-size:24px;font-weight:900;padding:12px;cursor:pointer;min-width:24px;min-height:24px;text-align:center;user-select:none;color:#09315b}.header-menus.sc-admiralty-header .mobile-menu-toggle.sc-admiralty-header button.sc-admiralty-header:focus{outline:none;box-shadow:#ffdd00 inset 0 0 0 3px}@media (max-width: 1023px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header{display:none;min-height:56px;position:relative;right:0;position:absolute;top:100%;z-index:999;min-width:100%;background-color:#ffffff;border:1px solid #d8d8d8}}@media (max-width: 1023px) and (max-width: 1023px) and (min-width: 480px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header{min-width:50%;margin-left:50%}}@media (max-width: 1023px){.header-menus.sc-admiralty-header .menu-sections.mob-menus-visible.sc-admiralty-header{display:block}}@media (min-width: 1024px){.header-menus.sc-admiralty-header .menu-sections.sc-admiralty-header,.header-menus.sc-admiralty-header .menu-items.sc-admiralty-header,.header-menus.sc-admiralty-header .header-profile.sc-admiralty-header{display:flex;flex:0;flex-direction:row}}";const l=n;const h=class{constructor(d){e(this,d);this.titledClicked=a(this,"titledClicked",7);this.headerTitle=undefined;this.headerTitleUrl=null;this.logoLinkUrl="https://www.admiralty.co.uk/";this.logoImgUrl="svg/Admiralty stacked logo.svg";this.logoAltText="ADMIRALTY";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:n}=this;return i("div",{key:"523f0bfbe0a3c952ce4f22d6d6ec6c467d62a614",class:"admiralty-header"},i("nav",{key:"b747f5497183c7f5a224546ca7427cbb781ef154",class:"header-menu"},i("div",{key:"bc32b2dc3c9abe57167cccecc0679dde9c9ccd02",class:"header-branding"},i("a",{key:"bb5fbfb514ab718f0bed5502922224976f210adc",class:"header-logo",href:a,tabindex:"0"},i("img",{key:"6a1f4c6437bc2ffaa3f485e35e874e3c828bab6f",class:"header-image",alt:e,src:d})),i("div",{key:"37b0721b3d0be63be2ba720a11252f20b71979ed",class:"vertical-seperator"}),this.headerTitle?i("h2",{class:"header-title"},i("a",{onClick:e=>this.handleClick(e),href:n,tabindex:"0"},t)):null),i("div",{key:"c1438a622c3cfe06db803ab1653eee840a504099",class:"header-menus"},i("div",{key:"8268c2fbba3ad50c7de2f8682b84c91ef8d43c5f",class:{"mobile-menu-toggle":true,"display-hamburger":this.displayHamburger}},i("button",{key:"0f621bfbf9aa847b19e63d940f963e0de4ede41b",onClick:e=>this.toggleMobileMenu(),"aria-expanded":this.mobileMenuOpen},i("admiralty-icon",{key:"57c91f8fc6915aa2ad4b9abce2aca5b2ec987b45","icon-name":this.mobileMenuOpen?r.iconName:s.iconName}))),i("div",{key:"d6cafc6294e79bd52ba4934ddc7d559c5a880f30",class:{"menu-sections":true,"mob-menus-visible":this.mobileMenuOpen}},i("div",{key:"034fd5abc219383fed472c68edd99f0a8ae3e75f",role:"navigation",class:"menu-items"},i("slot",{key:"2e0009c64f12390a6bd19a7ca3a1ab82ffe7e793",name:"items"})),i("div",{key:"366cc89a8cb913a4219440706eac0edb3d222b8e",role:"navigation",class:"header-profile"},i("slot",{key:"98f4ef769ee5f07c653aa2b6ffc5b04f5c59905e",name:"profile"}))))))}get el(){return t(this)}};h.style=l;export{h as admiralty_header};
|
|
2
|
+
//# sourceMappingURL=p-81291aa6.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["headerCss","AdmiraltyHeaderStyle0","HeaderComponent","connectedCallback","this","observer","MutationObserver","forceUpdate","observe","el","childList","subtree","disconnectedCallback","disconnect","componentWillRender","childMenus","querySelectorAll","displayHamburger","length","handleClick","ev","preventDefault","titledClicked","emit","headerTitleUrl","toggleMobileMenu","mobileMenuOpen","render","logoAltText","logoLinkUrl","logoImgUrl","headerTitle","h","key","class","href","tabindex","alt","src","onClick","_","faTimes","iconName","faBars","role","name"],"sources":["src/components/header/header.scss?tag=admiralty-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n\n.admiralty-header {\n font-size: 18px;\n font-weight: typography.$font-weight-light;\n line-height: 24px;\n}\n\n.header-menu {\n border-bottom: 1px solid #d8d8d8;\n display: flex;\n flex-direction: row;\n background-color: #fff;\n height: 5em;\n min-height: 5em;\n position: relative;\n\n @include responsive.not-desktop {\n height: 56px;\n min-height: 56px;\n position: relative;\n }\n}\n\n.header-branding {\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n font-size: 18px;\n padding: 1.3em 0 1.3em 1.3em;\n\n @include responsive.not-desktop {\n padding-left: 12px;\n padding-top: 12px;\n padding-bottom: 12px;\n flex-grow: 1;\n }\n\n a.header-logo {\n background-color: transparent;\n color: colours.$colour-admiralty-blue;\n\n img {\n height: 100%;\n width: 9em;\n }\n\n &:focus {\n outline: 3px solid #fd0;\n outline-offset: 3px;\n }\n }\n\n .vertical-seperator {\n border-right: 1px solid colours.$colour-divider;\n margin-left: 24px;\n margin-right: 24px;\n @include responsive.not-desktop {\n margin-left: 12px;\n margin-right: 12px;\n }\n }\n\n .header-title {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n justify-content: center;\n font-size: 2em;\n line-height: 2em;\n margin-bottom: unset;\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 &:focus {\n outline: 3px solid #fd0;\n outline-offset: 3px;\n }\n }\n }\n}\n\n.header-menus {\n display: flex;\n justify-content: flex-end;\n\n .mobile-menu-toggle {\n display: none;\n\n @include responsive.not-desktop {\n &.display-hamburger {\n display: flex;\n }\n }\n flex-direction: column;\n justify-content: center;\n\n button {\n background-color: unset;\n\n admiralty-icon {\n font-size: 24px;\n font-weight: 900;\n padding: 12px;\n cursor: pointer;\n min-width: 24px;\n min-height: 24px;\n text-align: center;\n user-select: none;\n color: colours.$colour-admiralty-blue;\n }\n\n &:focus {\n outline: none;\n box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n }\n }\n }\n\n @include responsive.not-desktop {\n .menu-sections {\n display: none;\n\n min-height: 56px;\n position: relative;\n right: 0;\n\n position: absolute;\n top: 100%;\n z-index: 999;\n min-width: 100%;\n @include responsive.tablet-only {\n min-width: 50%;\n margin-left: 50%;\n }\n\n background-color: colours.$colour-white;\n border: 1px solid colours.$colour-bg-header;\n\n &.mob-menus-visible {\n display: block;\n }\n }\n }\n\n .menu-sections,\n .menu-items,\n .header-profile {\n @include responsive.desktop-only {\n display: flex;\n flex: 0;\n flex-direction: row;\n }\n }\n}\n","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 = '
|
|
1
|
+
{"version":3,"names":["headerCss","AdmiraltyHeaderStyle0","HeaderComponent","connectedCallback","this","observer","MutationObserver","forceUpdate","observe","el","childList","subtree","disconnectedCallback","disconnect","componentWillRender","childMenus","querySelectorAll","displayHamburger","length","handleClick","ev","preventDefault","titledClicked","emit","headerTitleUrl","toggleMobileMenu","mobileMenuOpen","render","logoAltText","logoLinkUrl","logoImgUrl","headerTitle","h","key","class","href","tabindex","alt","src","onClick","_","faTimes","iconName","faBars","role","name"],"sources":["src/components/header/header.scss?tag=admiralty-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n\n.admiralty-header {\n font-size: 18px;\n font-weight: typography.$font-weight-light;\n line-height: 24px;\n}\n\n.header-menu {\n border-bottom: 1px solid #d8d8d8;\n display: flex;\n flex-direction: row;\n background-color: #fff;\n height: 5em;\n min-height: 5em;\n position: relative;\n\n @include responsive.not-desktop {\n height: 56px;\n min-height: 56px;\n position: relative;\n }\n}\n\n.header-branding {\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n font-size: 18px;\n padding: 1.3em 0 1.3em 1.3em;\n\n @include responsive.not-desktop {\n padding-left: 12px;\n padding-top: 12px;\n padding-bottom: 12px;\n flex-grow: 1;\n }\n\n a.header-logo {\n background-color: transparent;\n color: colours.$colour-admiralty-blue;\n\n img {\n height: 100%;\n width: 9em;\n }\n\n &:focus {\n outline: 3px solid #fd0;\n outline-offset: 3px;\n }\n }\n\n .vertical-seperator {\n border-right: 1px solid colours.$colour-divider;\n margin-left: 24px;\n margin-right: 24px;\n @include responsive.not-desktop {\n margin-left: 12px;\n margin-right: 12px;\n }\n }\n\n .header-title {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n justify-content: center;\n font-size: 2em;\n line-height: 2em;\n margin-bottom: unset;\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 &:focus {\n outline: 3px solid #fd0;\n outline-offset: 3px;\n }\n }\n }\n}\n\n.header-menus {\n display: flex;\n justify-content: flex-end;\n\n .mobile-menu-toggle {\n display: none;\n\n @include responsive.not-desktop {\n &.display-hamburger {\n display: flex;\n }\n }\n flex-direction: column;\n justify-content: center;\n\n button {\n background-color: unset;\n\n admiralty-icon {\n font-size: 24px;\n font-weight: 900;\n padding: 12px;\n cursor: pointer;\n min-width: 24px;\n min-height: 24px;\n text-align: center;\n user-select: none;\n color: colours.$colour-admiralty-blue;\n }\n\n &:focus {\n outline: none;\n box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n }\n }\n }\n\n @include responsive.not-desktop {\n .menu-sections {\n display: none;\n\n min-height: 56px;\n position: relative;\n right: 0;\n\n position: absolute;\n top: 100%;\n z-index: 999;\n min-width: 100%;\n @include responsive.tablet-only {\n min-width: 50%;\n margin-left: 50%;\n }\n\n background-color: colours.$colour-white;\n border: 1px solid colours.$colour-bg-header;\n\n &.mob-menus-visible {\n display: block;\n }\n }\n }\n\n .menu-sections,\n .menu-items,\n .header-profile {\n @include responsive.desktop-only {\n display: flex;\n flex: 0;\n flex-direction: row;\n }\n }\n}\n","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 <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href={logoLinkUrl} tabindex=\"0\">\n <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n </a>\n <div class=\"vertical-seperator\"></div>\n {this.headerTitle ? (\n <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 <div class=\"header-menus\">\n <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen}>\n <admiralty-icon icon-name={this.mobileMenuOpen ? faTimes.iconName : faBars.iconName}></admiralty-icon>\n </button>\n </div>\n <div class={{ 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen }}>\n <div role=\"navigation\" class=\"menu-items\">\n <slot name=\"items\"></slot>\n </div>\n <div role=\"navigation\" class=\"header-profile\">\n <slot name=\"profile\"></slot>\n </div>\n </div>\n </div>\n </nav>\n </div>\n );\n }\n}\n"],"mappings":"2GAAA,MAAMA,EAAY,q3IAClB,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,2CAAKC,MAAM,gBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAO,CAAE,qBAAsB,KAAM,oBAAqB9B,KAAKa,mBAClEe,EAAA,UAAAC,IAAA,2CAAQM,QAASC,GAAKpC,KAAKqB,mBAAkB,gBAAiBrB,KAAKsB,gBACjEM,EAAA,kBAAAC,IAAA,uDAA2B7B,KAAKsB,eAAiBe,EAAQC,SAAWC,EAAOD,aAG/EV,EAAA,OAAAC,IAAA,2CAAKC,MAAO,CAAE,gBAAiB,KAAM,oBAAqB9B,KAAKsB,iBAC7DM,EAAA,OAAAC,IAAA,2CAAKW,KAAK,aAAaV,MAAM,cAC3BF,EAAA,QAAAC,IAAA,2CAAMY,KAAK,WAEbb,EAAA,OAAAC,IAAA,2CAAKW,KAAK,aAAaV,MAAM,kBAC3BF,EAAA,QAAAC,IAAA,2CAAMY,KAAK,gB"}
|
|
@@ -16,7 +16,7 @@ const HeaderComponent = class {
|
|
|
16
16
|
this.headerTitleUrl = null;
|
|
17
17
|
this.logoLinkUrl = 'https://www.admiralty.co.uk/';
|
|
18
18
|
this.logoImgUrl = 'svg/Admiralty stacked logo.svg';
|
|
19
|
-
this.logoAltText = '
|
|
19
|
+
this.logoAltText = 'ADMIRALTY';
|
|
20
20
|
this.mobileMenuOpen = false;
|
|
21
21
|
this.displayHamburger = false;
|
|
22
22
|
}
|
|
@@ -46,7 +46,7 @@ const HeaderComponent = class {
|
|
|
46
46
|
}
|
|
47
47
|
render() {
|
|
48
48
|
const { logoAltText, logoLinkUrl, logoImgUrl, headerTitle, headerTitleUrl } = this;
|
|
49
|
-
return (index.h("div", { key: '
|
|
49
|
+
return (index.h("div", { key: '523f0bfbe0a3c952ce4f22d6d6ec6c467d62a614', class: "admiralty-header" }, index.h("nav", { key: 'b747f5497183c7f5a224546ca7427cbb781ef154', class: "header-menu" }, index.h("div", { key: 'bc32b2dc3c9abe57167cccecc0679dde9c9ccd02', class: "header-branding" }, index.h("a", { key: 'bb5fbfb514ab718f0bed5502922224976f210adc', class: "header-logo", href: logoLinkUrl, tabindex: "0" }, index.h("img", { key: '6a1f4c6437bc2ffaa3f485e35e874e3c828bab6f', class: "header-image", alt: logoAltText, src: logoImgUrl })), index.h("div", { key: '37b0721b3d0be63be2ba720a11252f20b71979ed', 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: 'c1438a622c3cfe06db803ab1653eee840a504099', class: "header-menus" }, index.h("div", { key: '8268c2fbba3ad50c7de2f8682b84c91ef8d43c5f', class: { 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger } }, index.h("button", { key: '0f621bfbf9aa847b19e63d940f963e0de4ede41b', onClick: _ => this.toggleMobileMenu(), "aria-expanded": this.mobileMenuOpen }, index.h("admiralty-icon", { key: '57c91f8fc6915aa2ad4b9abce2aca5b2ec987b45', "icon-name": this.mobileMenuOpen ? index$1.faTimes.iconName : index$1.faBars.iconName }))), index.h("div", { key: 'd6cafc6294e79bd52ba4934ddc7d559c5a880f30', class: { 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen } }, index.h("div", { key: '034fd5abc219383fed472c68edd99f0a8ae3e75f', role: "navigation", class: "menu-items" }, index.h("slot", { key: '2e0009c64f12390a6bd19a7ca3a1ab82ffe7e793', name: "items" })), index.h("div", { key: '366cc89a8cb913a4219440706eac0edb3d222b8e', role: "navigation", class: "header-profile" }, index.h("slot", { key: '98f4ef769ee5f07c653aa2b6ffc5b04f5c59905e', name: "profile" })))))));
|
|
50
50
|
}
|
|
51
51
|
get el() { return index.getElement(this); }
|
|
52
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-header.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,o3IAAo3I,CAAC;AACv4I,8BAAe,SAAS;;MCWX,eAAe;;;;;8BAUO,IAAI;2BAKP,8BAA8B;0BAK/B,gCAAgC;2BAK/B,
|
|
1
|
+
{"file":"admiralty-header.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,o3IAAo3I,CAAC;AACv4I,8BAAe,SAAS;;MCWX,eAAe;;;;;8BAUO,IAAI;2BAKP,8BAA8B;0BAK/B,gCAAgC;2BAK/B,WAAW;8BAOf,KAAK;gCAEH,KAAK;;IAIjC,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC;;YAEnCA,iBAAW,CAAC,IAAI,CAAC,CAAC;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YAC7B,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;IAED,mBAAmB;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kFAAkF,CAAC,CAAC;QAChI,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;KAC/C;IAEO,WAAW,CAAC,EAAc;QAChC,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9C;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;KAC5C;IAED,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAEnF,QACEC,kEAAK,KAAK,EAAC,kBAAkB,IAC3BA,kEAAK,KAAK,EAAC,aAAa,IACtBA,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,gEAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAC,GAAG,IACpDA,kEAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,GAAI,CAC7D,EACJA,kEAAK,KAAK,EAAC,oBAAoB,GAAO,EACrC,IAAI,CAAC,WAAW,IACfA,gBAAI,KAAK,EAAC,cAAc,IACtBA,eAAG,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAC,GAAG,IACvE,WAAW,CACV,CACD,IACH,IAAI,CACJ,EACNA,kEAAK,KAAK,EAAC,cAAc,IACvBA,kEAAK,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IACpFA,qEAAQ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,cAAc,IAC/EA,0FAA2B,IAAI,CAAC,cAAc,GAAGC,eAAO,CAAC,QAAQ,GAAGC,cAAM,CAAC,QAAQ,GAAmB,CAC/F,CACL,EACNF,kEAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,cAAc,EAAE,IAC7EA,kEAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,IACvCA,mEAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACNA,kEAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gBAAgB,IAC3CA,mEAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACF,EACN;KACH;;;;;;;","names":["forceUpdate","h","faTimes","faBars"],"sources":["src/components/header/header.scss?tag=admiralty-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n\n.admiralty-header {\n font-size: 18px;\n font-weight: typography.$font-weight-light;\n line-height: 24px;\n}\n\n.header-menu {\n border-bottom: 1px solid #d8d8d8;\n display: flex;\n flex-direction: row;\n background-color: #fff;\n height: 5em;\n min-height: 5em;\n position: relative;\n\n @include responsive.not-desktop {\n height: 56px;\n min-height: 56px;\n position: relative;\n }\n}\n\n.header-branding {\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n font-size: 18px;\n padding: 1.3em 0 1.3em 1.3em;\n\n @include responsive.not-desktop {\n padding-left: 12px;\n padding-top: 12px;\n padding-bottom: 12px;\n flex-grow: 1;\n }\n\n a.header-logo {\n background-color: transparent;\n color: colours.$colour-admiralty-blue;\n\n img {\n height: 100%;\n width: 9em;\n }\n\n &:focus {\n outline: 3px solid #fd0;\n outline-offset: 3px;\n }\n }\n\n .vertical-seperator {\n border-right: 1px solid colours.$colour-divider;\n margin-left: 24px;\n margin-right: 24px;\n @include responsive.not-desktop {\n margin-left: 12px;\n margin-right: 12px;\n }\n }\n\n .header-title {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n justify-content: center;\n font-size: 2em;\n line-height: 2em;\n margin-bottom: unset;\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 &:focus {\n outline: 3px solid #fd0;\n outline-offset: 3px;\n }\n }\n }\n}\n\n.header-menus {\n display: flex;\n justify-content: flex-end;\n\n .mobile-menu-toggle {\n display: none;\n\n @include responsive.not-desktop {\n &.display-hamburger {\n display: flex;\n }\n }\n flex-direction: column;\n justify-content: center;\n\n button {\n background-color: unset;\n\n admiralty-icon {\n font-size: 24px;\n font-weight: 900;\n padding: 12px;\n cursor: pointer;\n min-width: 24px;\n min-height: 24px;\n text-align: center;\n user-select: none;\n color: colours.$colour-admiralty-blue;\n }\n\n &:focus {\n outline: none;\n box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n }\n }\n }\n\n @include responsive.not-desktop {\n .menu-sections {\n display: none;\n\n min-height: 56px;\n position: relative;\n right: 0;\n\n position: absolute;\n top: 100%;\n z-index: 999;\n min-width: 100%;\n @include responsive.tablet-only {\n min-width: 50%;\n margin-left: 50%;\n }\n\n background-color: colours.$colour-white;\n border: 1px solid colours.$colour-bg-header;\n\n &.mob-menus-visible {\n display: block;\n }\n }\n }\n\n .menu-sections,\n .menu-items,\n .header-profile {\n @include responsive.desktop-only {\n display: flex;\n flex: 0;\n flex-direction: row;\n }\n }\n}\n","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 <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href={logoLinkUrl} tabindex=\"0\">\n <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n </a>\n <div class=\"vertical-seperator\"></div>\n {this.headerTitle ? (\n <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 <div class=\"header-menus\">\n <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen}>\n <admiralty-icon icon-name={this.mobileMenuOpen ? faTimes.iconName : faBars.iconName}></admiralty-icon>\n </button>\n </div>\n <div class={{ 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen }}>\n <div role=\"navigation\" class=\"menu-items\">\n <slot name=\"items\"></slot>\n </div>\n <div role=\"navigation\" class=\"header-profile\">\n <slot name=\"profile\"></slot>\n </div>\n </div>\n </div>\n </nav>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -10,7 +10,7 @@ export class HeaderComponent {
|
|
|
10
10
|
this.headerTitleUrl = null;
|
|
11
11
|
this.logoLinkUrl = 'https://www.admiralty.co.uk/';
|
|
12
12
|
this.logoImgUrl = 'svg/Admiralty stacked logo.svg';
|
|
13
|
-
this.logoAltText = '
|
|
13
|
+
this.logoAltText = 'ADMIRALTY';
|
|
14
14
|
this.mobileMenuOpen = false;
|
|
15
15
|
this.displayHamburger = false;
|
|
16
16
|
}
|
|
@@ -40,7 +40,7 @@ export class HeaderComponent {
|
|
|
40
40
|
}
|
|
41
41
|
render() {
|
|
42
42
|
const { logoAltText, logoLinkUrl, logoImgUrl, headerTitle, headerTitleUrl } = this;
|
|
43
|
-
return (h("div", { key: '
|
|
43
|
+
return (h("div", { key: '523f0bfbe0a3c952ce4f22d6d6ec6c467d62a614', class: "admiralty-header" }, h("nav", { key: 'b747f5497183c7f5a224546ca7427cbb781ef154', class: "header-menu" }, h("div", { key: 'bc32b2dc3c9abe57167cccecc0679dde9c9ccd02', class: "header-branding" }, h("a", { key: 'bb5fbfb514ab718f0bed5502922224976f210adc', class: "header-logo", href: logoLinkUrl, tabindex: "0" }, h("img", { key: '6a1f4c6437bc2ffaa3f485e35e874e3c828bab6f', class: "header-image", alt: logoAltText, src: logoImgUrl })), h("div", { key: '37b0721b3d0be63be2ba720a11252f20b71979ed', class: "vertical-seperator" }), this.headerTitle ? (h("h2", { class: "header-title" }, h("a", { onClick: ev => this.handleClick(ev), href: headerTitleUrl, tabindex: "0" }, headerTitle))) : null), h("div", { key: 'c1438a622c3cfe06db803ab1653eee840a504099', class: "header-menus" }, h("div", { key: '8268c2fbba3ad50c7de2f8682b84c91ef8d43c5f', class: { 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger } }, h("button", { key: '0f621bfbf9aa847b19e63d940f963e0de4ede41b', onClick: _ => this.toggleMobileMenu(), "aria-expanded": this.mobileMenuOpen }, h("admiralty-icon", { key: '57c91f8fc6915aa2ad4b9abce2aca5b2ec987b45', "icon-name": this.mobileMenuOpen ? faTimes.iconName : faBars.iconName }))), h("div", { key: 'd6cafc6294e79bd52ba4934ddc7d559c5a880f30', class: { 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen } }, h("div", { key: '034fd5abc219383fed472c68edd99f0a8ae3e75f', role: "navigation", class: "menu-items" }, h("slot", { key: '2e0009c64f12390a6bd19a7ca3a1ab82ffe7e793', name: "items" })), h("div", { key: '366cc89a8cb913a4219440706eac0edb3d222b8e', role: "navigation", class: "header-profile" }, h("slot", { key: '98f4ef769ee5f07c653aa2b6ffc5b04f5c59905e', name: "profile" })))))));
|
|
44
44
|
}
|
|
45
45
|
static get is() { return "admiralty-header"; }
|
|
46
46
|
static get encapsulation() { return "scoped"; }
|
|
@@ -143,7 +143,7 @@ export class HeaderComponent {
|
|
|
143
143
|
},
|
|
144
144
|
"attribute": "logo-alt-text",
|
|
145
145
|
"reflect": false,
|
|
146
|
-
"defaultValue": "'
|
|
146
|
+
"defaultValue": "'ADMIRALTY'"
|
|
147
147
|
}
|
|
148
148
|
};
|
|
149
149
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAgB,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAErG;;;GAGG;AAMH,MAAM,OAAO,eAAe;;;8BAUO,IAAI;2BAKP,8BAA8B;0BAK/B,gCAAgC;2BAK/B,
|
|
1
|
+
{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';\nimport { Component, Element, Prop, h, EventEmitter, Event, State, forceUpdate } from '@stencil/core';\n\n/**\n * @slot items - 'admiralty-header-menu-item menu-title' 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 <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href={logoLinkUrl} tabindex=\"0\">\n <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n </a>\n <div class=\"vertical-seperator\"></div>\n {this.headerTitle ? (\n <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 <div class=\"header-menus\">\n <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen}>\n <admiralty-icon icon-name={this.mobileMenuOpen ? faTimes.iconName : faBars.iconName}></admiralty-icon>\n </button>\n </div>\n <div class={{ 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen }}>\n <div role=\"navigation\" class=\"menu-items\">\n <slot name=\"items\"></slot>\n </div>\n <div role=\"navigation\" class=\"header-profile\">\n <slot name=\"profile\"></slot>\n </div>\n </div>\n </div>\n </nav>\n </div>\n );\n }\n}\n"]}
|
|
@@ -21,7 +21,7 @@ describe('admiralty-header', () => {
|
|
|
21
21
|
<nav class="header-menu">
|
|
22
22
|
<div class="header-branding">
|
|
23
23
|
<a class="header-logo" href="https://www.admiralty.co.uk/" tabindex="0">
|
|
24
|
-
<img alt="
|
|
24
|
+
<img alt="ADMIRALTY" class="header-image" src="svg/Admiralty stacked logo.svg">
|
|
25
25
|
</a>
|
|
26
26
|
<div class="vertical-seperator"></div>
|
|
27
27
|
</div>
|
|
@@ -53,7 +53,7 @@ describe('admiralty-header', () => {
|
|
|
53
53
|
<nav class="header-menu">
|
|
54
54
|
<div class="header-branding">
|
|
55
55
|
<a class="header-logo" href="https://www.admiralty.co.uk/" tabindex="0">
|
|
56
|
-
<img alt="
|
|
56
|
+
<img alt="ADMIRALTY" class="header-image" src="svg/Admiralty stacked logo.svg">
|
|
57
57
|
</a>
|
|
58
58
|
<div class="vertical-seperator"></div>
|
|
59
59
|
<h2 class="header-title">
|
|
@@ -90,7 +90,7 @@ describe('admiralty-header', () => {
|
|
|
90
90
|
<nav class="header-menu">
|
|
91
91
|
<div class="header-branding">
|
|
92
92
|
<a class="header-logo" href="http://www.example.com" tabindex="0">
|
|
93
|
-
<img alt="
|
|
93
|
+
<img alt="ADMIRALTY" class="header-image" src="svg/Admiralty stacked logo.svg">
|
|
94
94
|
</a>
|
|
95
95
|
<div class="vertical-seperator"></div>
|
|
96
96
|
<h2 class="header-title">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.spec.js","sourceRoot":"","sources":["../../../src/components/header/header.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { HeaderComponent } from './header';\n\nconst mutationObserverMock = jest.fn<MutationObserver, [MutationCallback]>().mockImplementation(() => {\n return {\n observe: jest.fn(),\n disconnect: jest.fn(),\n takeRecords: jest.fn(),\n };\n});\nglobal.MutationObserver = mutationObserverMock;\n\ndescribe('admiralty-header', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [HeaderComponent],\n html: `<admiralty-header></admiralty-header>`,\n });\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-header>\n <!---->\n <div class=\"admiralty-header\">\n <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href=\"https://www.admiralty.co.uk/\" tabindex=\"0\">\n <img alt=\"Admiralty Stacked Logo\" class=\"header-image\" src=\"svg/Admiralty stacked logo.svg\">\n </a>\n <div class=\"vertical-seperator\"></div>\n </div>\n <div class=\"header-menus\">\n <div class=\"mobile-menu-toggle\">\n <button>\n <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n </button>\n </div>\n <div class=\"menu-sections\">\n <div class=\"menu-items\" role=\"navigation\"></div>\n <div class=\"header-profile\" role=\"navigation\"></div>\n </div>\n </div>\n </nav>\n </div>\n </admiralty-header>\n `);\n });\n\n it('should render with title', async () => {\n const page = await newSpecPage({\n components: [HeaderComponent],\n html: `<admiralty-header header-title=\"Design System\"></admiralty-header>`,\n });\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-header header-title=\"Design System\">\n <!---->\n <div class=\"admiralty-header\">\n <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href=\"https://www.admiralty.co.uk/\" tabindex=\"0\">\n <img alt=\"Admiralty Stacked Logo\" class=\"header-image\" src=\"svg/Admiralty stacked logo.svg\">\n </a>\n <div class=\"vertical-seperator\"></div>\n <h2 class=\"header-title\">\n <a tabindex=\"0\">\n Design System\n </a>\n </h2>\n </div>\n <div class=\"header-menus\">\n <div class=\"mobile-menu-toggle\">\n <button>\n <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n </button>\n </div>\n <div class=\"menu-sections\">\n <div class=\"menu-items\" role=\"navigation\"></div>\n <div class=\"header-profile\" role=\"navigation\"></div>\n </div>\n </div>\n </nav>\n </div>\n </admiralty-header>\n `);\n });\n\n it('should render with no links', async () => {\n const page = await newSpecPage({\n components: [HeaderComponent],\n html: `<admiralty-header header-title=\"Design System\" logo-link-url=\"http://www.example.com\" header-title-url=\"null\"></admiralty-header>`,\n });\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-header header-title=\"Design System\" header-title-url=\"null\" logo-link-url=\"http://www.example.com\">\n <!---->\n <div class=\"admiralty-header\">\n <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n <img alt=\"Admiralty Stacked Logo\" class=\"header-image\" src=\"svg/Admiralty stacked logo.svg\">\n </a>\n <div class=\"vertical-seperator\"></div>\n <h2 class=\"header-title\">\n <a href=\"null\" tabindex=\"0\">\n Design System\n </a>\n </h2>\n </div>\n <div class=\"header-menus\">\n <div class=\"mobile-menu-toggle\">\n <button>\n <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n </button>\n </div>\n <div class=\"menu-sections\">\n <div class=\"menu-items\" role=\"navigation\"></div>\n <div class=\"header-profile\" role=\"navigation\"></div>\n </div>\n </div>\n </nav>\n </div>\n </admiralty-header>\n `);\n });\n\n it('should render signed in', async () => {\n const page = await newSpecPage({\n components: [HeaderComponent],\n html: `\n <admiralty-header logo-alt-text=\"Logo\" logo-link-url=\"http://www.example.com\" logo-img-url=\"logo.svg\" header-title-url=\"#\" header-title=\"Design System\">\n <admiralty-header-profile is-signed-in=\"true\" signed-in-text=\"Mr Admiral\" slot=\"profile\"></admiralty-header-profile>\n </admiralty-header>`,\n });\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-header header-title=\"Design System\" header-title-url=\"#\" logo-alt-text=\"Logo\" logo-img-url=\"logo.svg\" logo-link-url=\"http://www.example.com\">\n <!---->\n <div class=\"admiralty-header\">\n <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n <img alt=\"Logo\" class=\"header-image\" src=\"logo.svg\">\n </a>\n <div class=\"vertical-seperator\"></div>\n <h2 class=\"header-title\">\n <a href=\"#\" tabindex=\"0\">\n Design System\n </a>\n </h2>\n </div>\n <div class=\"header-menus\">\n <div class=\"display-hamburger mobile-menu-toggle\">\n <button>\n <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n </button>\n </div>\n <div class=\"menu-sections\">\n <div class=\"menu-items\" role=\"navigation\"></div>\n <div class=\"header-profile\" role=\"navigation\">\n <admiralty-header-profile is-signed-in=\"true\" signed-in-text=\"Mr Admiral\" slot=\"profile\"></admiralty-header-profile>\n </div>\n </div>\n </div>\n </nav>\n </div>\n </admiralty-header>\n `);\n });\n\n it('should render signed out', async () => {\n const page = await newSpecPage({\n components: [HeaderComponent],\n html: `\n <admiralty-header logo-alt-text=\"Logo\" logo-link-url=\"http://www.example.com\" logo-img-url=\"logo.svg\" header-title-url=\"#\" header-title=\"Design System\">\n <admiralty-header-profile is-signed-in=\"false\" signed-in-text=\"Mr Admiral\" slot=\"profile\"></admiralty-header-profile>\n </admiralty-header>`,\n });\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-header header-title=\"Design System\" header-title-url=\"#\" logo-alt-text=\"Logo\" logo-img-url=\"logo.svg\" logo-link-url=\"http://www.example.com\">\n <!---->\n <div class=\"admiralty-header\">\n <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n <img alt=\"Logo\" class=\"header-image\" src=\"logo.svg\">\n </a>\n <div class=\"vertical-seperator\"></div>\n <h2 class=\"header-title\">\n <a href=\"#\" tabindex=\"0\">\n Design System\n </a>\n </h2>\n </div>\n <div class=\"header-menus\">\n <div class=\"display-hamburger mobile-menu-toggle\">\n <button>\n <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n </button>\n </div>\n <div class=\"menu-sections\">\n <div class=\"menu-items\" role=\"navigation\"></div>\n <div class=\"header-profile\" role=\"navigation\">\n <admiralty-header-profile is-signed-in=\"false\" signed-in-text=\"Mr Admiral\" slot=\"profile\"></admiralty-header-profile>\n </div>\n </div>\n </div>\n </nav>\n </div>\n </admiralty-header>\n `);\n });\n\n it('should render menu items (no sub-menus)', async () => {\n const page = await newSpecPage({\n components: [HeaderComponent],\n html: `\n <admiralty-header logo-alt-text=\"Logo\" logo-link-url=\"http://www.example.com\" logo-img-url=\"logo.svg\" header-title-url=\"#\" header-title=\"Design System\">\n <admiralty-header-menu-item menu-title=\"Item 1\" active=\"false\" slot=\"items\"></admiralty-header-menu-item>\n <admiralty-header-menu-item menu-title=\"Item 2\" active=\"false\" slot=\"items\"></admiralty-header-menu-item>\n </admiralty-header>`,\n });\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-header header-title=\"Design System\" header-title-url=\"#\" logo-alt-text=\"Logo\" logo-img-url=\"logo.svg\" logo-link-url=\"http://www.example.com\">\n <!---->\n <div class=\"admiralty-header\">\n <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n <img alt=\"Logo\" class=\"header-image\" src=\"logo.svg\">\n </a>\n <div class=\"vertical-seperator\"></div>\n <h2 class=\"header-title\">\n <a href=\"#\" tabindex=\"0\">\n Design System\n </a>\n </h2>\n </div>\n <div class=\"header-menus\">\n <div class=\"display-hamburger mobile-menu-toggle\">\n <button>\n <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n </button>\n </div>\n <div class=\"menu-sections\">\n <div class=\"menu-items\" role=\"navigation\">\n <admiralty-header-menu-item active=\"false\" menu-title=\"Item 1\" slot=\"items\"></admiralty-header-menu-item>\n <admiralty-header-menu-item active=\"false\" menu-title=\"Item 2\" slot=\"items\"></admiralty-header-menu-item>\n </div>\n <div class=\"header-profile\" role=\"navigation\"></div>\n </div>\n </div>\n </nav>\n </div>\n </admiralty-header>\n `);\n });\n\n it('should render menu items (with sub-menus)', async () => {\n const page = await newSpecPage({\n components: [HeaderComponent],\n html: `\n <admiralty-header logo-alt-text=\"Logo\" logo-link-url=\"http://www.example.com\" logo-img-url=\"logo.svg\" header-title-url=\"#\" header-title=\"Design System\">\n <admiralty-header-menu-item menu-title=\"Item 1\" active=\"false\" slot=\"items\">\n <admiralty-header-sub-menu-item menu-title=\"sub item 1\"></admiralty-header-sub-menu-item>\n <admiralty-header-sub-menu-item menu-title=\"sub item 2\"></admiralty-header-sub-menu-item>\n </admiralty-header-menu-item>\n <admiralty-header-menu-item menu-title=\"Item 2\" active=\"false\" slot=\"items\"></admiralty-header-menu-item>\n <admiralty-header-menu-item menu-title=\"Item 3\" active=\"false\" slot=\"items\">\n <admiralty-header-sub-menu-item menu-title=\"sub item 3\"></admiralty-header-sub-menu-item>\n </admiralty-header-menu-item>\n </admiralty-header>`,\n });\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-header header-title=\"Design System\" header-title-url=\"#\" logo-alt-text=\"Logo\" logo-img-url=\"logo.svg\" logo-link-url=\"http://www.example.com\">\n <!---->\n <div class=\"admiralty-header\">\n <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n <img alt=\"Logo\" class=\"header-image\" src=\"logo.svg\">\n </a>\n <div class=\"vertical-seperator\"></div>\n <h2 class=\"header-title\">\n <a href=\"#\" tabindex=\"0\">\n Design System\n </a>\n </h2>\n </div>\n <div class=\"header-menus\">\n <div class=\"display-hamburger mobile-menu-toggle\">\n <button>\n <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n </button>\n </div>\n <div class=\"menu-sections\">\n <div class=\"menu-items\" role=\"navigation\">\n <admiralty-header-menu-item active=\"false\" menu-title=\"Item 1\" slot=\"items\">\n <admiralty-header-sub-menu-item menu-title=\"sub item 1\"></admiralty-header-sub-menu-item>\n <admiralty-header-sub-menu-item menu-title=\"sub item 2\"></admiralty-header-sub-menu-item>\n </admiralty-header-menu-item>\n <admiralty-header-menu-item active=\"false\" menu-title=\"Item 2\" slot=\"items\"></admiralty-header-menu-item>\n <admiralty-header-menu-item active=\"false\" menu-title=\"Item 3\" slot=\"items\">\n <admiralty-header-sub-menu-item menu-title=\"sub item 3\"></admiralty-header-sub-menu-item>\n </admiralty-header-menu-item>\n </div>\n <div class=\"header-profile\" role=\"navigation\"></div>\n </div>\n </div>\n </nav>\n </div>\n </admiralty-header>\n `);\n });\n});\n"]}
|
|
1
|
+
{"version":3,"file":"header.spec.js","sourceRoot":"","sources":["../../../src/components/header/header.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { HeaderComponent } from './header';\n\nconst mutationObserverMock = jest.fn<MutationObserver, [MutationCallback]>().mockImplementation(() => {\n return {\n observe: jest.fn(),\n disconnect: jest.fn(),\n takeRecords: jest.fn(),\n };\n});\nglobal.MutationObserver = mutationObserverMock;\n\ndescribe('admiralty-header', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [HeaderComponent],\n html: `<admiralty-header></admiralty-header>`,\n });\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-header>\n <!---->\n <div class=\"admiralty-header\">\n <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href=\"https://www.admiralty.co.uk/\" tabindex=\"0\">\n <img alt=\"ADMIRALTY\" class=\"header-image\" src=\"svg/Admiralty stacked logo.svg\">\n </a>\n <div class=\"vertical-seperator\"></div>\n </div>\n <div class=\"header-menus\">\n <div class=\"mobile-menu-toggle\">\n <button>\n <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n </button>\n </div>\n <div class=\"menu-sections\">\n <div class=\"menu-items\" role=\"navigation\"></div>\n <div class=\"header-profile\" role=\"navigation\"></div>\n </div>\n </div>\n </nav>\n </div>\n </admiralty-header>\n `);\n });\n\n it('should render with title', async () => {\n const page = await newSpecPage({\n components: [HeaderComponent],\n html: `<admiralty-header header-title=\"Design System\"></admiralty-header>`,\n });\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-header header-title=\"Design System\">\n <!---->\n <div class=\"admiralty-header\">\n <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href=\"https://www.admiralty.co.uk/\" tabindex=\"0\">\n <img alt=\"ADMIRALTY\" class=\"header-image\" src=\"svg/Admiralty stacked logo.svg\">\n </a>\n <div class=\"vertical-seperator\"></div>\n <h2 class=\"header-title\">\n <a tabindex=\"0\">\n Design System\n </a>\n </h2>\n </div>\n <div class=\"header-menus\">\n <div class=\"mobile-menu-toggle\">\n <button>\n <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n </button>\n </div>\n <div class=\"menu-sections\">\n <div class=\"menu-items\" role=\"navigation\"></div>\n <div class=\"header-profile\" role=\"navigation\"></div>\n </div>\n </div>\n </nav>\n </div>\n </admiralty-header>\n `);\n });\n\n it('should render with no links', async () => {\n const page = await newSpecPage({\n components: [HeaderComponent],\n html: `<admiralty-header header-title=\"Design System\" logo-link-url=\"http://www.example.com\" header-title-url=\"null\"></admiralty-header>`,\n });\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-header header-title=\"Design System\" header-title-url=\"null\" logo-link-url=\"http://www.example.com\">\n <!---->\n <div class=\"admiralty-header\">\n <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n <img alt=\"ADMIRALTY\" class=\"header-image\" src=\"svg/Admiralty stacked logo.svg\">\n </a>\n <div class=\"vertical-seperator\"></div>\n <h2 class=\"header-title\">\n <a href=\"null\" tabindex=\"0\">\n Design System\n </a>\n </h2>\n </div>\n <div class=\"header-menus\">\n <div class=\"mobile-menu-toggle\">\n <button>\n <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n </button>\n </div>\n <div class=\"menu-sections\">\n <div class=\"menu-items\" role=\"navigation\"></div>\n <div class=\"header-profile\" role=\"navigation\"></div>\n </div>\n </div>\n </nav>\n </div>\n </admiralty-header>\n `);\n });\n\n it('should render signed in', async () => {\n const page = await newSpecPage({\n components: [HeaderComponent],\n html: `\n <admiralty-header logo-alt-text=\"Logo\" logo-link-url=\"http://www.example.com\" logo-img-url=\"logo.svg\" header-title-url=\"#\" header-title=\"Design System\">\n <admiralty-header-profile is-signed-in=\"true\" signed-in-text=\"Mr Admiral\" slot=\"profile\"></admiralty-header-profile>\n </admiralty-header>`,\n });\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-header header-title=\"Design System\" header-title-url=\"#\" logo-alt-text=\"Logo\" logo-img-url=\"logo.svg\" logo-link-url=\"http://www.example.com\">\n <!---->\n <div class=\"admiralty-header\">\n <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n <img alt=\"Logo\" class=\"header-image\" src=\"logo.svg\">\n </a>\n <div class=\"vertical-seperator\"></div>\n <h2 class=\"header-title\">\n <a href=\"#\" tabindex=\"0\">\n Design System\n </a>\n </h2>\n </div>\n <div class=\"header-menus\">\n <div class=\"display-hamburger mobile-menu-toggle\">\n <button>\n <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n </button>\n </div>\n <div class=\"menu-sections\">\n <div class=\"menu-items\" role=\"navigation\"></div>\n <div class=\"header-profile\" role=\"navigation\">\n <admiralty-header-profile is-signed-in=\"true\" signed-in-text=\"Mr Admiral\" slot=\"profile\"></admiralty-header-profile>\n </div>\n </div>\n </div>\n </nav>\n </div>\n </admiralty-header>\n `);\n });\n\n it('should render signed out', async () => {\n const page = await newSpecPage({\n components: [HeaderComponent],\n html: `\n <admiralty-header logo-alt-text=\"Logo\" logo-link-url=\"http://www.example.com\" logo-img-url=\"logo.svg\" header-title-url=\"#\" header-title=\"Design System\">\n <admiralty-header-profile is-signed-in=\"false\" signed-in-text=\"Mr Admiral\" slot=\"profile\"></admiralty-header-profile>\n </admiralty-header>`,\n });\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-header header-title=\"Design System\" header-title-url=\"#\" logo-alt-text=\"Logo\" logo-img-url=\"logo.svg\" logo-link-url=\"http://www.example.com\">\n <!---->\n <div class=\"admiralty-header\">\n <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n <img alt=\"Logo\" class=\"header-image\" src=\"logo.svg\">\n </a>\n <div class=\"vertical-seperator\"></div>\n <h2 class=\"header-title\">\n <a href=\"#\" tabindex=\"0\">\n Design System\n </a>\n </h2>\n </div>\n <div class=\"header-menus\">\n <div class=\"display-hamburger mobile-menu-toggle\">\n <button>\n <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n </button>\n </div>\n <div class=\"menu-sections\">\n <div class=\"menu-items\" role=\"navigation\"></div>\n <div class=\"header-profile\" role=\"navigation\">\n <admiralty-header-profile is-signed-in=\"false\" signed-in-text=\"Mr Admiral\" slot=\"profile\"></admiralty-header-profile>\n </div>\n </div>\n </div>\n </nav>\n </div>\n </admiralty-header>\n `);\n });\n\n it('should render menu items (no sub-menus)', async () => {\n const page = await newSpecPage({\n components: [HeaderComponent],\n html: `\n <admiralty-header logo-alt-text=\"Logo\" logo-link-url=\"http://www.example.com\" logo-img-url=\"logo.svg\" header-title-url=\"#\" header-title=\"Design System\">\n <admiralty-header-menu-item menu-title=\"Item 1\" active=\"false\" slot=\"items\"></admiralty-header-menu-item>\n <admiralty-header-menu-item menu-title=\"Item 2\" active=\"false\" slot=\"items\"></admiralty-header-menu-item>\n </admiralty-header>`,\n });\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-header header-title=\"Design System\" header-title-url=\"#\" logo-alt-text=\"Logo\" logo-img-url=\"logo.svg\" logo-link-url=\"http://www.example.com\">\n <!---->\n <div class=\"admiralty-header\">\n <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n <img alt=\"Logo\" class=\"header-image\" src=\"logo.svg\">\n </a>\n <div class=\"vertical-seperator\"></div>\n <h2 class=\"header-title\">\n <a href=\"#\" tabindex=\"0\">\n Design System\n </a>\n </h2>\n </div>\n <div class=\"header-menus\">\n <div class=\"display-hamburger mobile-menu-toggle\">\n <button>\n <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n </button>\n </div>\n <div class=\"menu-sections\">\n <div class=\"menu-items\" role=\"navigation\">\n <admiralty-header-menu-item active=\"false\" menu-title=\"Item 1\" slot=\"items\"></admiralty-header-menu-item>\n <admiralty-header-menu-item active=\"false\" menu-title=\"Item 2\" slot=\"items\"></admiralty-header-menu-item>\n </div>\n <div class=\"header-profile\" role=\"navigation\"></div>\n </div>\n </div>\n </nav>\n </div>\n </admiralty-header>\n `);\n });\n\n it('should render menu items (with sub-menus)', async () => {\n const page = await newSpecPage({\n components: [HeaderComponent],\n html: `\n <admiralty-header logo-alt-text=\"Logo\" logo-link-url=\"http://www.example.com\" logo-img-url=\"logo.svg\" header-title-url=\"#\" header-title=\"Design System\">\n <admiralty-header-menu-item menu-title=\"Item 1\" active=\"false\" slot=\"items\">\n <admiralty-header-sub-menu-item menu-title=\"sub item 1\"></admiralty-header-sub-menu-item>\n <admiralty-header-sub-menu-item menu-title=\"sub item 2\"></admiralty-header-sub-menu-item>\n </admiralty-header-menu-item>\n <admiralty-header-menu-item menu-title=\"Item 2\" active=\"false\" slot=\"items\"></admiralty-header-menu-item>\n <admiralty-header-menu-item menu-title=\"Item 3\" active=\"false\" slot=\"items\">\n <admiralty-header-sub-menu-item menu-title=\"sub item 3\"></admiralty-header-sub-menu-item>\n </admiralty-header-menu-item>\n </admiralty-header>`,\n });\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-header header-title=\"Design System\" header-title-url=\"#\" logo-alt-text=\"Logo\" logo-img-url=\"logo.svg\" logo-link-url=\"http://www.example.com\">\n <!---->\n <div class=\"admiralty-header\">\n <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href=\"http://www.example.com\" tabindex=\"0\">\n <img alt=\"Logo\" class=\"header-image\" src=\"logo.svg\">\n </a>\n <div class=\"vertical-seperator\"></div>\n <h2 class=\"header-title\">\n <a href=\"#\" tabindex=\"0\">\n Design System\n </a>\n </h2>\n </div>\n <div class=\"header-menus\">\n <div class=\"display-hamburger mobile-menu-toggle\">\n <button>\n <admiralty-icon icon-name=\"bars\"></admiralty-icon>\n </button>\n </div>\n <div class=\"menu-sections\">\n <div class=\"menu-items\" role=\"navigation\">\n <admiralty-header-menu-item active=\"false\" menu-title=\"Item 1\" slot=\"items\">\n <admiralty-header-sub-menu-item menu-title=\"sub item 1\"></admiralty-header-sub-menu-item>\n <admiralty-header-sub-menu-item menu-title=\"sub item 2\"></admiralty-header-sub-menu-item>\n </admiralty-header-menu-item>\n <admiralty-header-menu-item active=\"false\" menu-title=\"Item 2\" slot=\"items\"></admiralty-header-menu-item>\n <admiralty-header-menu-item active=\"false\" menu-title=\"Item 3\" slot=\"items\">\n <admiralty-header-sub-menu-item menu-title=\"sub item 3\"></admiralty-header-sub-menu-item>\n </admiralty-header-menu-item>\n </div>\n <div class=\"header-profile\" role=\"navigation\"></div>\n </div>\n </div>\n </nav>\n </div>\n </admiralty-header>\n `);\n });\n});\n"]}
|
|
@@ -13,7 +13,7 @@ const HeaderComponent = /*@__PURE__*/ proxyCustomElement(class HeaderComponent e
|
|
|
13
13
|
this.headerTitleUrl = null;
|
|
14
14
|
this.logoLinkUrl = 'https://www.admiralty.co.uk/';
|
|
15
15
|
this.logoImgUrl = 'svg/Admiralty stacked logo.svg';
|
|
16
|
-
this.logoAltText = '
|
|
16
|
+
this.logoAltText = 'ADMIRALTY';
|
|
17
17
|
this.mobileMenuOpen = false;
|
|
18
18
|
this.displayHamburger = false;
|
|
19
19
|
}
|
|
@@ -43,7 +43,7 @@ const HeaderComponent = /*@__PURE__*/ proxyCustomElement(class HeaderComponent e
|
|
|
43
43
|
}
|
|
44
44
|
render() {
|
|
45
45
|
const { logoAltText, logoLinkUrl, logoImgUrl, headerTitle, headerTitleUrl } = this;
|
|
46
|
-
return (h("div", { key: '
|
|
46
|
+
return (h("div", { key: '523f0bfbe0a3c952ce4f22d6d6ec6c467d62a614', class: "admiralty-header" }, h("nav", { key: 'b747f5497183c7f5a224546ca7427cbb781ef154', class: "header-menu" }, h("div", { key: 'bc32b2dc3c9abe57167cccecc0679dde9c9ccd02', class: "header-branding" }, h("a", { key: 'bb5fbfb514ab718f0bed5502922224976f210adc', class: "header-logo", href: logoLinkUrl, tabindex: "0" }, h("img", { key: '6a1f4c6437bc2ffaa3f485e35e874e3c828bab6f', class: "header-image", alt: logoAltText, src: logoImgUrl })), h("div", { key: '37b0721b3d0be63be2ba720a11252f20b71979ed', class: "vertical-seperator" }), this.headerTitle ? (h("h2", { class: "header-title" }, h("a", { onClick: ev => this.handleClick(ev), href: headerTitleUrl, tabindex: "0" }, headerTitle))) : null), h("div", { key: 'c1438a622c3cfe06db803ab1653eee840a504099', class: "header-menus" }, h("div", { key: '8268c2fbba3ad50c7de2f8682b84c91ef8d43c5f', class: { 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger } }, h("button", { key: '0f621bfbf9aa847b19e63d940f963e0de4ede41b', onClick: _ => this.toggleMobileMenu(), "aria-expanded": this.mobileMenuOpen }, h("admiralty-icon", { key: '57c91f8fc6915aa2ad4b9abce2aca5b2ec987b45', "icon-name": this.mobileMenuOpen ? faTimes.iconName : faBars.iconName }))), h("div", { key: 'd6cafc6294e79bd52ba4934ddc7d559c5a880f30', class: { 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen } }, h("div", { key: '034fd5abc219383fed472c68edd99f0a8ae3e75f', role: "navigation", class: "menu-items" }, h("slot", { key: '2e0009c64f12390a6bd19a7ca3a1ab82ffe7e793', name: "items" })), h("div", { key: '366cc89a8cb913a4219440706eac0edb3d222b8e', role: "navigation", class: "header-profile" }, h("slot", { key: '98f4ef769ee5f07c653aa2b6ffc5b04f5c59905e', name: "profile" })))))));
|
|
47
47
|
}
|
|
48
48
|
get el() { return this; }
|
|
49
49
|
static get style() { return AdmiraltyHeaderStyle0; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-header.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,o3IAAo3I,CAAC;AACv4I,8BAAe,SAAS;;MCWX,eAAe;;;;;;8BAUO,IAAI;2BAKP,8BAA8B;0BAK/B,gCAAgC;2BAK/B,
|
|
1
|
+
{"file":"admiralty-header.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,o3IAAo3I,CAAC;AACv4I,8BAAe,SAAS;;MCWX,eAAe;;;;;;8BAUO,IAAI;2BAKP,8BAA8B;0BAK/B,gCAAgC;2BAK/B,WAAW;8BAOf,KAAK;gCAEH,KAAK;;IAIjC,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC;;YAEnC,WAAW,CAAC,IAAI,CAAC,CAAC;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YAC7B,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;IAED,mBAAmB;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kFAAkF,CAAC,CAAC;QAChI,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;KAC/C;IAEO,WAAW,CAAC,EAAc;QAChC,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9C;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;KAC5C;IAED,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAEnF,QACE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,aAAa,IACtB,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,0DAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAC,GAAG,IACpD,4DAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,GAAI,CAC7D,EACJ,4DAAK,KAAK,EAAC,oBAAoB,GAAO,EACrC,IAAI,CAAC,WAAW,IACf,UAAI,KAAK,EAAC,cAAc,IACtB,SAAG,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAC,GAAG,IACvE,WAAW,CACV,CACD,IACH,IAAI,CACJ,EACN,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IACpF,+DAAQ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,cAAc,IAC/E,oFAA2B,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAmB,CAC/F,CACL,EACN,4DAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,cAAc,EAAE,IAC7E,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,IACvC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gBAAgB,IAC3C,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/header/header.scss?tag=admiralty-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n\n.admiralty-header {\n font-size: 18px;\n font-weight: typography.$font-weight-light;\n line-height: 24px;\n}\n\n.header-menu {\n border-bottom: 1px solid #d8d8d8;\n display: flex;\n flex-direction: row;\n background-color: #fff;\n height: 5em;\n min-height: 5em;\n position: relative;\n\n @include responsive.not-desktop {\n height: 56px;\n min-height: 56px;\n position: relative;\n }\n}\n\n.header-branding {\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n font-size: 18px;\n padding: 1.3em 0 1.3em 1.3em;\n\n @include responsive.not-desktop {\n padding-left: 12px;\n padding-top: 12px;\n padding-bottom: 12px;\n flex-grow: 1;\n }\n\n a.header-logo {\n background-color: transparent;\n color: colours.$colour-admiralty-blue;\n\n img {\n height: 100%;\n width: 9em;\n }\n\n &:focus {\n outline: 3px solid #fd0;\n outline-offset: 3px;\n }\n }\n\n .vertical-seperator {\n border-right: 1px solid colours.$colour-divider;\n margin-left: 24px;\n margin-right: 24px;\n @include responsive.not-desktop {\n margin-left: 12px;\n margin-right: 12px;\n }\n }\n\n .header-title {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n justify-content: center;\n font-size: 2em;\n line-height: 2em;\n margin-bottom: unset;\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 &:focus {\n outline: 3px solid #fd0;\n outline-offset: 3px;\n }\n }\n }\n}\n\n.header-menus {\n display: flex;\n justify-content: flex-end;\n\n .mobile-menu-toggle {\n display: none;\n\n @include responsive.not-desktop {\n &.display-hamburger {\n display: flex;\n }\n }\n flex-direction: column;\n justify-content: center;\n\n button {\n background-color: unset;\n\n admiralty-icon {\n font-size: 24px;\n font-weight: 900;\n padding: 12px;\n cursor: pointer;\n min-width: 24px;\n min-height: 24px;\n text-align: center;\n user-select: none;\n color: colours.$colour-admiralty-blue;\n }\n\n &:focus {\n outline: none;\n box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n }\n }\n }\n\n @include responsive.not-desktop {\n .menu-sections {\n display: none;\n\n min-height: 56px;\n position: relative;\n right: 0;\n\n position: absolute;\n top: 100%;\n z-index: 999;\n min-width: 100%;\n @include responsive.tablet-only {\n min-width: 50%;\n margin-left: 50%;\n }\n\n background-color: colours.$colour-white;\n border: 1px solid colours.$colour-bg-header;\n\n &.mob-menus-visible {\n display: block;\n }\n }\n }\n\n .menu-sections,\n .menu-items,\n .header-profile {\n @include responsive.desktop-only {\n display: flex;\n flex: 0;\n flex-direction: row;\n }\n }\n}\n","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 <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href={logoLinkUrl} tabindex=\"0\">\n <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n </a>\n <div class=\"vertical-seperator\"></div>\n {this.headerTitle ? (\n <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 <div class=\"header-menus\">\n <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen}>\n <admiralty-icon icon-name={this.mobileMenuOpen ? faTimes.iconName : faBars.iconName}></admiralty-icon>\n </button>\n </div>\n <div class={{ 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen }}>\n <div role=\"navigation\" class=\"menu-items\">\n <slot name=\"items\"></slot>\n </div>\n <div role=\"navigation\" class=\"header-profile\">\n <slot name=\"profile\"></slot>\n </div>\n </div>\n </div>\n </nav>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -12,7 +12,7 @@ const HeaderComponent = class {
|
|
|
12
12
|
this.headerTitleUrl = null;
|
|
13
13
|
this.logoLinkUrl = 'https://www.admiralty.co.uk/';
|
|
14
14
|
this.logoImgUrl = 'svg/Admiralty stacked logo.svg';
|
|
15
|
-
this.logoAltText = '
|
|
15
|
+
this.logoAltText = 'ADMIRALTY';
|
|
16
16
|
this.mobileMenuOpen = false;
|
|
17
17
|
this.displayHamburger = false;
|
|
18
18
|
}
|
|
@@ -42,7 +42,7 @@ const HeaderComponent = class {
|
|
|
42
42
|
}
|
|
43
43
|
render() {
|
|
44
44
|
const { logoAltText, logoLinkUrl, logoImgUrl, headerTitle, headerTitleUrl } = this;
|
|
45
|
-
return (h("div", { key: '
|
|
45
|
+
return (h("div", { key: '523f0bfbe0a3c952ce4f22d6d6ec6c467d62a614', class: "admiralty-header" }, h("nav", { key: 'b747f5497183c7f5a224546ca7427cbb781ef154', class: "header-menu" }, h("div", { key: 'bc32b2dc3c9abe57167cccecc0679dde9c9ccd02', class: "header-branding" }, h("a", { key: 'bb5fbfb514ab718f0bed5502922224976f210adc', class: "header-logo", href: logoLinkUrl, tabindex: "0" }, h("img", { key: '6a1f4c6437bc2ffaa3f485e35e874e3c828bab6f', class: "header-image", alt: logoAltText, src: logoImgUrl })), h("div", { key: '37b0721b3d0be63be2ba720a11252f20b71979ed', class: "vertical-seperator" }), this.headerTitle ? (h("h2", { class: "header-title" }, h("a", { onClick: ev => this.handleClick(ev), href: headerTitleUrl, tabindex: "0" }, headerTitle))) : null), h("div", { key: 'c1438a622c3cfe06db803ab1653eee840a504099', class: "header-menus" }, h("div", { key: '8268c2fbba3ad50c7de2f8682b84c91ef8d43c5f', class: { 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger } }, h("button", { key: '0f621bfbf9aa847b19e63d940f963e0de4ede41b', onClick: _ => this.toggleMobileMenu(), "aria-expanded": this.mobileMenuOpen }, h("admiralty-icon", { key: '57c91f8fc6915aa2ad4b9abce2aca5b2ec987b45', "icon-name": this.mobileMenuOpen ? faTimes.iconName : faBars.iconName }))), h("div", { key: 'd6cafc6294e79bd52ba4934ddc7d559c5a880f30', class: { 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen } }, h("div", { key: '034fd5abc219383fed472c68edd99f0a8ae3e75f', role: "navigation", class: "menu-items" }, h("slot", { key: '2e0009c64f12390a6bd19a7ca3a1ab82ffe7e793', name: "items" })), h("div", { key: '366cc89a8cb913a4219440706eac0edb3d222b8e', role: "navigation", class: "header-profile" }, h("slot", { key: '98f4ef769ee5f07c653aa2b6ffc5b04f5c59905e', name: "profile" })))))));
|
|
46
46
|
}
|
|
47
47
|
get el() { return getElement(this); }
|
|
48
48
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-header.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,o3IAAo3I,CAAC;AACv4I,8BAAe,SAAS;;MCWX,eAAe;;;;;8BAUO,IAAI;2BAKP,8BAA8B;0BAK/B,gCAAgC;2BAK/B,
|
|
1
|
+
{"file":"admiralty-header.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,o3IAAo3I,CAAC;AACv4I,8BAAe,SAAS;;MCWX,eAAe;;;;;8BAUO,IAAI;2BAKP,8BAA8B;0BAK/B,gCAAgC;2BAK/B,WAAW;8BAOf,KAAK;gCAEH,KAAK;;IAIjC,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC;;YAEnC,WAAW,CAAC,IAAI,CAAC,CAAC;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YAC7B,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;IAED,mBAAmB;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kFAAkF,CAAC,CAAC;QAChI,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;KAC/C;IAEO,WAAW,CAAC,EAAc;QAChC,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9C;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;KAC5C;IAED,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAEnF,QACE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,aAAa,IACtB,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,0DAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAC,GAAG,IACpD,4DAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,UAAU,GAAI,CAC7D,EACJ,4DAAK,KAAK,EAAC,oBAAoB,GAAO,EACrC,IAAI,CAAC,WAAW,IACf,UAAI,KAAK,EAAC,cAAc,IACtB,SAAG,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAC,GAAG,IACvE,WAAW,CACV,CACD,IACH,IAAI,CACJ,EACN,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,EAAE,IACpF,+DAAQ,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,cAAc,IAC/E,oFAA2B,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,GAAmB,CAC/F,CACL,EACN,4DAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,CAAC,cAAc,EAAE,IAC7E,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,YAAY,IACvC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,EACN,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,gBAAgB,IAC3C,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACF,CACF,EACN;KACH;;;;;;;","names":[],"sources":["src/components/header/header.scss?tag=admiralty-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n\n.admiralty-header {\n font-size: 18px;\n font-weight: typography.$font-weight-light;\n line-height: 24px;\n}\n\n.header-menu {\n border-bottom: 1px solid #d8d8d8;\n display: flex;\n flex-direction: row;\n background-color: #fff;\n height: 5em;\n min-height: 5em;\n position: relative;\n\n @include responsive.not-desktop {\n height: 56px;\n min-height: 56px;\n position: relative;\n }\n}\n\n.header-branding {\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n font-size: 18px;\n padding: 1.3em 0 1.3em 1.3em;\n\n @include responsive.not-desktop {\n padding-left: 12px;\n padding-top: 12px;\n padding-bottom: 12px;\n flex-grow: 1;\n }\n\n a.header-logo {\n background-color: transparent;\n color: colours.$colour-admiralty-blue;\n\n img {\n height: 100%;\n width: 9em;\n }\n\n &:focus {\n outline: 3px solid #fd0;\n outline-offset: 3px;\n }\n }\n\n .vertical-seperator {\n border-right: 1px solid colours.$colour-divider;\n margin-left: 24px;\n margin-right: 24px;\n @include responsive.not-desktop {\n margin-left: 12px;\n margin-right: 12px;\n }\n }\n\n .header-title {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n justify-content: center;\n font-size: 2em;\n line-height: 2em;\n margin-bottom: unset;\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 &:focus {\n outline: 3px solid #fd0;\n outline-offset: 3px;\n }\n }\n }\n}\n\n.header-menus {\n display: flex;\n justify-content: flex-end;\n\n .mobile-menu-toggle {\n display: none;\n\n @include responsive.not-desktop {\n &.display-hamburger {\n display: flex;\n }\n }\n flex-direction: column;\n justify-content: center;\n\n button {\n background-color: unset;\n\n admiralty-icon {\n font-size: 24px;\n font-weight: 900;\n padding: 12px;\n cursor: pointer;\n min-width: 24px;\n min-height: 24px;\n text-align: center;\n user-select: none;\n color: colours.$colour-admiralty-blue;\n }\n\n &:focus {\n outline: none;\n box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n }\n }\n }\n\n @include responsive.not-desktop {\n .menu-sections {\n display: none;\n\n min-height: 56px;\n position: relative;\n right: 0;\n\n position: absolute;\n top: 100%;\n z-index: 999;\n min-width: 100%;\n @include responsive.tablet-only {\n min-width: 50%;\n margin-left: 50%;\n }\n\n background-color: colours.$colour-white;\n border: 1px solid colours.$colour-bg-header;\n\n &.mob-menus-visible {\n display: block;\n }\n }\n }\n\n .menu-sections,\n .menu-items,\n .header-profile {\n @include responsive.desktop-only {\n display: flex;\n flex: 0;\n flex-direction: row;\n }\n }\n}\n","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 <nav class=\"header-menu\">\n <div class=\"header-branding\">\n <a class=\"header-logo\" href={logoLinkUrl} tabindex=\"0\">\n <img class=\"header-image\" alt={logoAltText} src={logoImgUrl} />\n </a>\n <div class=\"vertical-seperator\"></div>\n {this.headerTitle ? (\n <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 <div class=\"header-menus\">\n <div class={{ 'mobile-menu-toggle': true, 'display-hamburger': this.displayHamburger }}>\n <button onClick={_ => this.toggleMobileMenu()} aria-expanded={this.mobileMenuOpen}>\n <admiralty-icon icon-name={this.mobileMenuOpen ? faTimes.iconName : faBars.iconName}></admiralty-icon>\n </button>\n </div>\n <div class={{ 'menu-sections': true, 'mob-menus-visible': this.mobileMenuOpen }}>\n <div role=\"navigation\" class=\"menu-items\">\n <slot name=\"items\"></slot>\n </div>\n <div role=\"navigation\" class=\"header-profile\">\n <slot name=\"profile\"></slot>\n </div>\n </div>\n </div>\n </nav>\n </div>\n );\n }\n}\n"],"version":3}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ukho/admiralty-core",
|
|
3
|
-
"version": "0.23.
|
|
3
|
+
"version": "0.23.2",
|
|
4
4
|
"description": "Stencil Component Starter",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"license": "MIT",
|
|
71
71
|
"url": "https://github.com/UKHO/admiralty-design-system",
|
|
72
72
|
"repository": "git://github.com/UKHO/admiralty-design-system.git",
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "8ff5de8b8af7d0ac977dd62949a85117313ef500"
|
|
74
74
|
}
|