import{css as e,html as t}from"../../../../../lit/index.js";import{store as i}from"../haxcms-site-store.js";import{HAXCMSI18NMixin as s}from"./HAXCMSI18NMixin.js";import"../../../../simple-icon/simple-icon.js";import"../../../../simple-icon/lib/simple-icons.js";import"../../../../simple-icon/lib/simple-icon-button-lite.js";import"../../../../simple-tooltip/simple-tooltip.js";import{autorun as o,toJS as n}from"../../../../../mobx/dist/mobx.esm.js";import{localStorageSet as l,localStorageGet as m}from"../../../../utils/utils.js";const HAXCMSMobileMenuMixin=function(u){return class extends(s(u)){constructor(){super(),this.isHorizontal=!0,this.isFlex=!0,this.menuOpen=!0,this.t.closeMenu="Close menu",this.t.openMenu="Open menu",this.t.toggleSiteMenu="Toggle site menu";let e=m("hax-mobile-menu-menuOpen",null);null!==e&&(!0===e?this.menuOpen=!0:!1===e&&(this.menuOpen=!1)),this.__disposer=this.__disposer?this.__disposer:[],o((e=>{const t=n(i.activeId);this.shadowRoot&&this.shadowRoot.querySelector("#haxcmsmobilemenunav")&&this.menuOpen&&t&&["sm","xs"].includes(this.responsiveSize)&&this.__HAXCMSMobileMenuToggle(),this.__disposer.push(e)})),this.dispatchEvent(new CustomEvent("super-daemon-define-option",{bubbles:!0,cancelable:!0,composed:!0,detail:{title:this.t.toggleSiteMenu,icon:"hax:menu-open",tags:["CMS","site","menu"],value:{target:this,method:"__HAXCMSMobileMenuClickToggle"},context:"CMS",eventName:"super-daemon-element-method",path:"CMS/site/menu/toggle"}}))}static get styles(){let t=[];return super.styles&&(t=super.styles),[t,e`
          site-menu:not(:defined) {
            display: none;
          }
          replace-tag[with="site-menu"] {
            height: 100vh;
          }
          :host([responsive-size="xs"][menu-open]),
          :host([responsive-size="sm"][menu-open]) {
            overflow: hidden;
          }
          simple-icon-button-lite {
            color: inherit;
          }
        `]}HAXCMSMobileMenuButton(e="auto"){return t`
        <simple-icon-button-lite
          class="btn"
          icon="${this.menuOpen?"hax:menu-open":"icons:menu"}"
          label="${this.menuOpen?this.t.closeMenu:this.t.openMenu}"
          id="haxcmsmobilemenubutton"
          .part="${this.editMode?"edit-mode-active":""}"
          @click="${this.__HAXCMSMobileMenuClickToggle}"
        ></simple-icon-button-lite>
        <simple-tooltip for="haxcmsmobilemenubutton" position="${e}">
          ${this.menuOpen?this.t.closeMenu:this.t.openMenu}
        </simple-tooltip>
      `}__HAXCMSMobileMenuClickToggle(){this.__HAXCMSMobileMenuToggle(),l("hax-mobile-menu-menuOpen",this.menuOpen)}__HAXCMSMobileMenuToggle(){this.menuOpen?(this.menuOpen=!1,this.shadowRoot.querySelector("#haxcmsmobilemenunav")&&this.shadowRoot.querySelector("#haxcmsmobilemenunav").setAttribute("tabindex","-1")):(this.menuOpen=!0,this.shadowRoot.querySelector("#haxcmsmobilemenunav")&&this.shadowRoot.querySelector("#haxcmsmobilemenunav").removeAttribute("tabindex"))}HAXCMSMobileMenu(e){return t`
        <nav
          id="haxcmsmobilemenunav"
          role="navigation"
          aria-labelledby="sitemenu"
          itemtype="http://schema.org/SiteNavigationElement"
        >
          <replace-tag
            with="site-menu"
            part="site-menu"
            id="sitemenu"
            import-method="view"
          ></replace-tag>
        </nav>
      `}HAXCMSFlexMenu(e=3){return t`
        <nav
          id="haxcmsmobilemenunav"
          role="navigation"
          aria-labelledby="sitemenu"
          itemtype="http://schema.org/SiteNavigationElement"
        >
          <replace-tag
            with="site-menu"
            part="site-menu"
            id="sitemenu"
            max-depth="${e}"
            ?is-flex="${this.isFlex}"
            ?is-horizontal="${this.isHorizontal}"
            import-method="view"
          ></replace-tag>
        </nav>
      `}updated(e){super.updated&&super.updated(e),e.forEach(((e,t)=>{if("responsiveSize"==t&&this[t])switch(this[t]){case"sm":this.isHorizontal=!1,this.menuOpen&&"xs"!=e&&this.__HAXCMSMobileMenuToggle();break;case"xs":this.isHorizontal=!1,this.menuOpen&&"sm"!=e&&this.__HAXCMSMobileMenuToggle();break;default:this.isHorizontal=!0,this.menuOpen||this.__HAXCMSMobileMenuToggle()}}))}static get properties(){let e={};return super.properties&&(e=super.properties),{...e,menuOpen:{type:Boolean,reflect:!0,attribute:"menu-open"},isFlex:{type:Boolean,attribute:"is-flex"},isHorizontal:{type:Boolean,attribute:"is-horizontal"}}}}};export{HAXCMSMobileMenuMixin};