class OkayNav{constructor(e,t={}){this.nav=e,this.options=Object.assign({toggleIconClass:"okayNav__menu-toggle",toggleIconContent:"<span></span><span></span><span></span>",alignRight:!0,threshold:30,beforeOpen:()=>{},afterOpen:()=>{},beforeClose:()=>{},afterClose:()=>{},itemHidden:()=>{},itemDisplayed:()=>{}},t),this.navOpen=!1,this.parent=this.nav.parentElement,this._init()}_init(){document.body.classList.add("okayNav-loaded"),this.nav.classList.add("okayNav","loaded");const e=this.nav.querySelector("ul");e.classList.add("okayNav__nav--visible");const t="okayNav__nav--invisible nav-"+(this.options.alignRight?"right":"left"),i=document.createElement("ul");i.className=t;const s=document.createElement("a");s.href="#",s.className=`${this.options.toggleIconClass} okay-invisible`,s.innerHTML=this.options.toggleIconContent,s.setAttribute("aria-label","Show all Category"),this.options.alignRight?this.nav.append(i,s):this.nav.prepend(s,i),this.navVisible=e,this.navInvisible=i,this.toggleIcon=s,this.toggleIconWidth=this.toggleIcon.offsetWidth,this.defaultWidth=this._getChildrenWidth(this.nav),this.parentFullWidth=this.parent.offsetWidth,this.lastVisibleChildWidth=0,this._bindEvents(),this.toggleIcon.addEventListener("click",(e=>{e.preventDefault(),this.toggleInvisibleNav()})),this._recalcNav()}_bindEvents(){this.documentClick=e=>{!this.nav.contains(e.target)&&this.navOpen&&this.closeInvisibleNav()},this.resizeObserver=new ResizeObserver(this._debounce((()=>this._recalcNav()),100)),this.resizeObserver.observe(this.parent),document.addEventListener("click",this.documentClick)}destroy(){if(document.removeEventListener("click",this.documentClick),this.resizeObserver&&this.resizeObserver.disconnect(),this.navInvisible&&this.navInvisible.children.length>0){Array.from(this.navInvisible.children).forEach((e=>{this.navVisible.appendChild(e)}))}this.navInvisible&&this.navInvisible.remove(),this.toggleIcon&&this.toggleIcon.remove(),this.nav.classList.remove("okayNav","loaded"),this.navVisible&&this.navVisible.classList.remove("okayNav__nav--visible"),document.body.classList.remove("okayNav-loaded")}openInvisibleNav(){this.options.beforeOpen(),this.toggleIcon.classList.add("icon--active"),this.navInvisible.classList.add("nav-open"),this.navOpen=!0,this.options.afterOpen()}closeInvisibleNav(){this.options.beforeClose(),this.toggleIcon.classList.remove("icon--active"),this.navInvisible.classList.remove("nav-open"),this.navOpen=!1,this.options.afterClose()}toggleInvisibleNav(){this.navOpen?this.closeInvisibleNav():this.openInvisibleNav()}_getChildrenWidth(e){let t=0;return[...e.children].forEach((e=>{t+=e.offsetWidth})),t}_getVisibleItemCount(){return this.navVisible.querySelectorAll("li").length}_getHiddenItemCount(){return this.navInvisible.querySelectorAll("li").length}_recalcNav(){const e=this.parent.offsetWidth*this.options.threshold/100,t=this.nav.offsetWidth,i=this._getVisibleItemCount(),s=this._getHiddenItemCount();i>0&&t>=e?(this._collapseNavItem(),this._recalcNav()):s>0&&(this._expandNavItem(),this.nav.offsetWidth>=e?this._collapseNavItem():this._recalcNav()),0===this._getHiddenItemCount()?this.toggleIcon.classList.add("okay-invisible"):this.toggleIcon.classList.remove("okay-invisible")}_collapseNavItem(){const e=this.navVisible.querySelector("li:last-child");e&&(this.lastVisibleChildWidth=e.offsetWidth,this.navInvisible.prepend(e),this.options.itemHidden())}_expandNavItem(){const e=this.navInvisible.querySelector("li:first-child");e&&(this.navVisible.appendChild(e),this.options.itemDisplayed())}_debounce(e,t){let i;return(...s)=>{clearTimeout(i),i=setTimeout((()=>e.apply(this,s)),t)}}}export default OkayNav;