import{Segment}from"@dna/analytics";import{RespondToViewport,WithProfiler}from"@dna/mixins";import{LitElement,css,html,nothing,when}from"@lit";const MENU_DELAY=400;class DNADesktopNav extends WithProfiler(RespondToViewport(LitElement)){static properties={key:{type:Number},active:{type:Boolean,reflect:!0},href:{type:String},navTitle:{type:String},hasMenu:{type:Boolean,attribute:"has-menu"}};constructor(){super(),this._setMobileBreakpoints(["mobile","tablet"])}connectedCallback(){super.connectedCallback(),document.addEventListener("dna:header:close",this._handleOverlayMouseover),this.l1Text=this.getAttribute("navTitle"),this.$soloMenuItems=this.querySelectorAll(".js-solo-menu-item"),this.$featuredMenuItems=this.querySelectorAll(".js-featured-menu-items"),this.addEventListener("focusin",this._handleItemFocus)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("dna:header:close",this._handleOverlayMouseover),this.removeEventListener("focusin",this._handleItemFocus)}updateChildrenAccess=(index=1)=>{const $childLinks=this.querySelectorAll("a");for(let i=0;i<$childLinks.length;i++)$childLinks[i].setAttribute("tabindex",index)};_handleItemFocus=event=>{event.target.closest("a")&&this.contains(event.target)&&(this.active=!0)};_handleLinkMouseover=()=>{document.dispatchEvent(new CustomEvent("dna:country-selector:hide")),document.dispatchEvent(new CustomEvent("dna:search-bar:close")),this.dispatchEvent(new CustomEvent("dna:header:close",{bubbles:!0,composed:!0})),this.active=!0,this.updateChildrenAccess(0),this.hasMenu&&(this.setAttribute("aria-expanded",!0),this.hovered||(this.trackMegaMenuOpen(),this.hovered=!0))};_handleOverlayMouseover=event=>{this.active=!1,this.setAttribute("aria-expanded",!1),!(document.activeElement.classList.contains("js-main-menu-section")||this.contains(document.activeElement))&&(this.updateChildrenAccess(-1),event.type!=="dna:header:close"&&event?.target?.classList.contains("overlay")&&(this.hovered=!1,this.$soloMenuItems.length&&this.untrackMegaMenuItemClick(this.$soloMenuItems),this.$featuredMenuItems.length&&this.untrackMegaMenuItemClick(this.$featuredMenuItems)))};trackMegaMenuOpen(){Segment.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.MAIN_MENU_SECTION_EXPANDED,{main_menu_section:this.navTitle}),this.$soloMenuItems.length&&this.trackMegaMenuItemClick(this.$soloMenuItems),this.$featuredMenuItems.length&&this.trackMegaMenuItemClick(this.$featuredMenuItems)})}trackMegaMenuItemClick(items){for(const item of items)item.addEventListener("click",event=>{const $clickedLink=event.target.closest("a"),clickedText=$clickedLink?.textContent?.trim(),clickedLink=$clickedLink?.getAttribute("href")?.trim();this.trackMenuItemClick(clickedText,clickedLink)})}untrackMegaMenuItemClick(items){for(const item of items)item.removeEventListener("click",event=>{const $clickedLink=event.target.closest("a"),clickedText=$clickedLink?.textContent?.trim(),clickedLink=$clickedLink?.getAttribute("href")?.trim();this.trackMenuItemClick(clickedText,clickedLink)})}trackMenuItemClick(text,link){text&&link?Segment.protect(()=>{const l1=this.l1Text,l2=` - ${text}`;Segment.track(Segment.CONSTANTS.EVENTS.MAIN_MENU_ITEM_CLICKED,{main_menu_item:`${l1}${l2}`,main_menu_item_link:link,main_menu_item_text:text})}):Segment.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.MAIN_MENU_ITEM_CLICKED,{main_menu_item:this.l1Text,main_menu_item_link:this.href,main_menu_item_text:this.l1Text})})}render(){return html`
${when(this.isMobile,()=>nothing,()=>html`
${when(this.href==="#",()=>html`
`,()=>html`
`)}
`)}
`}static styles=css`
:host([active]) .overlay {
visibility: visible;
opacity: 1;
}
:host([active]) .menu {
max-height: 1000px;
transition: max-height 1s ease;
transition-delay: ${MENU_DELAY}ms;
}
li > a {
color: inherit;
cursor: pointer;
text-decoration: none;
}
li > div {
cursor: default;
}
:host(:not([has-menu])) .menu {
display: none;
}
:host(:not([has-menu])) .overlay {
display: none;
}
.menu {
position: absolute;
width: 100%;
left: 0;
top: 100%;
z-index: 1;
overflow: hidden;
height: auto;
max-height: 0px;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
min-height: 100vh;
top: var(--dna-header-height);
left: 0;
right: 0;
bottom: 0;
background-color: rgba(1, 0, 0, 0.5);
z-index: -1;
visibility: hidden;
opacity: 0;
}
`}class DNADesktopNavChild extends WithProfiler(RespondToViewport(LitElement)){static properties={href:{type:String},current:{type:Boolean,reflect:!0}};constructor(){super(),this._setMobileBreakpoints(["mobile","tablet"])}connectedCallback(){super.connectedCallback(),this.$menuSection=this.closest(".js-main-menu-section"),this.l1Text=this.$menuSection?.getAttribute("navTitle");const $menuChild=this.closest(".js-main-menu-child"),$menuChildTitle=$menuChild?.querySelector(".js-main-menu-child-title");this.l2Text=$menuChildTitle?.textContent?.trim(),this.l2Link=$menuChild?.renderRoot.querySelector(".js-main-menu-child-title")?.getAttribute("href"),this.trackMenuL3Click()}trackMenuL2Click(){this.trackMenuItemClick(this.l2Text,this.l2Link)}trackMenuL3Click(){const $menuItems=this.querySelectorAll(".js-main-menu-child-item");for(const $item of $menuItems)$item.addEventListener("click",event=>{const $clickedLink=event.target.closest("a");this.l3Text=$clickedLink?.textContent?.trim();const l3Link=$clickedLink?.getAttribute("href")?.trim();this.trackMenuItemClick(this.l3Text,l3Link)})}trackMenuItemClick(text,link){Segment.protect(()=>{const l1=this.l1Text,l2=this.l2Text?` - ${this.l2Text}`:"",l3=this.l3Text?` - ${this.l3Text}`:"";Segment.track(Segment.CONSTANTS.EVENTS.MAIN_MENU_ITEM_CLICKED,{main_menu_item:`${l1}${l2}${l3}`,main_menu_item_link:link,main_menu_item_text:text})})}render(){return html`
${when(this.isMobile,()=>nothing,()=>html`
${this.href===null?html`
`:html`
`}