@ukho/admiralty-core 0.23.0 → 0.23.1
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-8be6a2fc.entry.js → p-6828ab68.entry.js} +2 -2
- package/dist/admiralty/p-6828ab68.entry.js.map +1 -0
- package/dist/cjs/admiralty-header-menu-item.cjs.entry.js +1 -1
- package/dist/cjs/admiralty-header-menu-item.cjs.entry.js.map +1 -1
- package/dist/collection/components/header-menu-item/header-menu-item.css +1 -1
- package/dist/components/admiralty-header-menu-item.js +1 -1
- package/dist/components/admiralty-header-menu-item.js.map +1 -1
- package/dist/esm/admiralty-header-menu-item.entry.js +1 -1
- package/dist/esm/admiralty-header-menu-item.entry.js.map +1 -1
- package/package.json +2 -2
- package/dist/admiralty/p-8be6a2fc.entry.js.map +0 -1
|
@@ -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-da7e7c15",[[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-
|
|
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-da7e7c15",[[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 i,h as t,H as a,g as d}from"./p-ac0ad15a.js";const m="@media (max-width: 1023px){.desktop-only.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-menu-item{display:none}}.menu-item.sc-admiralty-header-menu-item{cursor:pointer}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{font-size:18px}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:focus{box-shadow:#ffdd00 inset 0 0 0 3px}button.sc-admiralty-header-menu-item{all:unset;height:100%;width:100%}@media (min-width: 1024px){.menu-item.sc-admiralty-header-menu-item{display:flex;flex:0;flex-direction:column;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.menu-item.sc-admiralty-header-menu-item:hover{box-shadow:inset 0 -5px #09315b;background-color:#f0f0f0}.menu-item.sc-admiralty-header-menu-item:hover .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.active.sc-admiralty-header-menu-item{box-shadow:inset 0 -5px #09315b}.menu-item.active.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{font-weight:normal}.menu-item.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:none;flex-direction:column;position:absolute;border:1px solid #d8d8d8;right:0;top:100%}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-visible.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-hide.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px){.menu-item.sc-admiralty-header-menu-item{display:block;box-sizing:border-box;
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as i,h as t,H as a,g as d}from"./p-ac0ad15a.js";const m="@media (max-width: 1023px){.desktop-only.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-menu-item{display:none}}.menu-item.sc-admiralty-header-menu-item{color:#09315b;cursor:pointer}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{font-size:18px}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:focus{box-shadow:#ffdd00 inset 0 0 0 3px}button.sc-admiralty-header-menu-item{all:unset;height:100%;width:100%}@media (min-width: 1024px){.menu-item.sc-admiralty-header-menu-item{display:flex;flex:0;flex-direction:column;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.menu-item.sc-admiralty-header-menu-item:hover{box-shadow:inset 0 -5px #09315b;background-color:#f0f0f0}.menu-item.sc-admiralty-header-menu-item:hover .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.active.sc-admiralty-header-menu-item{box-shadow:inset 0 -5px #09315b}.menu-item.active.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{font-weight:normal}.menu-item.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:none;flex-direction:column;position:absolute;border:1px solid #d8d8d8;right:0;top:100%}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-visible.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-hide.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px){.menu-item.sc-admiralty-header-menu-item{display:block;box-sizing:border-box;background-color:unset;text-align:unset;text-decoration:unset}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{padding:12px;font-weight:500}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:hover{background-color:#f0f0f0}}";const n=m;const s=class{constructor(t){e(this,t);this.menuItemClick=i(this,"menuItemClick",7);this.menuTitle=undefined;this.active=false}connectedCallback(){try{this.subMenuSelector=this.el.querySelector("admiralty-header-sub-menu-item");this.subMenuExists=true;if(this.subMenuExists){this.subMenuSelector.setAttribute("aria-hidden","true")}}catch(e){this.subMenuExists=false}}toggleSubMenu(){const e=this.el.querySelector("div.sub-menu");if(e.classList.contains("desktop-hide")){e.classList.add("desktop-visible");e.classList.remove("desktop-hide")}else{e.classList.add("desktop-hide");e.classList.remove("desktop-visible")}}closeSubMenu(){const e=this.el.querySelector("div.sub-menu");e.classList.add("desktop-hide")}handleClick(e){e.stopPropagation();if(this.subMenuExists){this.subMenuSelector.setAttribute("aria-hidden","false");this.toggleSubMenu()}return this.menuItemClick.emit()}handleMouseOver(){if(this.subMenuExists){this.subMenuSelector.setAttribute("aria-hidden","false");this.toggleSubMenu()}}handleMouseOut(e){if(this.subMenuExists){this.subMenuSelector.setAttribute("aria-hidden","true");this.closeSubMenu()}}handleFocusOut(e){var i;const t=e===null||e===void 0?void 0:e.relatedTarget;if(((i=t===null||t===void 0?void 0:t.outerHTML)===null||i===void 0?void 0:i.indexOf("button"))!==-1){this.closeSubMenu()}}render(){const{active:e,menuTitle:i}=this;let d="menu-item ";d+=e?"active":"";return t(a,{key:"27d0da7c3f9bc115acdcf9c3434c67ad8aeb125f",onMouseOver:e=>this.handleMouseOver(),onMouseOut:e=>this.handleMouseOut(e)},t("div",{key:"0ee13b1c24e4b766ec3a4c5245970262bc9a536c",class:d,onClick:e=>this.handleClick(e)},t("button",{key:"4b1d85798135baa51def543b660980fd0143782b",class:"menu-title",tabindex:"0"},i),t("div",{key:"312da26ff581b410b9beedf65b02cb530c6f05ee",class:"sub-menu desktop-hide",onFocusout:e=>this.handleFocusOut(e)},t("slot",{key:"14350663f899c7f9ba0bfd79e3adad67873712af"}))))}get el(){return d(this)}};s.style=n;export{s as admiralty_header_menu_item};
|
|
2
|
+
//# sourceMappingURL=p-6828ab68.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["headerMenuItemCss","AdmiraltyHeaderMenuItemStyle0","HeaderMenuItemComponent","connectedCallback","this","subMenuSelector","el","querySelector","subMenuExists","setAttribute","e","toggleSubMenu","subMenu","classList","contains","add","remove","closeSubMenu","handleClick","ev","stopPropagation","menuItemClick","emit","handleMouseOver","handleMouseOut","_ev","handleFocusOut","relatedTarget","_a","outerHTML","indexOf","render","active","menuTitle","menuClass","h","Host","key","onMouseOver","_","onMouseOut","class","onClick","tabindex","onFocusout"],"sources":["src/components/header-menu-item/header-menu-item.scss?tag=admiralty-header-menu-item&encapsulation=scoped","src/components/header-menu-item/header-menu-item.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n\n@mixin active {\n box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\n}\n\n.menu-item {\n color: colours.$colour-admiralty-blue;\n cursor: pointer;\n\n .menu-title {\n font-size: typography.$font-size-normal;\n\n &:focus {\n box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n }\n }\n}\n\nbutton {\n all: unset;\n height: 100%;\n width: 100%;\n}\n\n@include responsive.desktop-only {\n .menu-item {\n display: flex;\n flex: 0;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n line-height: 1.33em;\n margin-bottom: 0;\n min-width: 4em;\n max-width: 11.1em;\n padding: 0 1.65em;\n position: relative;\n text-align: center;\n\n &:hover {\n @include active;\n background-color: colours.$colour-nav-bg-hover;\n\n .sub-menu {\n display: flex;\n }\n }\n\n &.active {\n @include active;\n\n .sub-menu {\n display: flex;\n }\n }\n\n .menu-title {\n font-weight: typography.$font-weight-medium;\n }\n\n .sub-menu {\n display: none;\n flex-direction: column;\n position: absolute;\n border: 1px solid colours.$colour-divider;\n right: 0;\n top: 100%;\n\n &.desktop-visible {\n display: flex;\n }\n\n &.desktop-hide {\n display: none;\n }\n }\n }\n}\n\n@include responsive.not-desktop {\n .menu-item {\n display: block;\n box-sizing: border-box;\n background-color: unset;\n text-align: unset;\n text-decoration: unset;\n\n .menu-title {\n padding: 12px;\n font-weight: 500;\n\n &:hover {\n background-color: colours.$colour-nav-bg-hover;\n }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * @slot - 'admiralty-sub-header-menu-item' a number of components can be placed here to add sub items\n */\n@Component({\n tag: 'admiralty-header-menu-item',\n styleUrl: 'header-menu-item.scss',\n scoped: true,\n})\nexport class HeaderMenuItemComponent {\n @Element() el: HTMLElement;\n\n /**\n * The text that will be displayed in the menu\n */\n @Prop() menuTitle: string;\n\n /**\n * Whether the item is active\n */\n @Prop() active?: boolean = false;\n\n /**\n * The event that is fired when a user clicks on the menu\n */\n @Event() menuItemClick: EventEmitter<void>;\n\n subMenuExists: boolean;\n subMenuSelector: HTMLElement;\n\n connectedCallback() {\n // check if submenu exists on this menu item\n try {\n this.subMenuSelector = this.el.querySelector('admiralty-header-sub-menu-item');\n this.subMenuExists = true;\n\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'true');\n }\n } catch (e) {\n this.subMenuExists = false;\n }\n }\n\n private toggleSubMenu() {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n\n if (subMenu.classList.contains('desktop-hide')) {\n subMenu.classList.add('desktop-visible');\n subMenu.classList.remove('desktop-hide');\n } else {\n subMenu.classList.add('desktop-hide');\n subMenu.classList.remove('desktop-visible');\n }\n }\n\n private closeSubMenu() {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n subMenu.classList.add('desktop-hide');\n }\n\n handleClick(ev: MouseEvent): CustomEvent<void> {\n ev.stopPropagation();\n\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n this.toggleSubMenu();\n }\n return this.menuItemClick.emit();\n }\n\n /**\n * Handles mouseover events, used to set the aria hidden attribute when submenu\n * is visible\n */\n handleMouseOver(): void {\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n this.toggleSubMenu();\n }\n }\n\n /**\n * Handles mouseout events, used to set the aria hidden attribute when submenu\n * is no longer visible\n */\n handleMouseOut(_ev: Event): void {\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'true');\n this.closeSubMenu();\n }\n }\n\n handleFocusOut(ev: FocusEvent) {\n const relatedTarget: any = ev?.relatedTarget;\n\n if (relatedTarget?.outerHTML?.indexOf('button') !== -1) {\n this.closeSubMenu();\n }\n }\n\n render() {\n const { active, menuTitle } = this;\n let menuClass = 'menu-item ';\n menuClass += active ? 'active' : '';\n\n return (\n <Host onMouseOver={_ => this.handleMouseOver()} onMouseOut={(ev: Event) => this.handleMouseOut(ev)}>\n <div class={menuClass} onClick={ev => this.handleClick(ev)}>\n <button class=\"menu-title\" tabindex=\"0\">\n {menuTitle}\n </button>\n <div class=\"sub-menu desktop-hide\" onFocusout={ev => this.handleFocusOut(ev)}>\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAoB,ulFAC1B,MAAAC,EAAeD,E,MCSFE,EAAuB,M,2GAWP,K,CAU3B,iBAAAC,GAEE,IACEC,KAAKC,gBAAkBD,KAAKE,GAAGC,cAAc,kCAC7CH,KAAKI,cAAgB,KAErB,GAAIJ,KAAKI,cAAe,CACtBJ,KAAKC,gBAAgBI,aAAa,cAAe,O,EAEnD,MAAOC,GACPN,KAAKI,cAAgB,K,EAIjB,aAAAG,GACN,MAAMC,EAA0BR,KAAKE,GAAGC,cAAc,gBAEtD,GAAIK,EAAQC,UAAUC,SAAS,gBAAiB,CAC9CF,EAAQC,UAAUE,IAAI,mBACtBH,EAAQC,UAAUG,OAAO,e,KACpB,CACLJ,EAAQC,UAAUE,IAAI,gBACtBH,EAAQC,UAAUG,OAAO,kB,EAIrB,YAAAC,GACN,MAAML,EAA0BR,KAAKE,GAAGC,cAAc,gBACtDK,EAAQC,UAAUE,IAAI,e,CAGxB,WAAAG,CAAYC,GACVA,EAAGC,kBAEH,GAAIhB,KAAKI,cAAe,CACtBJ,KAAKC,gBAAgBI,aAAa,cAAe,SAEjDL,KAAKO,e,CAEP,OAAOP,KAAKiB,cAAcC,M,CAO5B,eAAAC,GACE,GAAInB,KAAKI,cAAe,CACtBJ,KAAKC,gBAAgBI,aAAa,cAAe,SAEjDL,KAAKO,e,EAQT,cAAAa,CAAeC,GACb,GAAIrB,KAAKI,cAAe,CACtBJ,KAAKC,gBAAgBI,aAAa,cAAe,QACjDL,KAAKa,c,EAIT,cAAAS,CAAeP,G,MACb,MAAMQ,EAAqBR,IAAE,MAAFA,SAAE,SAAFA,EAAIQ,cAE/B,KAAIC,EAAAD,IAAa,MAAbA,SAAa,SAAbA,EAAeE,aAAS,MAAAD,SAAA,SAAAA,EAAEE,QAAQ,cAAe,EAAG,CACtD1B,KAAKa,c,EAIT,MAAAc,GACE,MAAMC,OAAEA,EAAMC,UAAEA,GAAc7B,KAC9B,IAAI8B,EAAY,aAChBA,GAAaF,EAAS,SAAW,GAEjC,OACEG,EAACC,EAAI,CAAAC,IAAA,2CAACC,YAAaC,GAAKnC,KAAKmB,kBAAmBiB,WAAarB,GAAcf,KAAKoB,eAAeL,IAC7FgB,EAAA,OAAAE,IAAA,2CAAKI,MAAOP,EAAWQ,QAASvB,GAAMf,KAAKc,YAAYC,IACrDgB,EAAA,UAAAE,IAAA,2CAAQI,MAAM,aAAaE,SAAS,KACjCV,GAEHE,EAAA,OAAAE,IAAA,2CAAKI,MAAM,wBAAwBG,WAAYzB,GAAMf,KAAKsB,eAAeP,IACvEgB,EAAA,QAAAE,IAAA,+C"}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-ae771770.js');
|
|
6
6
|
|
|
7
|
-
const headerMenuItemCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-menu-item{display:none}}.menu-item.sc-admiralty-header-menu-item{cursor:pointer}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{font-size:18px}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:focus{box-shadow:#ffdd00 inset 0 0 0 3px}button.sc-admiralty-header-menu-item{all:unset;height:100%;width:100%}@media (min-width: 1024px){.menu-item.sc-admiralty-header-menu-item{display:flex;flex:0;flex-direction:column;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.menu-item.sc-admiralty-header-menu-item:hover{box-shadow:inset 0 -5px #09315b;background-color:#f0f0f0}.menu-item.sc-admiralty-header-menu-item:hover .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.active.sc-admiralty-header-menu-item{box-shadow:inset 0 -5px #09315b}.menu-item.active.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{font-weight:normal}.menu-item.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:none;flex-direction:column;position:absolute;border:1px solid #d8d8d8;right:0;top:100%}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-visible.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-hide.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px){.menu-item.sc-admiralty-header-menu-item{display:block;box-sizing:border-box;
|
|
7
|
+
const headerMenuItemCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-menu-item{display:none}}.menu-item.sc-admiralty-header-menu-item{color:#09315b;cursor:pointer}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{font-size:18px}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:focus{box-shadow:#ffdd00 inset 0 0 0 3px}button.sc-admiralty-header-menu-item{all:unset;height:100%;width:100%}@media (min-width: 1024px){.menu-item.sc-admiralty-header-menu-item{display:flex;flex:0;flex-direction:column;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.menu-item.sc-admiralty-header-menu-item:hover{box-shadow:inset 0 -5px #09315b;background-color:#f0f0f0}.menu-item.sc-admiralty-header-menu-item:hover .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.active.sc-admiralty-header-menu-item{box-shadow:inset 0 -5px #09315b}.menu-item.active.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{font-weight:normal}.menu-item.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:none;flex-direction:column;position:absolute;border:1px solid #d8d8d8;right:0;top:100%}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-visible.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-hide.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px){.menu-item.sc-admiralty-header-menu-item{display:block;box-sizing:border-box;background-color:unset;text-align:unset;text-decoration:unset}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{padding:12px;font-weight:500}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:hover{background-color:#f0f0f0}}";
|
|
8
8
|
const AdmiraltyHeaderMenuItemStyle0 = headerMenuItemCss;
|
|
9
9
|
|
|
10
10
|
const HeaderMenuItemComponent = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-header-menu-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,slFAAslF,CAAC;AACjnF,sCAAe,iBAAiB;;MCSnB,uBAAuB;;;;;sBAWP,KAAK;;IAUhC,iBAAiB;;QAEf,IAAI;YACF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gCAAgC,CAAC,CAAC;YAC/E,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAE1B,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;aAC1D;SACF;QAAC,OAAO,CAAC,EAAE;YACV,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;KACF;IAEO,aAAa;QACnB,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAEtE,IAAI,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;YAC9C,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;YACzC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;SAC1C;aAAM;YACL,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;YACtC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;SAC7C;KACF;IAEO,YAAY;QAClB,MAAM,OAAO,GAAmB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QACtE,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;KACvC;IAED,WAAW,CAAC,EAAc;QACxB,EAAE,CAAC,eAAe,EAAE,CAAC;QAErB,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YAE1D,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;QACD,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAClC;;;;;IAMD,eAAe;QACb,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YAE1D,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;KACF;;;;;IAMD,cAAc,CAAC,GAAU;QACvB,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;YACzD,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;IAED,cAAc,CAAC,EAAc;;QAC3B,MAAM,aAAa,GAAQ,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,aAAa,CAAC;QAE7C,IAAI,CAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,0CAAE,OAAO,CAAC,QAAQ,CAAC,MAAK,CAAC,CAAC,EAAE;YACtD,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;IAED,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACnC,IAAI,SAAS,GAAG,YAAY,CAAC;QAC7B,SAAS,IAAI,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAC;QAEpC,QACEA,QAACC,UAAI,qDAAC,WAAW,EAAE,CAAC,IAAI,IAAI,CAAC,eAAe,EAAE,EAAE,UAAU,EAAE,CAAC,EAAS,KAAK,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,IAChGD,kEAAK,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,IACxDA,qEAAQ,KAAK,EAAC,YAAY,EAAC,QAAQ,EAAC,GAAG,IACpC,SAAS,CACH,EACTA,kEAAK,KAAK,EAAC,uBAAuB,EAAC,UAAU,EAAE,EAAE,IAAI,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,IAC1EA,oEAAQ,CACJ,CACF,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/header-menu-item/header-menu-item.scss?tag=admiralty-header-menu-item&encapsulation=scoped","src/components/header-menu-item/header-menu-item.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n\n@mixin active {\n box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\n}\n\n.menu-item {\n cursor: pointer;\n\n .menu-title {\n font-size: typography.$font-size-normal;\n\n &:focus {\n box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n }\n }\n}\n\nbutton {\n all: unset;\n height: 100%;\n width: 100%;\n}\n\n@include responsive.desktop-only {\n .menu-item {\n display: flex;\n flex: 0;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n line-height: 1.33em;\n margin-bottom: 0;\n min-width: 4em;\n max-width: 11.1em;\n padding: 0 1.65em;\n position: relative;\n text-align: center;\n\n &:hover {\n @include active;\n background-color: colours.$colour-nav-bg-hover;\n\n .sub-menu {\n display: flex;\n }\n }\n\n &.active {\n @include active;\n\n .sub-menu {\n display: flex;\n }\n }\n\n .menu-title {\n font-weight: typography.$font-weight-medium;\n }\n\n .sub-menu {\n display: none;\n flex-direction: column;\n position: absolute;\n border: 1px solid colours.$colour-divider;\n right: 0;\n top: 100%;\n\n &.desktop-visible {\n display: flex;\n }\n\n &.desktop-hide {\n display: none;\n }\n }\n }\n}\n\n@include responsive.not-desktop {\n .menu-item {\n display: block;\n box-sizing: border-box;\n
|
|
1
|
+
{"file":"admiralty-header-menu-item.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/header-menu-item/header-menu-item.scss?tag=admiralty-header-menu-item&encapsulation=scoped","src/components/header-menu-item/header-menu-item.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n\n@mixin active {\n box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\n}\n\n.menu-item {\n color: colours.$colour-admiralty-blue;\n cursor: pointer;\n\n .menu-title {\n font-size: typography.$font-size-normal;\n\n &:focus {\n box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n }\n }\n}\n\nbutton {\n all: unset;\n height: 100%;\n width: 100%;\n}\n\n@include responsive.desktop-only {\n .menu-item {\n display: flex;\n flex: 0;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n line-height: 1.33em;\n margin-bottom: 0;\n min-width: 4em;\n max-width: 11.1em;\n padding: 0 1.65em;\n position: relative;\n text-align: center;\n\n &:hover {\n @include active;\n background-color: colours.$colour-nav-bg-hover;\n\n .sub-menu {\n display: flex;\n }\n }\n\n &.active {\n @include active;\n\n .sub-menu {\n display: flex;\n }\n }\n\n .menu-title {\n font-weight: typography.$font-weight-medium;\n }\n\n .sub-menu {\n display: none;\n flex-direction: column;\n position: absolute;\n border: 1px solid colours.$colour-divider;\n right: 0;\n top: 100%;\n\n &.desktop-visible {\n display: flex;\n }\n\n &.desktop-hide {\n display: none;\n }\n }\n }\n}\n\n@include responsive.not-desktop {\n .menu-item {\n display: block;\n box-sizing: border-box;\n background-color: unset;\n text-align: unset;\n text-decoration: unset;\n\n .menu-title {\n padding: 12px;\n font-weight: 500;\n\n &:hover {\n background-color: colours.$colour-nav-bg-hover;\n }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * @slot - 'admiralty-sub-header-menu-item' a number of components can be placed here to add sub items\n */\n@Component({\n tag: 'admiralty-header-menu-item',\n styleUrl: 'header-menu-item.scss',\n scoped: true,\n})\nexport class HeaderMenuItemComponent {\n @Element() el: HTMLElement;\n\n /**\n * The text that will be displayed in the menu\n */\n @Prop() menuTitle: string;\n\n /**\n * Whether the item is active\n */\n @Prop() active?: boolean = false;\n\n /**\n * The event that is fired when a user clicks on the menu\n */\n @Event() menuItemClick: EventEmitter<void>;\n\n subMenuExists: boolean;\n subMenuSelector: HTMLElement;\n\n connectedCallback() {\n // check if submenu exists on this menu item\n try {\n this.subMenuSelector = this.el.querySelector('admiralty-header-sub-menu-item');\n this.subMenuExists = true;\n\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'true');\n }\n } catch (e) {\n this.subMenuExists = false;\n }\n }\n\n private toggleSubMenu() {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n\n if (subMenu.classList.contains('desktop-hide')) {\n subMenu.classList.add('desktop-visible');\n subMenu.classList.remove('desktop-hide');\n } else {\n subMenu.classList.add('desktop-hide');\n subMenu.classList.remove('desktop-visible');\n }\n }\n\n private closeSubMenu() {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n subMenu.classList.add('desktop-hide');\n }\n\n handleClick(ev: MouseEvent): CustomEvent<void> {\n ev.stopPropagation();\n\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n this.toggleSubMenu();\n }\n return this.menuItemClick.emit();\n }\n\n /**\n * Handles mouseover events, used to set the aria hidden attribute when submenu\n * is visible\n */\n handleMouseOver(): void {\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n this.toggleSubMenu();\n }\n }\n\n /**\n * Handles mouseout events, used to set the aria hidden attribute when submenu\n * is no longer visible\n */\n handleMouseOut(_ev: Event): void {\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'true');\n this.closeSubMenu();\n }\n }\n\n handleFocusOut(ev: FocusEvent) {\n const relatedTarget: any = ev?.relatedTarget;\n\n if (relatedTarget?.outerHTML?.indexOf('button') !== -1) {\n this.closeSubMenu();\n }\n }\n\n render() {\n const { active, menuTitle } = this;\n let menuClass = 'menu-item ';\n menuClass += active ? 'active' : '';\n\n return (\n <Host onMouseOver={_ => this.handleMouseOver()} onMouseOut={(ev: Event) => this.handleMouseOut(ev)}>\n <div class={menuClass} onClick={ev => this.handleClick(ev)}>\n <button class=\"menu-title\" tabindex=\"0\">\n {menuTitle}\n </button>\n <div class=\"sub-menu desktop-hide\" onFocusout={ev => this.handleFocusOut(ev)}>\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -63,6 +63,7 @@
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
.menu-item {
|
|
66
|
+
color: #09315b;
|
|
66
67
|
cursor: pointer;
|
|
67
68
|
}
|
|
68
69
|
.menu-item .menu-title {
|
|
@@ -128,7 +129,6 @@ button {
|
|
|
128
129
|
.menu-item {
|
|
129
130
|
display: block;
|
|
130
131
|
box-sizing: border-box;
|
|
131
|
-
color: #09315b;
|
|
132
132
|
background-color: unset;
|
|
133
133
|
text-align: unset;
|
|
134
134
|
text-decoration: unset;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const headerMenuItemCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-menu-item{display:none}}.menu-item.sc-admiralty-header-menu-item{cursor:pointer}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{font-size:18px}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:focus{box-shadow:#ffdd00 inset 0 0 0 3px}button.sc-admiralty-header-menu-item{all:unset;height:100%;width:100%}@media (min-width: 1024px){.menu-item.sc-admiralty-header-menu-item{display:flex;flex:0;flex-direction:column;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.menu-item.sc-admiralty-header-menu-item:hover{box-shadow:inset 0 -5px #09315b;background-color:#f0f0f0}.menu-item.sc-admiralty-header-menu-item:hover .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.active.sc-admiralty-header-menu-item{box-shadow:inset 0 -5px #09315b}.menu-item.active.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{font-weight:normal}.menu-item.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:none;flex-direction:column;position:absolute;border:1px solid #d8d8d8;right:0;top:100%}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-visible.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-hide.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px){.menu-item.sc-admiralty-header-menu-item{display:block;box-sizing:border-box;
|
|
3
|
+
const headerMenuItemCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-menu-item{display:none}}.menu-item.sc-admiralty-header-menu-item{color:#09315b;cursor:pointer}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{font-size:18px}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:focus{box-shadow:#ffdd00 inset 0 0 0 3px}button.sc-admiralty-header-menu-item{all:unset;height:100%;width:100%}@media (min-width: 1024px){.menu-item.sc-admiralty-header-menu-item{display:flex;flex:0;flex-direction:column;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.menu-item.sc-admiralty-header-menu-item:hover{box-shadow:inset 0 -5px #09315b;background-color:#f0f0f0}.menu-item.sc-admiralty-header-menu-item:hover .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.active.sc-admiralty-header-menu-item{box-shadow:inset 0 -5px #09315b}.menu-item.active.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{font-weight:normal}.menu-item.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:none;flex-direction:column;position:absolute;border:1px solid #d8d8d8;right:0;top:100%}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-visible.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-hide.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px){.menu-item.sc-admiralty-header-menu-item{display:block;box-sizing:border-box;background-color:unset;text-align:unset;text-decoration:unset}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{padding:12px;font-weight:500}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:hover{background-color:#f0f0f0}}";
|
|
4
4
|
const AdmiraltyHeaderMenuItemStyle0 = headerMenuItemCss;
|
|
5
5
|
|
|
6
6
|
const HeaderMenuItemComponent = /*@__PURE__*/ proxyCustomElement(class HeaderMenuItemComponent extends HTMLElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-header-menu-item.js","mappings":"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","names":[],"sources":["src/components/header-menu-item/header-menu-item.scss?tag=admiralty-header-menu-item&encapsulation=scoped","src/components/header-menu-item/header-menu-item.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n\n@mixin active {\n box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\n}\n\n.menu-item {\n cursor: pointer;\n\n .menu-title {\n font-size: typography.$font-size-normal;\n\n &:focus {\n box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n }\n }\n}\n\nbutton {\n all: unset;\n height: 100%;\n width: 100%;\n}\n\n@include responsive.desktop-only {\n .menu-item {\n display: flex;\n flex: 0;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n line-height: 1.33em;\n margin-bottom: 0;\n min-width: 4em;\n max-width: 11.1em;\n padding: 0 1.65em;\n position: relative;\n text-align: center;\n\n &:hover {\n @include active;\n background-color: colours.$colour-nav-bg-hover;\n\n .sub-menu {\n display: flex;\n }\n }\n\n &.active {\n @include active;\n\n .sub-menu {\n display: flex;\n }\n }\n\n .menu-title {\n font-weight: typography.$font-weight-medium;\n }\n\n .sub-menu {\n display: none;\n flex-direction: column;\n position: absolute;\n border: 1px solid colours.$colour-divider;\n right: 0;\n top: 100%;\n\n &.desktop-visible {\n display: flex;\n }\n\n &.desktop-hide {\n display: none;\n }\n }\n }\n}\n\n@include responsive.not-desktop {\n .menu-item {\n display: block;\n box-sizing: border-box;\n
|
|
1
|
+
{"file":"admiralty-header-menu-item.js","mappings":"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","names":[],"sources":["src/components/header-menu-item/header-menu-item.scss?tag=admiralty-header-menu-item&encapsulation=scoped","src/components/header-menu-item/header-menu-item.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n\n@mixin active {\n box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\n}\n\n.menu-item {\n color: colours.$colour-admiralty-blue;\n cursor: pointer;\n\n .menu-title {\n font-size: typography.$font-size-normal;\n\n &:focus {\n box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n }\n }\n}\n\nbutton {\n all: unset;\n height: 100%;\n width: 100%;\n}\n\n@include responsive.desktop-only {\n .menu-item {\n display: flex;\n flex: 0;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n line-height: 1.33em;\n margin-bottom: 0;\n min-width: 4em;\n max-width: 11.1em;\n padding: 0 1.65em;\n position: relative;\n text-align: center;\n\n &:hover {\n @include active;\n background-color: colours.$colour-nav-bg-hover;\n\n .sub-menu {\n display: flex;\n }\n }\n\n &.active {\n @include active;\n\n .sub-menu {\n display: flex;\n }\n }\n\n .menu-title {\n font-weight: typography.$font-weight-medium;\n }\n\n .sub-menu {\n display: none;\n flex-direction: column;\n position: absolute;\n border: 1px solid colours.$colour-divider;\n right: 0;\n top: 100%;\n\n &.desktop-visible {\n display: flex;\n }\n\n &.desktop-hide {\n display: none;\n }\n }\n }\n}\n\n@include responsive.not-desktop {\n .menu-item {\n display: block;\n box-sizing: border-box;\n background-color: unset;\n text-align: unset;\n text-decoration: unset;\n\n .menu-title {\n padding: 12px;\n font-weight: 500;\n\n &:hover {\n background-color: colours.$colour-nav-bg-hover;\n }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * @slot - 'admiralty-sub-header-menu-item' a number of components can be placed here to add sub items\n */\n@Component({\n tag: 'admiralty-header-menu-item',\n styleUrl: 'header-menu-item.scss',\n scoped: true,\n})\nexport class HeaderMenuItemComponent {\n @Element() el: HTMLElement;\n\n /**\n * The text that will be displayed in the menu\n */\n @Prop() menuTitle: string;\n\n /**\n * Whether the item is active\n */\n @Prop() active?: boolean = false;\n\n /**\n * The event that is fired when a user clicks on the menu\n */\n @Event() menuItemClick: EventEmitter<void>;\n\n subMenuExists: boolean;\n subMenuSelector: HTMLElement;\n\n connectedCallback() {\n // check if submenu exists on this menu item\n try {\n this.subMenuSelector = this.el.querySelector('admiralty-header-sub-menu-item');\n this.subMenuExists = true;\n\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'true');\n }\n } catch (e) {\n this.subMenuExists = false;\n }\n }\n\n private toggleSubMenu() {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n\n if (subMenu.classList.contains('desktop-hide')) {\n subMenu.classList.add('desktop-visible');\n subMenu.classList.remove('desktop-hide');\n } else {\n subMenu.classList.add('desktop-hide');\n subMenu.classList.remove('desktop-visible');\n }\n }\n\n private closeSubMenu() {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n subMenu.classList.add('desktop-hide');\n }\n\n handleClick(ev: MouseEvent): CustomEvent<void> {\n ev.stopPropagation();\n\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n this.toggleSubMenu();\n }\n return this.menuItemClick.emit();\n }\n\n /**\n * Handles mouseover events, used to set the aria hidden attribute when submenu\n * is visible\n */\n handleMouseOver(): void {\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n this.toggleSubMenu();\n }\n }\n\n /**\n * Handles mouseout events, used to set the aria hidden attribute when submenu\n * is no longer visible\n */\n handleMouseOut(_ev: Event): void {\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'true');\n this.closeSubMenu();\n }\n }\n\n handleFocusOut(ev: FocusEvent) {\n const relatedTarget: any = ev?.relatedTarget;\n\n if (relatedTarget?.outerHTML?.indexOf('button') !== -1) {\n this.closeSubMenu();\n }\n }\n\n render() {\n const { active, menuTitle } = this;\n let menuClass = 'menu-item ';\n menuClass += active ? 'active' : '';\n\n return (\n <Host onMouseOver={_ => this.handleMouseOver()} onMouseOut={(ev: Event) => this.handleMouseOut(ev)}>\n <div class={menuClass} onClick={ev => this.handleClick(ev)}>\n <button class=\"menu-title\" tabindex=\"0\">\n {menuTitle}\n </button>\n <div class=\"sub-menu desktop-hide\" onFocusout={ev => this.handleFocusOut(ev)}>\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f98c723.js';
|
|
2
2
|
|
|
3
|
-
const headerMenuItemCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-menu-item{display:none}}.menu-item.sc-admiralty-header-menu-item{cursor:pointer}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{font-size:18px}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:focus{box-shadow:#ffdd00 inset 0 0 0 3px}button.sc-admiralty-header-menu-item{all:unset;height:100%;width:100%}@media (min-width: 1024px){.menu-item.sc-admiralty-header-menu-item{display:flex;flex:0;flex-direction:column;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.menu-item.sc-admiralty-header-menu-item:hover{box-shadow:inset 0 -5px #09315b;background-color:#f0f0f0}.menu-item.sc-admiralty-header-menu-item:hover .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.active.sc-admiralty-header-menu-item{box-shadow:inset 0 -5px #09315b}.menu-item.active.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{font-weight:normal}.menu-item.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:none;flex-direction:column;position:absolute;border:1px solid #d8d8d8;right:0;top:100%}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-visible.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-hide.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px){.menu-item.sc-admiralty-header-menu-item{display:block;box-sizing:border-box;
|
|
3
|
+
const headerMenuItemCss = "@media (max-width: 1023px){.desktop-only.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.not-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 479px) and (min-width: 0px){.tablet-or-desktop.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-or-tablet.sc-admiralty-header-menu-item{display:none}}@media (min-width: 1024px){.phone-only.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px) and (min-width: 480px){.phone-only.sc-admiralty-header-menu-item{display:none}}.menu-item.sc-admiralty-header-menu-item{color:#09315b;cursor:pointer}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{font-size:18px}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:focus{box-shadow:#ffdd00 inset 0 0 0 3px}button.sc-admiralty-header-menu-item{all:unset;height:100%;width:100%}@media (min-width: 1024px){.menu-item.sc-admiralty-header-menu-item{display:flex;flex:0;flex-direction:column;height:100%;justify-content:center;line-height:1.33em;margin-bottom:0;min-width:4em;max-width:11.1em;padding:0 1.65em;position:relative;text-align:center}.menu-item.sc-admiralty-header-menu-item:hover{box-shadow:inset 0 -5px #09315b;background-color:#f0f0f0}.menu-item.sc-admiralty-header-menu-item:hover .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.active.sc-admiralty-header-menu-item{box-shadow:inset 0 -5px #09315b}.menu-item.active.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{font-weight:normal}.menu-item.sc-admiralty-header-menu-item .sub-menu.sc-admiralty-header-menu-item{display:none;flex-direction:column;position:absolute;border:1px solid #d8d8d8;right:0;top:100%}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-visible.sc-admiralty-header-menu-item{display:flex}.menu-item.sc-admiralty-header-menu-item .sub-menu.desktop-hide.sc-admiralty-header-menu-item{display:none}}@media (max-width: 1023px){.menu-item.sc-admiralty-header-menu-item{display:block;box-sizing:border-box;background-color:unset;text-align:unset;text-decoration:unset}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item{padding:12px;font-weight:500}.menu-item.sc-admiralty-header-menu-item .menu-title.sc-admiralty-header-menu-item:hover{background-color:#f0f0f0}}";
|
|
4
4
|
const AdmiraltyHeaderMenuItemStyle0 = headerMenuItemCss;
|
|
5
5
|
|
|
6
6
|
const HeaderMenuItemComponent = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-header-menu-item.entry.js","mappings":"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","names":[],"sources":["src/components/header-menu-item/header-menu-item.scss?tag=admiralty-header-menu-item&encapsulation=scoped","src/components/header-menu-item/header-menu-item.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n\n@mixin active {\n box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\n}\n\n.menu-item {\n cursor: pointer;\n\n .menu-title {\n font-size: typography.$font-size-normal;\n\n &:focus {\n box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n }\n }\n}\n\nbutton {\n all: unset;\n height: 100%;\n width: 100%;\n}\n\n@include responsive.desktop-only {\n .menu-item {\n display: flex;\n flex: 0;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n line-height: 1.33em;\n margin-bottom: 0;\n min-width: 4em;\n max-width: 11.1em;\n padding: 0 1.65em;\n position: relative;\n text-align: center;\n\n &:hover {\n @include active;\n background-color: colours.$colour-nav-bg-hover;\n\n .sub-menu {\n display: flex;\n }\n }\n\n &.active {\n @include active;\n\n .sub-menu {\n display: flex;\n }\n }\n\n .menu-title {\n font-weight: typography.$font-weight-medium;\n }\n\n .sub-menu {\n display: none;\n flex-direction: column;\n position: absolute;\n border: 1px solid colours.$colour-divider;\n right: 0;\n top: 100%;\n\n &.desktop-visible {\n display: flex;\n }\n\n &.desktop-hide {\n display: none;\n }\n }\n }\n}\n\n@include responsive.not-desktop {\n .menu-item {\n display: block;\n box-sizing: border-box;\n
|
|
1
|
+
{"file":"admiralty-header-menu-item.entry.js","mappings":"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","names":[],"sources":["src/components/header-menu-item/header-menu-item.scss?tag=admiralty-header-menu-item&encapsulation=scoped","src/components/header-menu-item/header-menu-item.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n\n@mixin active {\n box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\n}\n\n.menu-item {\n color: colours.$colour-admiralty-blue;\n cursor: pointer;\n\n .menu-title {\n font-size: typography.$font-size-normal;\n\n &:focus {\n box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n }\n }\n}\n\nbutton {\n all: unset;\n height: 100%;\n width: 100%;\n}\n\n@include responsive.desktop-only {\n .menu-item {\n display: flex;\n flex: 0;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n line-height: 1.33em;\n margin-bottom: 0;\n min-width: 4em;\n max-width: 11.1em;\n padding: 0 1.65em;\n position: relative;\n text-align: center;\n\n &:hover {\n @include active;\n background-color: colours.$colour-nav-bg-hover;\n\n .sub-menu {\n display: flex;\n }\n }\n\n &.active {\n @include active;\n\n .sub-menu {\n display: flex;\n }\n }\n\n .menu-title {\n font-weight: typography.$font-weight-medium;\n }\n\n .sub-menu {\n display: none;\n flex-direction: column;\n position: absolute;\n border: 1px solid colours.$colour-divider;\n right: 0;\n top: 100%;\n\n &.desktop-visible {\n display: flex;\n }\n\n &.desktop-hide {\n display: none;\n }\n }\n }\n}\n\n@include responsive.not-desktop {\n .menu-item {\n display: block;\n box-sizing: border-box;\n background-color: unset;\n text-align: unset;\n text-decoration: unset;\n\n .menu-title {\n padding: 12px;\n font-weight: 500;\n\n &:hover {\n background-color: colours.$colour-nav-bg-hover;\n }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * @slot - 'admiralty-sub-header-menu-item' a number of components can be placed here to add sub items\n */\n@Component({\n tag: 'admiralty-header-menu-item',\n styleUrl: 'header-menu-item.scss',\n scoped: true,\n})\nexport class HeaderMenuItemComponent {\n @Element() el: HTMLElement;\n\n /**\n * The text that will be displayed in the menu\n */\n @Prop() menuTitle: string;\n\n /**\n * Whether the item is active\n */\n @Prop() active?: boolean = false;\n\n /**\n * The event that is fired when a user clicks on the menu\n */\n @Event() menuItemClick: EventEmitter<void>;\n\n subMenuExists: boolean;\n subMenuSelector: HTMLElement;\n\n connectedCallback() {\n // check if submenu exists on this menu item\n try {\n this.subMenuSelector = this.el.querySelector('admiralty-header-sub-menu-item');\n this.subMenuExists = true;\n\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'true');\n }\n } catch (e) {\n this.subMenuExists = false;\n }\n }\n\n private toggleSubMenu() {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n\n if (subMenu.classList.contains('desktop-hide')) {\n subMenu.classList.add('desktop-visible');\n subMenu.classList.remove('desktop-hide');\n } else {\n subMenu.classList.add('desktop-hide');\n subMenu.classList.remove('desktop-visible');\n }\n }\n\n private closeSubMenu() {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n subMenu.classList.add('desktop-hide');\n }\n\n handleClick(ev: MouseEvent): CustomEvent<void> {\n ev.stopPropagation();\n\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n this.toggleSubMenu();\n }\n return this.menuItemClick.emit();\n }\n\n /**\n * Handles mouseover events, used to set the aria hidden attribute when submenu\n * is visible\n */\n handleMouseOver(): void {\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n this.toggleSubMenu();\n }\n }\n\n /**\n * Handles mouseout events, used to set the aria hidden attribute when submenu\n * is no longer visible\n */\n handleMouseOut(_ev: Event): void {\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'true');\n this.closeSubMenu();\n }\n }\n\n handleFocusOut(ev: FocusEvent) {\n const relatedTarget: any = ev?.relatedTarget;\n\n if (relatedTarget?.outerHTML?.indexOf('button') !== -1) {\n this.closeSubMenu();\n }\n }\n\n render() {\n const { active, menuTitle } = this;\n let menuClass = 'menu-item ';\n menuClass += active ? 'active' : '';\n\n return (\n <Host onMouseOver={_ => this.handleMouseOver()} onMouseOut={(ev: Event) => this.handleMouseOut(ev)}>\n <div class={menuClass} onClick={ev => this.handleClick(ev)}>\n <button class=\"menu-title\" tabindex=\"0\">\n {menuTitle}\n </button>\n <div class=\"sub-menu desktop-hide\" onFocusout={ev => this.handleFocusOut(ev)}>\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ukho/admiralty-core",
|
|
3
|
-
"version": "0.23.
|
|
3
|
+
"version": "0.23.1",
|
|
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": "a8cc56ffdd3a3f8e97d4b91c906ae7560eecdb64"
|
|
74
74
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["headerMenuItemCss","AdmiraltyHeaderMenuItemStyle0","HeaderMenuItemComponent","connectedCallback","this","subMenuSelector","el","querySelector","subMenuExists","setAttribute","e","toggleSubMenu","subMenu","classList","contains","add","remove","closeSubMenu","handleClick","ev","stopPropagation","menuItemClick","emit","handleMouseOver","handleMouseOut","_ev","handleFocusOut","relatedTarget","_a","outerHTML","indexOf","render","active","menuTitle","menuClass","h","Host","key","onMouseOver","_","onMouseOut","class","onClick","tabindex","onFocusout"],"sources":["src/components/header-menu-item/header-menu-item.scss?tag=admiralty-header-menu-item&encapsulation=scoped","src/components/header-menu-item/header-menu-item.tsx"],"sourcesContent":["@use '../../scss/vars/colours' as colours;\n@use '../../scss/base/responsive';\n@use '../../scss/vars/typography';\n\n@mixin active {\n box-shadow: inset 0 -5px colours.$colour-admiralty-blue;\n}\n\n.menu-item {\n cursor: pointer;\n\n .menu-title {\n font-size: typography.$font-size-normal;\n\n &:focus {\n box-shadow: colours.$colour-utility-focus inset 0 0 0 3px;\n }\n }\n}\n\nbutton {\n all: unset;\n height: 100%;\n width: 100%;\n}\n\n@include responsive.desktop-only {\n .menu-item {\n display: flex;\n flex: 0;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n line-height: 1.33em;\n margin-bottom: 0;\n min-width: 4em;\n max-width: 11.1em;\n padding: 0 1.65em;\n position: relative;\n text-align: center;\n\n &:hover {\n @include active;\n background-color: colours.$colour-nav-bg-hover;\n\n .sub-menu {\n display: flex;\n }\n }\n\n &.active {\n @include active;\n\n .sub-menu {\n display: flex;\n }\n }\n\n .menu-title {\n font-weight: typography.$font-weight-medium;\n }\n\n .sub-menu {\n display: none;\n flex-direction: column;\n position: absolute;\n border: 1px solid colours.$colour-divider;\n right: 0;\n top: 100%;\n\n &.desktop-visible {\n display: flex;\n }\n\n &.desktop-hide {\n display: none;\n }\n }\n }\n}\n\n@include responsive.not-desktop {\n .menu-item {\n display: block;\n box-sizing: border-box;\n color: colours.$colour-admiralty-blue;\n background-color: unset;\n text-align: unset;\n text-decoration: unset;\n\n .menu-title {\n padding: 12px;\n font-weight: 500;\n\n &:hover {\n background-color: colours.$colour-nav-bg-hover;\n }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * @slot - 'admiralty-sub-header-menu-item' a number of components can be placed here to add sub items\n */\n@Component({\n tag: 'admiralty-header-menu-item',\n styleUrl: 'header-menu-item.scss',\n scoped: true,\n})\nexport class HeaderMenuItemComponent {\n @Element() el: HTMLElement;\n\n /**\n * The text that will be displayed in the menu\n */\n @Prop() menuTitle: string;\n\n /**\n * Whether the item is active\n */\n @Prop() active?: boolean = false;\n\n /**\n * The event that is fired when a user clicks on the menu\n */\n @Event() menuItemClick: EventEmitter<void>;\n\n subMenuExists: boolean;\n subMenuSelector: HTMLElement;\n\n connectedCallback() {\n // check if submenu exists on this menu item\n try {\n this.subMenuSelector = this.el.querySelector('admiralty-header-sub-menu-item');\n this.subMenuExists = true;\n\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'true');\n }\n } catch (e) {\n this.subMenuExists = false;\n }\n }\n\n private toggleSubMenu() {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n\n if (subMenu.classList.contains('desktop-hide')) {\n subMenu.classList.add('desktop-visible');\n subMenu.classList.remove('desktop-hide');\n } else {\n subMenu.classList.add('desktop-hide');\n subMenu.classList.remove('desktop-visible');\n }\n }\n\n private closeSubMenu() {\n const subMenu: HTMLDivElement = this.el.querySelector('div.sub-menu');\n subMenu.classList.add('desktop-hide');\n }\n\n handleClick(ev: MouseEvent): CustomEvent<void> {\n ev.stopPropagation();\n\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n this.toggleSubMenu();\n }\n return this.menuItemClick.emit();\n }\n\n /**\n * Handles mouseover events, used to set the aria hidden attribute when submenu\n * is visible\n */\n handleMouseOver(): void {\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'false');\n\n this.toggleSubMenu();\n }\n }\n\n /**\n * Handles mouseout events, used to set the aria hidden attribute when submenu\n * is no longer visible\n */\n handleMouseOut(_ev: Event): void {\n if (this.subMenuExists) {\n this.subMenuSelector.setAttribute('aria-hidden', 'true');\n this.closeSubMenu();\n }\n }\n\n handleFocusOut(ev: FocusEvent) {\n const relatedTarget: any = ev?.relatedTarget;\n\n if (relatedTarget?.outerHTML?.indexOf('button') !== -1) {\n this.closeSubMenu();\n }\n }\n\n render() {\n const { active, menuTitle } = this;\n let menuClass = 'menu-item ';\n menuClass += active ? 'active' : '';\n\n return (\n <Host onMouseOver={_ => this.handleMouseOver()} onMouseOut={(ev: Event) => this.handleMouseOut(ev)}>\n <div class={menuClass} onClick={ev => this.handleClick(ev)}>\n <button class=\"menu-title\" tabindex=\"0\">\n {menuTitle}\n </button>\n <div class=\"sub-menu desktop-hide\" onFocusout={ev => this.handleFocusOut(ev)}>\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAoB,ulFAC1B,MAAAC,EAAeD,E,MCSFE,EAAuB,M,2GAWP,K,CAU3B,iBAAAC,GAEE,IACEC,KAAKC,gBAAkBD,KAAKE,GAAGC,cAAc,kCAC7CH,KAAKI,cAAgB,KAErB,GAAIJ,KAAKI,cAAe,CACtBJ,KAAKC,gBAAgBI,aAAa,cAAe,O,EAEnD,MAAOC,GACPN,KAAKI,cAAgB,K,EAIjB,aAAAG,GACN,MAAMC,EAA0BR,KAAKE,GAAGC,cAAc,gBAEtD,GAAIK,EAAQC,UAAUC,SAAS,gBAAiB,CAC9CF,EAAQC,UAAUE,IAAI,mBACtBH,EAAQC,UAAUG,OAAO,e,KACpB,CACLJ,EAAQC,UAAUE,IAAI,gBACtBH,EAAQC,UAAUG,OAAO,kB,EAIrB,YAAAC,GACN,MAAML,EAA0BR,KAAKE,GAAGC,cAAc,gBACtDK,EAAQC,UAAUE,IAAI,e,CAGxB,WAAAG,CAAYC,GACVA,EAAGC,kBAEH,GAAIhB,KAAKI,cAAe,CACtBJ,KAAKC,gBAAgBI,aAAa,cAAe,SAEjDL,KAAKO,e,CAEP,OAAOP,KAAKiB,cAAcC,M,CAO5B,eAAAC,GACE,GAAInB,KAAKI,cAAe,CACtBJ,KAAKC,gBAAgBI,aAAa,cAAe,SAEjDL,KAAKO,e,EAQT,cAAAa,CAAeC,GACb,GAAIrB,KAAKI,cAAe,CACtBJ,KAAKC,gBAAgBI,aAAa,cAAe,QACjDL,KAAKa,c,EAIT,cAAAS,CAAeP,G,MACb,MAAMQ,EAAqBR,IAAE,MAAFA,SAAE,SAAFA,EAAIQ,cAE/B,KAAIC,EAAAD,IAAa,MAAbA,SAAa,SAAbA,EAAeE,aAAS,MAAAD,SAAA,SAAAA,EAAEE,QAAQ,cAAe,EAAG,CACtD1B,KAAKa,c,EAIT,MAAAc,GACE,MAAMC,OAAEA,EAAMC,UAAEA,GAAc7B,KAC9B,IAAI8B,EAAY,aAChBA,GAAaF,EAAS,SAAW,GAEjC,OACEG,EAACC,EAAI,CAAAC,IAAA,2CAACC,YAAaC,GAAKnC,KAAKmB,kBAAmBiB,WAAarB,GAAcf,KAAKoB,eAAeL,IAC7FgB,EAAA,OAAAE,IAAA,2CAAKI,MAAOP,EAAWQ,QAASvB,GAAMf,KAAKc,YAAYC,IACrDgB,EAAA,UAAAE,IAAA,2CAAQI,MAAM,aAAaE,SAAS,KACjCV,GAEHE,EAAA,OAAAE,IAAA,2CAAKI,MAAM,wBAAwBG,WAAYzB,GAAMf,KAAKsB,eAAeP,IACvEgB,EAAA,QAAAE,IAAA,+C"}
|