@zanichelli/zanichelli-it-frontend-kit 1.0.0 → 1.0.2

package/dist/zanichelli-it-frontend-kit/p-b6c74a1e.entry.js

@@ -0,0 +1,2 @@
+import{h as e,r as t,a as r,F as i,c as a}from"./p-BWVQ0LD4.js";const n=(e,t)=>t.composedPath().filter((e=>e!==document&&e!==window.window)).some((t=>e.contains(t)));const s=(e,t)=>{e.tabIndex=-1;t.tabIndex=0;t.focus()};const o="default";const h={id:o,label:o};const l=e=>{const t=e.reduce(((e,t)=>{const r=e.find((({group:e})=>e.id===(t.group?.id||h.id)));if(!r){e.push({group:t.group??h,items:[t]})}else{r.items.push(t)}return e}),[]);return t.sort(((e,t)=>e.group.id===o?1:t.group.id===o?-1:0))};const u=({controlledBy:t,items:r,currentPath:i=[],onItemKeyDown:a})=>{if(!r?.length){return null}const n=l(r);const s=e=>i.includes(t)&&i.includes(e.id);return e("div",{class:"menu-wrapper",role:"none"},e("div",{class:"menu","aria-labelledby":t??undefined,role:"menu"},n.map((({group:t,items:r})=>e("div",{class:{group:true,highlight:r.some((e=>e.highlight))}},t.id!==o?e("div",{class:"group-name",id:t.id},t.label):n.length>1?e("div",{class:"group-name"}):null,e("ul",{class:"menu-list",role:"group","aria-labelledby":t.id!==o?t.id:undefined},r.map((t=>e("li",{role:"none"},t.href&&e("a",{class:{"menu-item":true,active:s(t)},href:t.href,role:"menuitem",tabIndex:-1,"aria-current":s(t)?"page":"false",onKeyDown:e=>a(e),target:t.target},t.label))))))))))};const c=":host{position:relative;z-index:2;display:flex;width:100%;background-color:#fff;color:var(--gray900);font-family:var(--font-family-sans)}:host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}ul{padding:0;margin:0;list-style:none}a{color:var(--gray900);cursor:pointer;text-decoration:none}button{all:unset;cursor:pointer}:host nav{width:100%}.shadow-wrapper{position:relative;z-index:1;display:flex;width:100%}.shadow-wrapper::after{position:absolute;top:0;right:0;width:100%;height:100%;background:transparent;box-shadow:var(--shadow-1);content:'';pointer-events:none}.width-limiter{position:relative;display:flex;width:100%;max-width:var(--zanit-menubar-max-width, 1366px);margin:0 auto}.shadow-wrapper+.shadow-wrapper{z-index:0}.sub-menubar>ul{gap:28px}.width-limiter>ul,.sub-menubar>ul{position:relative;display:flex;width:100%;align-items:center;padding:0 var(--grid-margin);margin-right:auto;margin-left:auto;gap:20px}.shadow-wrapper>.width-limiter,.shadow-wrapper>ul{width:100%;max-width:var(--zanit-menubar-max-width, 1366px)}ul.menubar{padding-right:0}.menubar z-ghost-loading{display:block;width:120px;height:1.25rem}.menubar>li[role='separator']{width:1px;height:1.25rem;background-color:#000}.menubar-item{position:relative;display:flex;align-items:center;padding:14px 0;font-size:1rem;gap:8px;line-height:1.25rem}.menubar .menubar-item{text-transform:uppercase}.menubar-item [data-text]{display:flex;flex-direction:column}.menubar-item.active>[data-text],.menubar-item:hover>[data-text],.menubar-item:focus:focus-visible>[data-text]{font-weight:var(--font-bd)}.menubar-item>[data-text]::after{height:0;content:attr(data-text) / '';font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}.sub-menubar .menubar-item.active::after{position:absolute;z-index:-1;bottom:0;left:-4px;width:calc(100% + 8px);height:4px;background-color:var(--red500);content:''}zanit-search-form{margin-left:auto}";const d=".menu-wrapper{width:100%;background-color:#fff}.menu{position:relative;display:flex;width:100%;flex-direction:column;gap:32px 0}.menu .group{display:flex;flex-direction:column}.menu .group .group-name{border-bottom:1px solid currentcolor;margin-bottom:4px;color:var(--red500);font-size:0.875rem;font-weight:var(--font-rg)}.menu .group .menu-list{display:flex;flex-direction:column;gap:8px}.menu .group .menu-list .menu-item{border-bottom:2px solid transparent;font-size:0.875rem;font-weight:var(--font-md)}.menu .menu-list .menu-item.active,.menu .menu-list .menu-item:hover{border-bottom-color:var(--red500)}.menu .group.highlight .menu-list .menu-item{font-size:1rem}@media (width >= 768px){.menu-wrapper{position:absolute;top:100%;left:0;display:flex;justify-content:center;box-shadow:var(--shadow-1)}.menu{display:grid;width:100%;max-width:var(--zanit-menubar-max-width, 1366px);padding:16px var(--grid-margin);gap:0 24px;grid-auto-columns:minmax(0, max-content);grid-auto-flow:column;grid-template-rows:minmax(0, max-content) max-content}.menu .group{display:grid;grid-row:1 / -1;grid-template-columns:1fr;grid-template-rows:subgrid}@supports not (grid-template-rows: subgrid){.menu .group{grid-template-rows:repeat(auto-fit, minmax(0, max-content))}}.menu .group .group-name{border:none;margin-bottom:16px}.menu .group .menu-list .menu-item{font-size:1rem}.menu .group.highlight .menu-list .menu-item{font-size:1.5rem}.menu .group.highlight .menu-list{gap:16px}}";const m=class{constructor(e){t(this,e)}get host(){return r(this)}items=[];openMenu=undefined;openNavbar=undefined;currentPath=[];isMobile=false;loading=false;data;current=undefined;searchQuery=undefined;timerId;async parseData(e){if(!e){return}if(e instanceof URL){this.items=await this.fetchData(e)}else if(e instanceof Promise){this.loading=true;this.items=await e;this.loading=false}else if(typeof e==="string"){try{this.items=JSON.parse(e);if(!Array.isArray(this.items)||!this.items?.every((e=>e))){throw new Error("Expected an array of MenubarItem objects.")}}catch{let t;try{t=new URL(e)}catch{throw new Error("Invalid string provided for `data` property: not a valid url or JSON.")}this.items=await this.fetchData(t)}}else if(Array.isArray(e)&&e.every((e=>e))){this.items=e}else{throw new Error("Invalid `data` property value. Expected an url, a JSON or an array/promise of MenubarItem objects.")}}onItemsChange(){this.initTabindex()}onCurrentChange(){this.currentPath=this.current?.split("/").filter(Boolean)||[]}async connectedCallback(){const e=window.matchMedia("(width < 768px)");this.isMobile=e.matches;e.onchange=e=>{this.isMobile=e.matches;this.initTabindex();this.openMenu=undefined};await this.parseData(this.data);this.onCurrentChange();this.initTabindex()}handleOutsideClick(e){if(!this.openMenu||n(this.host,e)){return}this.openMenu=undefined}handleKeydown(e){switch(e.key){case"Escape":case"Tab":this.openMenu=undefined;break}}handleMouseover(){clearTimeout(this.timerId)}handleMouseout(e){this.timerId=window.setTimeout((()=>{if(!this.openMenu||n(this.host,e)){return}this.openMenu=undefined}),500)}handleFocusout(e){const t=e.relatedTarget;if(!this.openMenu||this.host.shadowRoot.querySelector(".menu")?.contains(t)){return}this.openMenu=undefined}async fetchData(e){try{this.loading=true;const t=await(await fetch(e)).json();this.loading=false;if(!Array.isArray(t)||!t.every((e=>e))){throw new Error("Invalid data structure. Expected an array of MenuItem objects.")}return t}catch(e){this.loading=false;console.error("Error fetching menubar data:",e);throw new Error("Failed to fetch menubar data from the provided URL.",{cause:e})}}initTabindex(){setTimeout((()=>{this.host.shadowRoot.querySelectorAll('[role="menubar"]')?.forEach((e=>{e.querySelectorAll('[role="menuitem"]')?.forEach(((e,t)=>e.setAttribute("tabindex",t===0?"0":"-1")))}))}),100)}isActive(e){if(this.currentPath.length===0){return false}if(this.currentPath.includes(e.id)){return true}if(e.menuItems?.length){return e.menuItems.some((e=>e.id===this.current))}if(e.navbarItems?.length){const t=e.navbarItems.some((e=>this.isActive(e)));if(t){return true}}return false}showMenu(e){this.openMenu=undefined;if(!e.menuItems?.length){return}this.openMenu=e.id}getParentMenubarElements(e){return Array.from(e?.closest('[role="menubar"]')?.querySelectorAll(':scope > li a[role="menuitem"]')??[])}focusPreviousItem(e){this.openMenu=undefined;const t=this.getParentMenubarElements(e);e.tabIndex=-1;const r=t.indexOf(e);const i=t[(r-1+t.length)%t.length];i.tabIndex=0;i.focus();if(i.ariaHasPopup==="true"&&this.openMenu){this.openMenu=i.id}}focusNextItem(e){this.openMenu=undefined;const t=this.getParentMenubarElements(e);e.tabIndex=-1;const r=t.indexOf(e);const i=t[(r+1)%t.length];i.tabIndex=0;i.focus();if(i.ariaHasPopup==="true"&&this.openMenu){this.openMenu=i.id}}handleItemKeydown(e,t){const r=e.target;switch(e.key){case"Home":{e.preventDefault();e.stopPropagation();const t=this.getParentMenubarElements(r)[0];s(r,t);break}case"End":{e.preventDefault();e.stopPropagation();const t=this.getParentMenubarElements(r).pop();s(r,t);break}case"ArrowUp":{if(!t.menuItems?.length){break}e.preventDefault();e.stopPropagation();this.openMenu=t.id;setTimeout((()=>{const e=Array.from(this.host.shadowRoot.querySelectorAll(`[aria-labelledby=${t.id}] [role="menuitem"]`));s(r,e[e.length-1])}),100);break}case"ArrowRight":{e.preventDefault();e.stopPropagation();this.focusNextItem(r);break}case"ArrowDown":{if(!t.menuItems?.length){break}this.openMenu=t.id;setTimeout((()=>{const e=this.host.shadowRoot.querySelector(`[aria-labelledby=${t.id}] [role="menuitem"]`);e.tabIndex=0;e.focus()}),100);break}case"ArrowLeft":{e.preventDefault();e.stopPropagation();this.focusPreviousItem(r);break}}}getPreviousGroup(e){const t=Array.from(e?.closest('[role="menu"]')?.querySelectorAll('[role="group"]')??[]);const r=t.indexOf(e);return t[r-1]}getNextGroup(e){const t=Array.from(e?.closest('[role="menu"]')?.querySelectorAll('[role="group"]')??[]);const r=t.indexOf(e);return t[r+1]}handleMenuKeydown(e){const t=e.target;const r=Array.from(t.closest('[role="menu"]')?.querySelectorAll('[role="menuitem"]')??[]);const i=r.indexOf(t);switch(e.key){case"ArrowUp":{e.preventDefault();e.stopPropagation();const a=r[i-1]||r[r.length-1];s(t,a);break}case"ArrowRight":{e.preventDefault();e.stopPropagation();const r=t.closest("[role=group]");const i=this.getNextGroup(r);if(!i){t.tabIndex=-1;const e=t.closest('[role="menu"][aria-labelledby]').getAttribute("aria-labelledby");const r=this.host.shadowRoot.getElementById(e);this.focusNextItem(r);break}const a=i.querySelectorAll('[role="menuitem"]')??[];s(t,a[0]);break}case"ArrowDown":{e.preventDefault();e.stopPropagation();const a=r[i+1]||r[0];s(t,a);break}case"ArrowLeft":{e.preventDefault();e.stopPropagation();const r=t.closest("[role=group]");const i=this.getPreviousGroup(r);if(!i){t.tabIndex=-1;const e=t.closest('[role="menu"][aria-labelledby]').getAttribute("aria-labelledby");const r=this.host.shadowRoot.getElementById(e);this.focusPreviousItem(r);break}const a=i.querySelectorAll('[role="menuitem"]')??[];s(t,a[0]);break}case"Home":e.preventDefault();e.stopPropagation();s(t,r[0]);break;case"End":e.preventDefault();e.stopPropagation();s(t,r[r.length-1]);break}}render(){if(this.isMobile){return e("zanit-mobile-menubar",{items:this.items,currentPath:this.currentPath,searchQuery:this.searchQuery,loading:this.loading})}return e("nav",{"aria-label":"Zanichelli.it"},e("div",{class:"shadow-wrapper"},e("div",{class:"width-limiter"},e("ul",{class:"menubar",role:"menubar","aria-label":"Zanichelli.it"},this.loading&&[...new Array(4)].map(((t,r)=>e(i,null,e("li",{role:"none"},e("div",{class:"menubar-item"},e("z-ghost-loading",null))),r<3&&e("li",{role:"separator"})))),this.items?.map(((t,r)=>e(i,null,e("li",{role:"none"},e("a",{class:{"menubar-item":true,active:this.isActive(t)},href:t.href,id:t.id,role:"menuitem",tabIndex:-1,"aria-expanded":t.menuItems?.length?this.openMenu===t.id?"true":"false":undefined,"aria-haspopup":t.menuItems?.length?"true":"false","aria-current":this.current.includes(t.id)?"page":"false",onPointerOver:()=>this.showMenu(t),onKeyDown:e=>this.handleItemKeydown(e,t),target:t.target},e("span",{"data-text":t.label},t.label),t.menuItems?.length>0&&e("z-icon",{name:this.openMenu===t.id?"chevron-up":"chevron-down",width:"0.875rem",height:"0.875rem"}))),r<this.items?.length-1&&e("li",{role:"separator"}))))),e("zanit-search-form",{searchQuery:this.searchQuery,onResetSearch:()=>this.searchQuery=undefined})),this.items.map((t=>this.openMenu===t.id&&e(u,{controlledBy:t.id,items:t.menuItems,currentPath:this.currentPath,onItemKeyDown:e=>this.handleMenuKeydown(e)})))),this.items?.filter((e=>this.isActive(e))).map((t=>t.navbarItems?.length&&e("nav",{class:{"sub-menubar":true,"shadow-wrapper":true}},e("ul",{role:"menubar"},t.navbarItems.map((r=>e(i,null,e("li",{role:"none"},e("a",{class:{"menubar-item":true,active:this.isActive(r)},href:r.href,id:r.id,role:"menuitem",tabIndex:-1,"aria-haspopup":r.menuItems?.length?"true":"false","aria-expanded":r.menuItems?.length?this.openMenu===r.id?"true":"false":undefined,"aria-current":this.current.includes(r.id)?"page":"false",onPointerOver:()=>this.showMenu(r),onKeyDown:e=>this.handleItemKeydown(e,r),target:t.target},e("span",null,r.label),r.menuItems?.length>0&&e("z-icon",{name:this.openMenu===r.id?"chevron-up":"chevron-down",width:"0.75rem",height:"0.75rem"}))))))),t.navbarItems.map((t=>this.openMenu===t.id&&e(u,{controlledBy:t.id,items:t.menuItems,currentPath:this.currentPath,onItemKeyDown:e=>this.handleMenuKeydown(e)})))))))}static get watchers(){return{data:["parseData"],items:["onItemsChange"],current:["onCurrentChange"]}}};m.style=c+d;const p=":host{position:relative;z-index:2;display:block;width:100%;max-width:100%;background-color:#fff;color:var(--gray900);fill:var(--gray900);font-family:var(--font-family-sans)}:host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}ul{padding:0;margin:0;list-style:none}a{color:var(--gray900);cursor:pointer;text-decoration:none}button{all:unset;cursor:pointer}nav{display:flex;width:100%;align-items:center;padding:8px var(--grid-margin)}nav::after{position:absolute;top:0;right:0;width:100%;height:100%;background:transparent;box-shadow:var(--shadow-1);content:'';pointer-events:none}.burger-button{margin-left:auto}.mobile-menu{position:absolute;top:100%;left:0;display:flex;width:100%;flex-direction:column;padding:16px var(--grid-margin) 32px;background-color:#fff;box-shadow:var(--shadow-2);gap:8px}.mobile-menu li{width:100%}.mobile-menu .items-container{display:flex;min-height:256px;flex-direction:column;gap:8px}.mobile-menu .items-container z-ghost-loading{width:40%;height:1.2rem}.mobile-menu .items-container .menubar-item{display:block;width:100%;padding:8px 0;font-size:1rem;text-align:left}.mobile-menu .items-container li:not(:last-child) .menubar-item{border-bottom:1px solid #000}[role='menuitem'].parent{display:flex;width:fit-content;align-items:center;padding:0;border:none;font-size:0.875rem;gap:8px}";const b=".menu-wrapper{width:100%;background-color:#fff}.menu{position:relative;display:flex;width:100%;flex-direction:column;gap:32px 0}.menu .group{display:flex;flex-direction:column}.menu .group .group-name{border-bottom:1px solid currentcolor;margin-bottom:4px;color:var(--red500);font-size:0.875rem;font-weight:var(--font-rg)}.menu .group .menu-list{display:flex;flex-direction:column;gap:8px}.menu .group .menu-list .menu-item{border-bottom:2px solid transparent;font-size:0.875rem;font-weight:var(--font-md)}.menu .menu-list .menu-item.active,.menu .menu-list .menu-item:hover{border-bottom-color:var(--red500)}.menu .group.highlight .menu-list .menu-item{font-size:1rem}@media (width >= 768px){.menu-wrapper{position:absolute;top:100%;left:0;display:flex;justify-content:center;box-shadow:var(--shadow-1)}.menu{display:grid;width:100%;max-width:var(--zanit-menubar-max-width, 1366px);padding:16px var(--grid-margin);gap:0 24px;grid-auto-columns:minmax(0, max-content);grid-auto-flow:column;grid-template-rows:minmax(0, max-content) max-content}.menu .group{display:grid;grid-row:1 / -1;grid-template-columns:1fr;grid-template-rows:subgrid}@supports not (grid-template-rows: subgrid){.menu .group{grid-template-rows:repeat(auto-fit, minmax(0, max-content))}}.menu .group .group-name{border:none;margin-bottom:16px}.menu .group .menu-list .menu-item{font-size:1rem}.menu .group.highlight .menu-list .menu-item{font-size:1.5rem}.menu .group.highlight .menu-list{gap:16px}}";const f=class{constructor(e){t(this,e)}get host(){return r(this)}currentPath=[];items=[];searchQuery=undefined;loading=false;lastCurrent=undefined;parentItem=undefined;menuItems=undefined;menuType=undefined;open;onItemsChange(){this.lastCurrent=this.currentPath?.length?this.currentPath[this.currentPath.length-1]:undefined;this.setupData(this.items)}setupData(e,t){if(this.lastCurrent===undefined){this.parentItem=undefined;this.menuType="menubar";this.menuItems=e;return}for(const r of e){if(r.id===this.lastCurrent){this.parentItem=t;this.menuType=r.menuItems?.length?"menu":"menubar";this.menuItems=r.menuItems||r.navbarItems;return}if(this.currentPath.length>1&&r.id===this.currentPath[this.currentPath.length-2]&&r.menuItems?.some((({id:e})=>e===this.lastCurrent))){this.parentItem=r;this.menuType=r.menuItems?.length?"menu":"menubar";this.menuItems=r.menuItems||r.navbarItems;return}if(r.navbarItems?.length){this.setupData(r.navbarItems,r)}}}get menuItemsElement(){return Array.from(this.host.shadowRoot.querySelectorAll('[role="menuitem"]'))}initTabindex(){this.menuItemsElement.forEach(((e,t)=>e.setAttribute("tabindex",t===0?"0":"-1")))}toggleMenu(){if(this.open){this.open=false}else{this.open=true;setTimeout((()=>{this.initTabindex();this.menuItemsElement[0]?.focus()}),200)}}handleItemKeydown(e){switch(e.key){case"ArrowUp":{e.preventDefault();e.stopPropagation();const t=this.menuItemsElement;const r=t.indexOf(e.target);const i=t[(r-1+t.length)%t.length];s(t[r],i);break}case"ArrowDown":{e.preventDefault();e.stopPropagation();const t=this.menuItemsElement;const r=t.indexOf(e.target);const i=t[(r+1)%t.length];s(t[r],i);break}case"Home":{e.preventDefault();e.stopPropagation();s(e.target,this.menuItemsElement[0]);break}case"End":{e.preventDefault();e.stopPropagation();s(e.target,this.menuItemsElement.pop());break}}}connectedCallback(){this.lastCurrent=this.currentPath?.length?this.currentPath[this.currentPath.length-1]:undefined;this.setupData(this.items)}handleOutsideClick(e){if(n(this.host,e)){return}this.open=false}handleKeydown(e){switch(e.key){case"Escape":this.open=false;break;case"Tab":if(n(this.host,e)){break}this.open=false;break}}handleFocusout(e){if(n(this.host,e)){return}this.open=false}render(){return e("nav",{key:"8670451f03909d3008f6e21d02ee5c7412d86bac","aria-label":"Zanichelli.it"},e("z-logo",{key:"8f8704851b84185e6c01bc6cd5e2a3b3cda53a61",imageAlt:"Logo Zanichelli",link:"/",height:32,width:126}),e("button",{key:"02271df658a071f9ae0d91f8140b9e8e15064ccc",class:"burger-button",type:"button","aria-expanded":this.open?"true":"false","aria-controls":"mobile-menu","aria-label":this.open?"Chiudi menù":"Apri menù",onClick:()=>this.toggleMenu()},e("z-icon",{key:"fcbff94368d67da8a237190518452048276882a0",name:this.open?"multiply":"burger-menu",width:"1.5rem",height:"1.5rem"})),this.open&&e("ul",{key:"94fae1693d0ebd41d86cfe55450a40cbff88b7dd",class:"mobile-menu",role:"menubar"},e("li",{key:"5e09e8484e6450646d4da570a0791da92e477fc7",role:"none"},e("zanit-search-form",{key:"564813af11cc4b6c62db80ee2acdbeb54cec935f",searchQuery:this.searchQuery,onResetSearch:()=>this.searchQuery=undefined})),!this.loading&&this.currentPath&&this.currentPath.length>0&&e("li",{key:"7b501d3a1c7dcf705bd1bfd8d03a29573c27f891",role:"none"},e("a",{key:"949db4a79629f0d0ab44cc94d11f717abc87cb4d",class:"parent",href:this.parentItem?.href??"/",id:this.parentItem?.id??undefined,role:"menuitem",tabIndex:-1,onKeyDown:e=>this.handleItemKeydown(e),target:this.parentItem?.target},e("z-icon",{key:"2537588429f0185c67f87702d040fdc8ad7fbe06",name:"arrow-left",width:"0.5rem",height:"0.5rem"}),e("span",{key:"732de0ec2a09d41ecacd62d7fa8e5c799e67e533"},this.parentItem?.label||"Home"))),this.loading?e("div",{class:"items-container",role:"none"},[...new Array(4)].map((()=>e("li",{role:"none"},e("div",{class:"menubar-item",role:"none"},e("z-ghost-loading",null)))))):this.menuType==="menu"?e(u,{items:this.menuItems,controlledBy:this.parentItem?.id,currentPath:this.currentPath,onItemKeyDown:e=>this.handleItemKeydown(e)}):this.menuItems?.length>0&&e("div",{class:"items-container",role:"none"},this.menuItems.map((t=>e("li",{role:"none"},e("a",{class:{"menu-item":this.menuType==="menu","menubar-item":this.menuType==="menubar"},href:t.href,id:t.id,role:"menuitem","aria-current":this.lastCurrent===t.id?"page":"false",tabIndex:-1,onKeyDown:e=>this.handleItemKeydown(e),target:t.target},e("span",{"data-text":t.label},t.label))))))))}static get watchers(){return{items:["onItemsChange"],currentPath:["onItemsChange"]}}};f.style=p+b;const g=":host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}button{all:unset;cursor:pointer}@media (width < 768px){.searchbar{display:flex;align-items:center;border:1px solid #000;border-radius:4px}.searchbar>*:first-child{border-bottom-left-radius:3px;border-top-left-radius:3px}.searchbar button[type='reset']{display:flex;padding:0 0 0 8px;cursor:pointer}.searchbar input{width:100%;height:100%;padding:4px 8px;border:none;background-color:#fff;font-family:var(--font-family-sans);font-size:1rem}.searchbar input[type='search']::-webkit-search-cancel-button,.searchbar input[type='search']::-webkit-search-decoration{appearance:none}.searchbar input::placeholder{color:var(--gray500)}.searchbar .searchbar-button{padding:4px 8px;border-left:1px solid #000;background:var(--zanit-accent-color);border-bottom-right-radius:3px;border-top-right-radius:3px}.searchbar input:focus:focus-visible,.searchbar .searchbar-button:focus:focus-visible{z-index:1}}@media (width >= 768px){.searchbar{display:flex;font-size:1.5rem}.searchbar.searchbar-open{position:absolute;width:100%;height:100%;inset:0}.searchbar .input-wrapper{display:none;width:100%;align-items:center;padding:0 0 0 var(--grid-margin);background-color:#fff;gap:6px;}.searchbar .input-wrapper:not(.hide){display:flex}.searchbar button[type='reset']{display:flex;align-items:center;border-radius:4px;cursor:pointer}.searchbar input{z-index:1;width:100%;height:100%;padding:8px;border:none;background-color:#fff;font-family:var(--font-family-sans);font-size:inherit}.searchbar input[type='search']::-webkit-search-cancel-button,.searchbar input[type='search']::-webkit-search-decoration{appearance:none}.searchbar input::placeholder{color:var(--gray500)}.searchbar .searchbar-button{display:flex;align-items:center;padding:8px 16px;border-right:1px solid #000;border-left:1px solid #000;background:var(--zanit-accent-color);font-family:inherit;font-size:inherit;gap:64px;line-height:1}.searchbar input:focus:focus-visible,.searchbar .searchbar-button:focus:focus-visible{z-index:1}}@media (width >= 768px) and (width < 1152px){.searchbar .searchbar-button>.searchbar-button-label{display:none}}";const w=class{constructor(e){t(this,e);this.search=a(this,"search");this.resetSearch=a(this,"resetSearch")}formElement;get host(){return r(this)}isMobile=false;showSearchbar=false;_searchQuery=undefined;searchQuery=undefined;onSearchQueryChange(){this._searchQuery=this.searchQuery;if(this.searchQuery){this.openSearchbar()}}search;resetSearch;async connectedCallback(){this.showSearchbar=!!this.searchQuery;const e=window.matchMedia("(width < 768px)");this.isMobile=e.matches;e.onchange=e=>{this.isMobile=e.matches}}handleOutsideClick(e){if(this.showSearchbar&&this.formElement&&!n(this.formElement,e)){this.showSearchbar=false}}openSearchbar(){this.showSearchbar=true;setTimeout((()=>{const e=this.host.shadowRoot.querySelector("#searchbar-input");e.focus()}),100)}resetSearchQuery(){this.searchQuery=undefined;this.resetSearch.emit()}handleInputChange(e){this._searchQuery=e.target.value;if(!this._searchQuery){this.searchQuery=undefined}}onSearchSubmit(e){e.preventDefault();if(!this._searchQuery){return}this.showSearchbar=false;const t=this.search.emit({query:this._searchQuery});if(t.defaultPrevented){return}this.formElement.submit()}render(){if(this.isMobile){return e("form",{class:"searchbar",ref:e=>this.formElement=e,role:"search","aria-label":"Cerca",method:"get",action:"/ricerca",onSubmit:e=>this.onSearchSubmit(e),onReset:()=>this.resetSearchQuery()},this.searchQuery&&e("button",{type:"reset","aria-label":"Svuota campo di ricerca"},e("z-icon",{name:"multiply-circled",width:"1rem",height:"1rem"})),e("input",{id:"searchbar-input",name:"q",type:"search",placeholder:"Cerca per parola chiave o ISBN",onInput:e=>this.handleInputChange(e),value:this.searchQuery,required:true}),e("button",{class:"searchbar-button","aria-controls":"searchbar-input","aria-label":"Cerca",type:"submit"},e("z-icon",{name:"search",width:"1.25rem",height:"1.25rem"})))}return e("form",{class:{searchbar:true,"searchbar-open":this.showSearchbar},ref:e=>this.formElement=e,role:"search","aria-label":"Cerca",method:"get",action:"/ricerca",onSubmit:e=>this.onSearchSubmit(e),onReset:()=>this.resetSearchQuery()},e("div",{class:{hide:!this.showSearchbar,"input-wrapper":true},role:"none"},this.searchQuery&&e("button",{type:"reset","aria-label":"Svuota campo di ricerca"},e("z-icon",{name:"multiply-circled",width:"1.5rem",height:"1.5rem"})),e("input",{id:"searchbar-input",name:"q",type:"search",placeholder:"Cerca per parola chiave o ISBN",onInput:e=>this.handleInputChange(e),value:this.searchQuery,required:true})),e("button",{class:"searchbar-button","aria-label":"Cerca","aria-controls":"searchbar-input",type:this.showSearchbar?"submit":"button",onClick:()=>this.openSearchbar()},this.showSearchbar?null:e("span",{class:"searchbar-button-label"},"Cerca"),e("z-icon",{name:"search",width:"2rem",height:"2rem"})))}static get watchers(){return{searchQuery:["onSearchQueryChange"]}}};w.style=g;export{m as zanit_menubar,f as zanit_mobile_menubar,w as zanit_search_form};
+//# sourceMappingURL=p-b6c74a1e.entry.js.map

package/dist/zanichelli-it-frontend-kit/p-b6c74a1e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["containsTarget","ancestor","event","composedPath","filter","el","document","window","some","contains","moveFocus","current","next","tabIndex","focus","DEFAULT_GROUP_KEY","DEFAULT_GROUP","id","label","getGroupedItems","items","groups","reduce","grouped","item","itemGroup","find","group","push","sort","a","b","Menu","controlledBy","currentPath","onItemKeyDown","length","isActive","includes","h","class","role","undefined","map","highlight","href","active","onKeyDown","target","menubarCss","menuCss","ZanitMenubar","openMenu","openNavbar","isMobile","loading","data","searchQuery","timerId","parseData","URL","this","fetchData","Promise","JSON","parse","Array","isArray","every","Error","url","onItemsChange","initTabindex","onCurrentChange","split","Boolean","connectedCallback","mobileMediaQuery","matchMedia","matches","onchange","mql","handleOutsideClick","host","handleKeydown","key","handleMouseover","clearTimeout","handleMouseout","setTimeout","handleFocusout","relatedTarget","shadowRoot","querySelector","fetch","json","error","console","cause","querySelectorAll","forEach","menubar","index","setAttribute","menuItems","menuItem","navbarItems","navbarItem","showMenu","getParentMenubarElements","itemEl","from","closest","focusPreviousItem","menubarElements","currentIndex","indexOf","prevItem","ariaHasPopup","focusNextItem","nextItem","handleItemKeydown","preventDefault","stopPropagation","firstItem","lastItem","pop","firsMenuItem","getPreviousGroup","groupContainer","getNextGroup","handleMenuKeydown","itemElement","currentGroup","nextGroup","menuTriggerId","getAttribute","focusedItem","getElementById","nextGroupItems","prevGroup","prevGroupItems","render","_","Fragment","onPointerOver","name","width","height","onResetSearch","subitem","mobileMenubarCss","ZanitMobileMenubar","lastCurrent","parentItem","menuType","open","setupData","parent","menuItemsElement","toggleMenu","imageAlt","link","type","onClick","searchFormCss","ZanitSearchForm","formElement","showSearchbar","_searchQuery","onSearchQueryChange","openSearchbar","search","resetSearch","searchbarInput","resetSearchQuery","emit","handleInputChange","value","onSearchSubmit","searchEv","query","defaultPrevented","submit","ref","method","action","onSubmit","onReset","placeholder","onInput","required","searchbar","hide"],"sources":["src/utils/utils.ts","src/components/menubar/menu/menu.tsx","src/components/menubar/menubar.css?tag=zanit-menubar&encapsulation=shadow","src/components/menubar/menu/menu.css?tag=zanit-menubar&encapsulation=shadow","src/components/menubar/menubar.tsx","src/components/menubar/mobile-menubar/mobile-menubar.css?tag=zanit-mobile-menubar&encapsulation=shadow","src/components/menubar/menu/menu.css?tag=zanit-mobile-menubar&encapsulation=shadow","src/components/menubar/mobile-menubar/mobile-menubar.tsx","src/components/menubar/search-form/search-form.css?tag=zanit-search-form&encapsulation=shadow","src/components/menubar/search-form/search-form.tsx"],"sourcesContent":["/**\n * Check if an element contains an event target by checking its composedPath.\n * Useful when an event target may come from a component's shadow DOM.\n */\nexport const containsTarget = (ancestor: HTMLElement, event: Event) => {\n  return event\n    .composedPath()\n    .filter((el) => el !== document && el !== window.window)\n    .some((el) => ancestor.contains(el as HTMLElement));\n};\n\n/** Move the focus to `next` element, set tabindex to 0 for `next` and -1 to `current`. */\nexport const moveFocus = (current: HTMLElement, next: HTMLElement) => {\n  current.tabIndex = -1;\n  next.tabIndex = 0;\n  next.focus();\n};\n","import { FunctionalComponent, h } from '@stencil/core';\nimport { MenuItem } from '../../../utils/types';\n\n/**\n * Menu of items that can be grouped.\n * @member {string} controlledBy - The HTML id of the element that controls the menu.\n * @member {MenuItem[]} items - The items to show in the menu.\n * @member {string[]} currentPath - Path of current item.\n * @member {function} onItemKeyDown - The function to call when a key is pressed from a menuitem.\n */\nexport interface MenuProps {\n  controlledBy?: string;\n  items?: MenuItem[];\n  currentPath?: string[];\n  onItemKeyDown?: (event: KeyboardEvent) => void;\n}\n\nconst DEFAULT_GROUP_KEY = 'default';\nconst DEFAULT_GROUP = {\n  id: DEFAULT_GROUP_KEY,\n  label: DEFAULT_GROUP_KEY,\n};\n\n/** Get the items grouped by their group. */\nconst getGroupedItems = (items: MenuItem[]) => {\n  const groups = items.reduce<{ group: MenuProps['items'][number]['group']; items: MenuItem[] }[]>((grouped, item) => {\n    const itemGroup = grouped.find(({ group }) => group.id === (item.group?.id || DEFAULT_GROUP.id));\n    if (!itemGroup) {\n      grouped.push({ group: item.group ?? DEFAULT_GROUP, items: [item] });\n    } else {\n      itemGroup.items.push(item);\n    }\n\n    return grouped;\n  }, []);\n\n  // Sort to keep default group at the end\n  return groups.sort((a, b) => (a.group.id === DEFAULT_GROUP_KEY ? 1 : b.group.id === DEFAULT_GROUP_KEY ? -1 : 0));\n};\n\n/**\n * Floating menu component. It shows a list of items that can be grouped.\n */\nexport const Menu: FunctionalComponent<MenuProps> = ({ controlledBy, items, currentPath = [], onItemKeyDown }) => {\n  if (!items?.length) {\n    return null;\n  }\n\n  const groups = getGroupedItems(items);\n\n  const isActive = (item: MenuItem) => currentPath.includes(controlledBy) && currentPath.includes(item.id);\n\n  return (\n    <div\n      class=\"menu-wrapper\"\n      role=\"none\"\n    >\n      <div\n        class=\"menu\"\n        aria-labelledby={controlledBy ?? undefined}\n        role=\"menu\"\n      >\n        {groups.map(({ group, items }) => (\n          <div class={{ group: true, highlight: items.some((item) => item.highlight) }}>\n            {group.id !== DEFAULT_GROUP_KEY ? (\n              <div\n                class=\"group-name\"\n                id={group.id}\n              >\n                {group.label}\n              </div>\n            ) : groups.length > 1 ? (\n              // empty div to keep the same height as the other groups\n              <div class=\"group-name\" />\n            ) : null}\n            <ul\n              class=\"menu-list\"\n              role=\"group\"\n              aria-labelledby={group.id !== DEFAULT_GROUP_KEY ? group.id : undefined}\n            >\n              {items.map((item) => (\n                <li role=\"none\">\n                  {item.href && (\n                    <a\n                      class={{\n                        'menu-item': true,\n                        'active': isActive(item),\n                      }}\n                      href={item.href}\n                      role=\"menuitem\"\n                      tabIndex={-1}\n                      aria-current={isActive(item) ? 'page' : 'false'}\n                      onKeyDown={(event) => onItemKeyDown(event)}\n                      target={item.target}\n                    >\n                      {item.label}\n                    </a>\n                  )}\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n",":host {\n  --zanit-menubar-max-width: ;\n\n  position: relative;\n  z-index: 2;\n  display: flex;\n  width: 100%;\n  background-color: #fff;\n  color: var(--gray900);\n  font-family: var(--font-family-sans);\n}\n\n:host,\n*,\n::before,\n::after {\n  box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nul {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\na {\n  color: var(--gray900);\n  cursor: pointer;\n  text-decoration: none;\n}\n\nbutton {\n  all: unset;\n  cursor: pointer;\n}\n\n:host nav {\n  width: 100%;\n}\n\n.shadow-wrapper {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: 100%;\n}\n\n.shadow-wrapper::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  box-shadow: var(--shadow-1);\n  content: '';\n  pointer-events: none;\n}\n\n.width-limiter {\n  position: relative;\n  display: flex;\n  width: 100%;\n  max-width: var(--zanit-menubar-max-width, 1366px);\n  margin: 0 auto;\n}\n\n.shadow-wrapper + .shadow-wrapper {\n  z-index: 0;\n}\n\n.sub-menubar > ul {\n  gap: 28px;\n}\n\n.width-limiter > ul,\n.sub-menubar > ul {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 0 var(--grid-margin);\n  margin-right: auto;\n  margin-left: auto;\n  gap: 20px;\n}\n\n.shadow-wrapper > .width-limiter,\n.shadow-wrapper > ul {\n  width: 100%;\n  max-width: var(--zanit-menubar-max-width, 1366px);\n}\n\nul.menubar {\n  padding-right: 0;\n}\n\n.menubar z-ghost-loading {\n  display: block;\n  width: 120px;\n  height: 1.25rem;\n}\n\n/* separator bar */\n.menubar > li[role='separator'] {\n  width: 1px;\n  height: 1.25rem;\n  background-color: #000;\n}\n\n.menubar-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 14px 0;\n  font-size: 1rem;\n  gap: 8px;\n  line-height: 1.25rem;\n}\n\n.menubar .menubar-item {\n  text-transform: uppercase;\n}\n\n.menubar-item [data-text] {\n  display: flex;\n  flex-direction: column;\n}\n\n.menubar-item.active > [data-text],\n.menubar-item:hover > [data-text],\n.menubar-item:focus:focus-visible > [data-text] {\n  font-weight: var(--font-bd);\n}\n\n/* To avoid size changes in the element, when it is hovered and becomes bold,\nwe put the same text already bold with height 0, so as to always occupy the maximum necessary width. */\n.menubar-item > [data-text]::after {\n  height: 0;\n  content: attr(data-text) / '';\n  font-weight: var(--font-bd);\n  letter-spacing: normal;\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n/* active item bottom border */\n.sub-menubar .menubar-item.active::after {\n  position: absolute;\n  z-index: -1;\n  bottom: 0;\n  left: -4px;\n  width: calc(100% + 8px); /* the border is 4px per side larger than its container */\n  height: 4px;\n  background-color: var(--red500);\n  content: '';\n}\n\nzanit-search-form {\n  margin-left: auto;\n}\n",".menu-wrapper {\n  width: 100%;\n  background-color: #fff;\n}\n\n.menu {\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 32px 0;\n}\n\n.menu .group {\n  display: flex;\n  flex-direction: column;\n}\n\n.menu .group .group-name {\n  border-bottom: 1px solid currentcolor;\n  margin-bottom: 4px;\n  color: var(--red500);\n  font-size: 0.875rem;\n  font-weight: var(--font-rg);\n}\n\n.menu .group .menu-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.menu .group .menu-list .menu-item {\n  border-bottom: 2px solid transparent;\n  font-size: 0.875rem;\n  font-weight: var(--font-md);\n}\n\n.menu .menu-list .menu-item.active,\n.menu .menu-list .menu-item:hover {\n  border-bottom-color: var(--red500);\n}\n\n.menu .group.highlight .menu-list .menu-item {\n  font-size: 1rem;\n}\n\n@media (width >= 768px) {\n  .menu-wrapper {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    display: flex;\n    justify-content: center;\n    box-shadow: var(--shadow-1);\n  }\n\n  .menu {\n    display: grid;\n    width: 100%;\n    max-width: var(--zanit-menubar-max-width, 1366px);\n    padding: 16px var(--grid-margin);\n    gap: 0 24px;\n    grid-auto-columns: minmax(0, max-content);\n    grid-auto-flow: column;\n    grid-template-rows: minmax(0, max-content) max-content;\n  }\n\n  .menu .group {\n    display: grid;\n    grid-row: 1 / -1;\n    grid-template-columns: 1fr;\n    grid-template-rows: subgrid;\n  }\n\n  @supports not (grid-template-rows: subgrid) {\n    .menu .group {\n      grid-template-rows: repeat(auto-fit, minmax(0, max-content));\n    }\n  }\n\n  .menu .group .group-name {\n    border: none;\n    margin-bottom: 16px;\n  }\n\n  .menu .group .menu-list .menu-item {\n    font-size: 1rem;\n  }\n\n  .menu .group.highlight .menu-list .menu-item {\n    font-size: 1.5rem;\n  }\n\n  .menu .group.highlight .menu-list {\n    gap: 16px;\n  }\n}\n","import { Component, Element, Fragment, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { MenubarItem } from '../../utils/types';\nimport { containsTarget, moveFocus } from '../../utils/utils';\nimport { Menu } from './menu/menu';\n\n/**\n * Main menubar component. Each item can have a menu with subitems\n * When a main menubar item is the current active one, a sub-menubar is shown and each subitem can have a menu with subitems.\n * @cssprop {--zanit-menubar-max-width} Maximum width of the menubar.\n */\n@Component({\n  tag: 'zanit-menubar',\n  styleUrls: ['menubar.css', 'menu/menu.css'],\n  shadow: true,\n})\nexport class ZanitMenubar {\n  @Element() host: HTMLZanitMenubarElement;\n\n  /** Menubar items extracted from `data`. */\n  @State()\n  items: MenubarItem[] = [];\n\n  /** ID of the currently open menu. */\n  @State()\n  openMenu: string | undefined = undefined;\n\n  /** ID of the item to show the subitems navbar for. */\n  @State()\n  openNavbar: string | undefined = undefined;\n\n  /** IDs of the current prop */\n  @State()\n  currentPath: string[] = [];\n\n  @State()\n  isMobile: boolean = false;\n\n  @State()\n  loading: boolean = false;\n\n  /** The data to build the menu (as an array of `MenubarItem` or a JSON array) or the url to fetch to retrieve it. */\n  @Prop()\n  data: Promise<MenubarItem[]> | MenubarItem[] | URL | string;\n\n  /** Path of the current item. */\n  @Prop()\n  current: string | undefined = undefined;\n\n  /** Initial search query. */\n  @Prop({ mutable: true })\n  searchQuery: string | undefined = undefined;\n\n  private timerId: number;\n\n  /** Setup the list of items. */\n  @Watch('data')\n  async parseData(data: typeof this.data) {\n    if (!data) {\n      return;\n    }\n\n    if (data instanceof URL) {\n      this.items = await this.fetchData(data);\n    } else if (data instanceof Promise) {\n      this.loading = true;\n      this.items = await data;\n      this.loading = false;\n    } else if (typeof data === 'string') {\n      try {\n        this.items = JSON.parse(data);\n        if (!Array.isArray(this.items) || !this.items?.every((item) => item satisfies MenubarItem)) {\n          throw new Error('Expected an array of MenubarItem objects.');\n        }\n      } catch {\n        let url: URL;\n        try {\n          url = new URL(data);\n        } catch {\n          throw new Error('Invalid string provided for `data` property: not a valid url or JSON.');\n        }\n\n        this.items = await this.fetchData(url);\n      }\n    } else if (Array.isArray(data) && data.every((item) => item satisfies MenubarItem)) {\n      this.items = data;\n    } else {\n      throw new Error(\n        'Invalid `data` property value. Expected an url, a JSON or an array/promise of MenubarItem objects.'\n      );\n    }\n  }\n\n  @Watch('items')\n  onItemsChange() {\n    this.initTabindex();\n  }\n\n  @Watch('current')\n  onCurrentChange() {\n    this.currentPath = this.current?.split('/').filter(Boolean) || [];\n  }\n\n  async connectedCallback() {\n    const mobileMediaQuery = window.matchMedia('(width < 768px)');\n    this.isMobile = mobileMediaQuery.matches;\n    mobileMediaQuery.onchange = (mql) => {\n      this.isMobile = mql.matches;\n      this.initTabindex();\n      this.openMenu = undefined;\n    };\n    await this.parseData(this.data);\n    this.onCurrentChange();\n    this.initTabindex();\n  }\n\n  /** Close any open menu when clicking outside. */\n  @Listen('click', { target: 'document', passive: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.openMenu || containsTarget(this.host, event)) {\n      return;\n    }\n\n    this.openMenu = undefined;\n  }\n\n  /** Close any open menu when pressing Escape or Tab. */\n  @Listen('keydown', { passive: true })\n  handleKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Escape':\n      case 'Tab':\n        this.openMenu = undefined;\n        break;\n    }\n  }\n\n  @Listen('mouseover', { passive: true })\n  handleMouseover() {\n    clearTimeout(this.timerId);\n  }\n\n  /**\n   * Automatically close any open menu on mouseout after with a little delay.\n   * The delay is useful to avoid immediate closing when the pointer briefly leaves the component.\n   */\n  @Listen('mouseout', { passive: true })\n  handleMouseout(event: MouseEvent) {\n    this.timerId = window.setTimeout(() => {\n      if (!this.openMenu || containsTarget(this.host, event)) {\n        return;\n      }\n\n      this.openMenu = undefined;\n    }, 500);\n  }\n\n  /** Close the menu when it loses focus. */\n  @Listen('focusout', { passive: true })\n  handleFocusout(event: FocusEvent) {\n    const relatedTarget = event.relatedTarget as HTMLElement;\n    if (!this.openMenu || this.host.shadowRoot.querySelector('.menu')?.contains(relatedTarget)) {\n      return;\n    }\n\n    this.openMenu = undefined;\n  }\n\n  /** Fetch data from passed URL. */\n  private async fetchData(url: URL) {\n    try {\n      this.loading = true;\n      const data = await (await fetch(url)).json();\n      this.loading = false;\n      if (!Array.isArray(data) || !data.every((item) => item satisfies MenubarItem)) {\n        throw new Error('Invalid data structure. Expected an array of MenuItem objects.');\n      }\n\n      return data as MenubarItem[];\n    } catch (error) {\n      this.loading = false;\n      console.error('Error fetching menubar data:', error);\n      throw new Error('Failed to fetch menubar data from the provided URL.', { cause: error });\n    }\n  }\n\n  /** Initialize tabindex on menuitems of menubars, setting -1 to all but the first one. */\n  private initTabindex() {\n    setTimeout(() => {\n      this.host.shadowRoot.querySelectorAll('[role=\"menubar\"]')?.forEach((menubar) => {\n        menubar\n          .querySelectorAll('[role=\"menuitem\"]')\n          ?.forEach((item, index) => item.setAttribute('tabindex', index === 0 ? '0' : '-1'));\n      });\n    }, 100);\n  }\n\n  /** Indicates whether the element has to be highlighted by checking whether it is set as current or one of its descendants is. */\n  private isActive(item: MenubarItem) {\n    if (this.currentPath.length === 0) {\n      return false;\n    }\n\n    if (this.currentPath.includes(item.id)) {\n      return true;\n    }\n\n    if (item.menuItems?.length) {\n      return item.menuItems.some((menuItem) => menuItem.id === this.current);\n    }\n\n    if (item.navbarItems?.length) {\n      const isActive = item.navbarItems.some((navbarItem) => this.isActive(navbarItem));\n      if (isActive) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  /** Opens the menu associated with the menubar `item`, if any. */\n  private showMenu(item: MenubarItem) {\n    this.openMenu = undefined; // close any open menu first\n    if (!item.menuItems?.length) {\n      return;\n    }\n\n    this.openMenu = item.id;\n  }\n\n  /** Get all elements with `menuitem` role inside parent's `menubar`. * */\n  private getParentMenubarElements(itemEl: HTMLElement) {\n    return Array.from(\n      itemEl?.closest('[role=\"menubar\"]')?.querySelectorAll(':scope > li a[role=\"menuitem\"]') ?? []\n    ) as HTMLElement[];\n  }\n\n  /** Move the focus to the previous menubar item, or the last one. Then open its menu if any other menu was open. */\n  private focusPreviousItem(itemEl: HTMLElement) {\n    this.openMenu = undefined; // close any open menu first\n    const menubarElements = this.getParentMenubarElements(itemEl);\n    itemEl.tabIndex = -1;\n    const currentIndex = menubarElements.indexOf(itemEl);\n    const prevItem = menubarElements[(currentIndex - 1 + menubarElements.length) % menubarElements.length]; // get previous item or last one\n    prevItem.tabIndex = 0;\n    prevItem.focus();\n    // open the item's menu if any other menu was open\n    if (prevItem.ariaHasPopup === 'true' && this.openMenu) {\n      this.openMenu = prevItem.id;\n    }\n  }\n\n  /** Move the focus to the next menubar item, or the first one. Then open its menu if any other menu was open. */\n  private focusNextItem(itemEl: HTMLElement) {\n    this.openMenu = undefined; // close any open menu first\n    const menubarElements = this.getParentMenubarElements(itemEl);\n    itemEl.tabIndex = -1;\n    const currentIndex = menubarElements.indexOf(itemEl);\n    const nextItem = menubarElements[(currentIndex + 1) % menubarElements.length]; // get next item or first one\n    nextItem.tabIndex = 0;\n    nextItem.focus();\n    // open the item's menu if any other menu was open\n    if (nextItem.ariaHasPopup === 'true' && this.openMenu) {\n      this.openMenu = nextItem.id;\n    }\n  }\n\n  /** Handles keyboard navigation on menubar items. */\n  private handleItemKeydown(event: KeyboardEvent, item: MenubarItem) {\n    const target = event.target as HTMLElement;\n    switch (event.key) {\n      case 'Home': {\n        event.preventDefault();\n        event.stopPropagation();\n        const firstItem = this.getParentMenubarElements(target)[0];\n        moveFocus(target, firstItem);\n        break;\n      }\n      case 'End': {\n        event.preventDefault();\n        event.stopPropagation();\n        const lastItem = this.getParentMenubarElements(target).pop();\n        moveFocus(target, lastItem);\n        break;\n      }\n      case 'ArrowUp': {\n        if (!item.menuItems?.length) {\n          break;\n        }\n        event.preventDefault();\n        event.stopPropagation();\n        this.openMenu = item.id;\n        // focus last item of the menu\n        setTimeout(() => {\n          const menuItems = Array.from(\n            this.host.shadowRoot.querySelectorAll(`[aria-labelledby=${item.id}] [role=\"menuitem\"]`)\n          ) as HTMLElement[];\n          moveFocus(target, menuItems[menuItems.length - 1]);\n        }, 100);\n        break;\n      }\n      case 'ArrowRight': {\n        event.preventDefault();\n        event.stopPropagation();\n        this.focusNextItem(target);\n        break;\n      }\n      case 'ArrowDown': {\n        if (!item.menuItems?.length) {\n          break;\n        }\n        this.openMenu = item.id;\n        setTimeout(() => {\n          // focus first item of the menu\n          const firsMenuItem = this.host.shadowRoot.querySelector(\n            `[aria-labelledby=${item.id}] [role=\"menuitem\"]`\n          ) as HTMLElement;\n          firsMenuItem.tabIndex = 0;\n          firsMenuItem.focus();\n        }, 100);\n        break;\n      }\n      case 'ArrowLeft': {\n        event.preventDefault();\n        event.stopPropagation();\n        this.focusPreviousItem(target);\n        break;\n      }\n    }\n  }\n\n  /** Get the previous element with `role=group`. */\n  private getPreviousGroup(groupContainer: HTMLElement) {\n    const groups = Array.from(\n      groupContainer?.closest('[role=\"menu\"]')?.querySelectorAll('[role=\"group\"]') ?? []\n    ) as HTMLElement[];\n    const currentIndex = groups.indexOf(groupContainer);\n\n    return groups[currentIndex - 1];\n  }\n\n  /** Get the next element with `role=group`. */\n  private getNextGroup(groupContainer: HTMLElement) {\n    const groups = Array.from(\n      groupContainer?.closest('[role=\"menu\"]')?.querySelectorAll('[role=\"group\"]') ?? []\n    ) as HTMLElement[];\n    const currentIndex = groups.indexOf(groupContainer);\n\n    return groups[currentIndex + 1];\n  }\n\n  /** Handles keyboard navigation events from `Menu` component. */\n  private handleMenuKeydown(event: KeyboardEvent) {\n    const itemElement = event.target as HTMLElement;\n    const items = Array.from(\n      itemElement.closest('[role=\"menu\"]')?.querySelectorAll('[role=\"menuitem\"]') ?? []\n    ) as HTMLElement[];\n    const currentIndex = items.indexOf(itemElement);\n    switch (event.key) {\n      case 'ArrowUp': {\n        event.preventDefault();\n        event.stopPropagation();\n        const prevItem = items[currentIndex - 1] || items[items.length - 1];\n        moveFocus(itemElement, prevItem);\n        break;\n      }\n      // Move the focus to the first item of the next group if any, otherwise move it to the next menubar item\n      case 'ArrowRight': {\n        event.preventDefault();\n        event.stopPropagation();\n        const currentGroup = itemElement.closest('[role=group]') as HTMLElement;\n        const nextGroup = this.getNextGroup(currentGroup);\n        if (!nextGroup) {\n          itemElement.tabIndex = -1;\n          const menuTriggerId = itemElement.closest('[role=\"menu\"][aria-labelledby]').getAttribute('aria-labelledby');\n          const focusedItem = this.host.shadowRoot.getElementById(menuTriggerId);\n          this.focusNextItem(focusedItem);\n          break;\n        }\n\n        const nextGroupItems = (nextGroup.querySelectorAll('[role=\"menuitem\"]') ?? []) as HTMLElement[];\n        moveFocus(itemElement, nextGroupItems[0]);\n        break;\n      }\n      case 'ArrowDown': {\n        event.preventDefault();\n        event.stopPropagation();\n        const nextItem = items[currentIndex + 1] || items[0];\n        moveFocus(itemElement, nextItem);\n        break;\n      }\n      // Move the focus to the first item of the previous group if any, otherwise move it to the previous menubar item\n      case 'ArrowLeft': {\n        event.preventDefault();\n        event.stopPropagation();\n        const currentGroup = itemElement.closest('[role=group]') as HTMLElement;\n        const prevGroup = this.getPreviousGroup(currentGroup);\n        if (!prevGroup) {\n          itemElement.tabIndex = -1;\n          const menuTriggerId = itemElement.closest('[role=\"menu\"][aria-labelledby]').getAttribute('aria-labelledby');\n          const focusedItem = this.host.shadowRoot.getElementById(menuTriggerId);\n          this.focusPreviousItem(focusedItem);\n          break;\n        }\n\n        const prevGroupItems = (prevGroup.querySelectorAll('[role=\"menuitem\"]') ?? []) as HTMLElement[];\n        moveFocus(itemElement, prevGroupItems[0]);\n        break;\n      }\n      case 'Home':\n        // Move to the first menu item\n        event.preventDefault();\n        event.stopPropagation();\n        moveFocus(itemElement, items[0]);\n        break;\n      case 'End':\n        // Move to the last menu item\n        event.preventDefault();\n        event.stopPropagation();\n        moveFocus(itemElement, items[items.length - 1]);\n        break;\n    }\n  }\n\n  render() {\n    if (this.isMobile) {\n      return (\n        <zanit-mobile-menubar\n          items={this.items}\n          currentPath={this.currentPath}\n          searchQuery={this.searchQuery}\n          loading={this.loading}\n        />\n      );\n    }\n\n    return (\n      <nav aria-label=\"Zanichelli.it\">\n        <div class=\"shadow-wrapper\">\n          <div class=\"width-limiter\">\n            <ul\n              class=\"menubar\"\n              role=\"menubar\"\n              aria-label=\"Zanichelli.it\"\n            >\n              {this.loading &&\n                [...new Array(4)].map((_, index) => (\n                  <Fragment>\n                    <li role=\"none\">\n                      <div class=\"menubar-item\">\n                        <z-ghost-loading></z-ghost-loading>\n                      </div>\n                    </li>\n                    {index < 3 && <li role=\"separator\"></li>}\n                  </Fragment>\n                ))}\n              {this.items?.map((item, index) => (\n                <Fragment>\n                  <li role=\"none\">\n                    <a\n                      class={{\n                        'menubar-item': true,\n                        'active': this.isActive(item),\n                      }}\n                      href={item.href}\n                      id={item.id}\n                      role=\"menuitem\"\n                      tabIndex={-1}\n                      aria-expanded={\n                        item.menuItems?.length ? (this.openMenu === item.id ? 'true' : 'false') : undefined\n                      }\n                      aria-haspopup={item.menuItems?.length ? 'true' : 'false'}\n                      aria-current={this.current.includes(item.id) ? 'page' : 'false'}\n                      onPointerOver={() => this.showMenu(item)}\n                      onKeyDown={(event) => this.handleItemKeydown(event, item)}\n                      target={item.target}\n                    >\n                      <span data-text={item.label}>{item.label}</span>\n                      {item.menuItems?.length > 0 && (\n                        <z-icon\n                          name={this.openMenu === item.id ? 'chevron-up' : 'chevron-down'}\n                          width=\"0.875rem\"\n                          height=\"0.875rem\"\n                        />\n                      )}\n                    </a>\n                  </li>\n                  {index < this.items?.length - 1 && <li role=\"separator\"></li>}\n                </Fragment>\n              ))}\n            </ul>\n            <zanit-search-form\n              searchQuery={this.searchQuery}\n              onResetSearch={() => (this.searchQuery = undefined)}\n            />\n          </div>\n\n          {this.items.map(\n            (item) =>\n              this.openMenu === item.id && (\n                <Menu\n                  controlledBy={item.id}\n                  items={item.menuItems}\n                  currentPath={this.currentPath}\n                  onItemKeyDown={(event) => this.handleMenuKeydown(event)}\n                />\n              )\n          )}\n        </div>\n\n        {this.items\n          ?.filter((item) => this.isActive(item))\n          .map(\n            (item) =>\n              item.navbarItems?.length && (\n                <nav class={{ 'sub-menubar': true, 'shadow-wrapper': true }}>\n                  <ul role=\"menubar\">\n                    {item.navbarItems.map((subitem) => (\n                      <Fragment>\n                        <li role=\"none\">\n                          <a\n                            class={{\n                              'menubar-item': true,\n                              'active': this.isActive(subitem),\n                            }}\n                            href={subitem.href}\n                            id={subitem.id}\n                            role=\"menuitem\"\n                            tabIndex={-1}\n                            aria-haspopup={subitem.menuItems?.length ? 'true' : 'false'}\n                            aria-expanded={\n                              subitem.menuItems?.length ? (this.openMenu === subitem.id ? 'true' : 'false') : undefined\n                            }\n                            aria-current={this.current.includes(subitem.id) ? 'page' : 'false'}\n                            onPointerOver={() => this.showMenu(subitem)}\n                            onKeyDown={(event) => this.handleItemKeydown(event, subitem)}\n                            target={item.target}\n                          >\n                            <span>{subitem.label}</span>\n                            {subitem.menuItems?.length > 0 && (\n                              <z-icon\n                                name={this.openMenu === subitem.id ? 'chevron-up' : 'chevron-down'}\n                                width=\"0.75rem\"\n                                height=\"0.75rem\"\n                              />\n                            )}\n                          </a>\n                        </li>\n                      </Fragment>\n                    ))}\n                  </ul>\n                  {item.navbarItems.map(\n                    (subitem) =>\n                      this.openMenu === subitem.id && (\n                        <Menu\n                          controlledBy={subitem.id}\n                          items={subitem.menuItems}\n                          currentPath={this.currentPath}\n                          onItemKeyDown={(event) => this.handleMenuKeydown(event)}\n                        />\n                      )\n                  )}\n                </nav>\n              )\n          )}\n      </nav>\n    );\n  }\n}\n",":host {\n  position: relative;\n  z-index: 2;\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  background-color: #fff;\n  color: var(--gray900);\n  fill: var(--gray900);\n  font-family: var(--font-family-sans);\n}\n\n:host,\n*,\n::before,\n::after {\n  box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nul {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\na {\n  color: var(--gray900);\n  cursor: pointer;\n  text-decoration: none;\n}\n\nbutton {\n  all: unset;\n  cursor: pointer;\n}\n\nnav {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 8px var(--grid-margin);\n}\n\nnav::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  box-shadow: var(--shadow-1);\n  content: '';\n  pointer-events: none;\n}\n\n.burger-button {\n  margin-left: auto;\n}\n\n.mobile-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  padding: 16px var(--grid-margin) 32px;\n  background-color: #fff;\n  box-shadow: var(--shadow-2);\n  gap: 8px;\n}\n\n.mobile-menu li {\n  width: 100%;\n}\n\n.mobile-menu .items-container {\n  display: flex;\n  min-height: 256px;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.mobile-menu .items-container z-ghost-loading {\n  width: 40%;\n  height: 1.2rem;\n}\n\n.mobile-menu .items-container .menubar-item {\n  display: block;\n  width: 100%;\n  padding: 8px 0;\n  font-size: 1rem;\n  text-align: left;\n}\n\n.mobile-menu .items-container li:not(:last-child) .menubar-item {\n  border-bottom: 1px solid #000;\n}\n\n[role='menuitem'].parent {\n  display: flex;\n  width: fit-content;\n  align-items: center;\n  padding: 0;\n  border: none;\n  font-size: 0.875rem;\n  gap: 8px;\n}\n",".menu-wrapper {\n  width: 100%;\n  background-color: #fff;\n}\n\n.menu {\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 32px 0;\n}\n\n.menu .group {\n  display: flex;\n  flex-direction: column;\n}\n\n.menu .group .group-name {\n  border-bottom: 1px solid currentcolor;\n  margin-bottom: 4px;\n  color: var(--red500);\n  font-size: 0.875rem;\n  font-weight: var(--font-rg);\n}\n\n.menu .group .menu-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.menu .group .menu-list .menu-item {\n  border-bottom: 2px solid transparent;\n  font-size: 0.875rem;\n  font-weight: var(--font-md);\n}\n\n.menu .menu-list .menu-item.active,\n.menu .menu-list .menu-item:hover {\n  border-bottom-color: var(--red500);\n}\n\n.menu .group.highlight .menu-list .menu-item {\n  font-size: 1rem;\n}\n\n@media (width >= 768px) {\n  .menu-wrapper {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    display: flex;\n    justify-content: center;\n    box-shadow: var(--shadow-1);\n  }\n\n  .menu {\n    display: grid;\n    width: 100%;\n    max-width: var(--zanit-menubar-max-width, 1366px);\n    padding: 16px var(--grid-margin);\n    gap: 0 24px;\n    grid-auto-columns: minmax(0, max-content);\n    grid-auto-flow: column;\n    grid-template-rows: minmax(0, max-content) max-content;\n  }\n\n  .menu .group {\n    display: grid;\n    grid-row: 1 / -1;\n    grid-template-columns: 1fr;\n    grid-template-rows: subgrid;\n  }\n\n  @supports not (grid-template-rows: subgrid) {\n    .menu .group {\n      grid-template-rows: repeat(auto-fit, minmax(0, max-content));\n    }\n  }\n\n  .menu .group .group-name {\n    border: none;\n    margin-bottom: 16px;\n  }\n\n  .menu .group .menu-list .menu-item {\n    font-size: 1rem;\n  }\n\n  .menu .group.highlight .menu-list .menu-item {\n    font-size: 1.5rem;\n  }\n\n  .menu .group.highlight .menu-list {\n    gap: 16px;\n  }\n}\n","import { Component, Element, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { MenubarItem, MenuItem } from '../../../utils/types';\nimport { containsTarget, moveFocus } from '../../../utils/utils';\nimport { Menu } from '../menu/menu';\n\n/** Mobile menubar component. */\n@Component({\n  tag: 'zanit-mobile-menubar',\n  styleUrls: ['mobile-menubar.css', '../menu/menu.css'],\n  shadow: true,\n})\nexport class ZanitMobileMenubar {\n  @Element() host: HTMLZanitMobileMenubarElement;\n\n  /** IDs path of the current item. */\n  @Prop() currentPath: string[] = [];\n\n  /** Menubar items. */\n  @Prop() items: MenubarItem[] = [];\n\n  /** Initial search query. */\n  @Prop({ mutable: true }) searchQuery: string | undefined = undefined;\n\n  /** Whether the menubar is loading the data. */\n  @Prop() loading: boolean = false;\n\n  /** Last active item ID. */\n  @State() lastCurrent: string | undefined = undefined;\n  @State() parentItem: MenubarItem | undefined = undefined;\n  @State() menuItems: MenubarItem[] | MenuItem[] | undefined = undefined;\n  /** Whether the items to render come from a menubar or a menu. */\n  @State() menuType: 'menubar' | 'menu' | undefined = undefined;\n  @State() open: boolean;\n\n  @Watch('items')\n  @Watch('currentPath')\n  onItemsChange() {\n    this.lastCurrent = this.currentPath?.length ? this.currentPath[this.currentPath.length - 1] : undefined;\n    this.setupData(this.items);\n  }\n\n  /**\n   * Find the current item and take its parent, `menuItems` or the `navbarItems`.\n   */\n  private setupData(items: MenubarItem[], parent?: MenubarItem) {\n    // If no current item is defined, we show all items\n    if (this.lastCurrent === undefined) {\n      this.parentItem = undefined;\n      this.menuType = 'menubar';\n      this.menuItems = items;\n      return;\n    }\n\n    for (const item of items) {\n      if (item.id === this.lastCurrent) {\n        this.parentItem = parent;\n        this.menuType = item.menuItems?.length ? 'menu' : 'menubar';\n        this.menuItems = item.menuItems || item.navbarItems;\n        return;\n      }\n\n      if (\n        this.currentPath.length > 1 &&\n        item.id === this.currentPath[this.currentPath.length - 2] &&\n        item.menuItems?.some(({ id }) => id === this.lastCurrent)\n      ) {\n        this.parentItem = item;\n        this.menuType = item.menuItems?.length ? 'menu' : 'menubar';\n        this.menuItems = item.menuItems || item.navbarItems;\n        return;\n      }\n\n      if (item.navbarItems?.length) {\n        this.setupData(item.navbarItems, item);\n      }\n    }\n  }\n\n  private get menuItemsElement() {\n    return Array.from(this.host.shadowRoot.querySelectorAll('[role=\"menuitem\"]')) as HTMLElement[];\n  }\n\n  /** Initialize tabindex on menuitems, setting -1 to all but the first one. */\n  private initTabindex() {\n    this.menuItemsElement.forEach((item, index) => item.setAttribute('tabindex', index === 0 ? '0' : '-1'));\n  }\n\n  private toggleMenu() {\n    if (this.open) {\n      this.open = false;\n    } else {\n      this.open = true;\n      setTimeout(() => {\n        this.initTabindex();\n        this.menuItemsElement[0]?.focus();\n      }, 200);\n    }\n  }\n\n  /** Handles keyboard navigation on mobile menu. */\n  private handleItemKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowUp': {\n        event.preventDefault();\n        event.stopPropagation();\n        const items = this.menuItemsElement;\n        const currentIndex = items.indexOf(event.target as HTMLElement);\n        const prevItem = items[(currentIndex - 1 + items.length) % items.length];\n        moveFocus(items[currentIndex], prevItem);\n        break;\n      }\n      case 'ArrowDown': {\n        event.preventDefault();\n        event.stopPropagation();\n        const items = this.menuItemsElement;\n        const currentIndex = items.indexOf(event.target as HTMLElement);\n        const nextItem = items[(currentIndex + 1) % items.length];\n        moveFocus(items[currentIndex], nextItem);\n        break;\n      }\n      case 'Home': {\n        event.preventDefault();\n        event.stopPropagation();\n        moveFocus(event.target as HTMLElement, this.menuItemsElement[0]);\n        break;\n      }\n      case 'End': {\n        event.preventDefault();\n        event.stopPropagation();\n        moveFocus(event.target as HTMLElement, this.menuItemsElement.pop());\n        break;\n      }\n    }\n  }\n\n  connectedCallback() {\n    this.lastCurrent = this.currentPath?.length ? this.currentPath[this.currentPath.length - 1] : undefined;\n    this.setupData(this.items);\n  }\n\n  /** Close the menu when clicking outside. */\n  @Listen('click', { target: 'document', passive: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (containsTarget(this.host, event)) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  /** Close the menu when pressing Escape or Tab. */\n  @Listen('keydown', { passive: true })\n  handleKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Escape':\n        this.open = false;\n        break;\n      case 'Tab':\n        if (containsTarget(this.host, event)) {\n          break;\n        }\n\n        this.open = false;\n        break;\n    }\n  }\n\n  /** Close the menu when the focus goes out. */\n  @Listen('focusin', { target: 'document', passive: true })\n  handleFocusout(event: FocusEvent) {\n    if (containsTarget(this.host, event)) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  render() {\n    return (\n      <nav aria-label=\"Zanichelli.it\">\n        <z-logo\n          imageAlt=\"Logo Zanichelli\"\n          link=\"/\"\n          height={32}\n          width={126}\n        ></z-logo>\n        <button\n          class=\"burger-button\"\n          type=\"button\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls=\"mobile-menu\"\n          aria-label={this.open ? 'Chiudi menù' : 'Apri menù'}\n          onClick={() => this.toggleMenu()}\n        >\n          <z-icon\n            name={this.open ? 'multiply' : 'burger-menu'}\n            width=\"1.5rem\"\n            height=\"1.5rem\"\n          ></z-icon>\n        </button>\n        {this.open && (\n          <ul\n            class=\"mobile-menu\"\n            role=\"menubar\"\n          >\n            <li role=\"none\">\n              <zanit-search-form\n                searchQuery={this.searchQuery}\n                onResetSearch={() => (this.searchQuery = undefined)}\n              />\n            </li>\n\n            {!this.loading && this.currentPath && this.currentPath.length > 0 && (\n              <li role=\"none\">\n                <a\n                  class=\"parent\"\n                  href={this.parentItem?.href ?? '/'}\n                  id={this.parentItem?.id ?? undefined}\n                  role=\"menuitem\"\n                  tabIndex={-1}\n                  onKeyDown={(event) => this.handleItemKeydown(event)}\n                  target={this.parentItem?.target}\n                >\n                  <z-icon\n                    name=\"arrow-left\"\n                    width=\"0.5rem\"\n                    height=\"0.5rem\"\n                  ></z-icon>\n                  <span>\n                    {/* Show the 'Home' label if the current item is a root child. */}\n                    {this.parentItem?.label || 'Home'}\n                  </span>\n                </a>\n              </li>\n            )}\n\n            {this.loading ? (\n              <div\n                class=\"items-container\"\n                role=\"none\"\n              >\n                {[...new Array(4)].map(() => (\n                  <li role=\"none\">\n                    <div\n                      class=\"menubar-item\"\n                      role=\"none\"\n                    >\n                      <z-ghost-loading></z-ghost-loading>\n                    </div>\n                  </li>\n                ))}\n              </div>\n            ) : this.menuType === 'menu' ? (\n              <Menu\n                items={this.menuItems}\n                controlledBy={this.parentItem?.id}\n                currentPath={this.currentPath}\n                onItemKeyDown={(event) => this.handleItemKeydown(event)}\n              />\n            ) : (\n              this.menuItems?.length > 0 && (\n                <div\n                  class=\"items-container\"\n                  role=\"none\"\n                >\n                  {this.menuItems.map((item) => (\n                    <li role=\"none\">\n                      <a\n                        class={{\n                          'menu-item': this.menuType === 'menu',\n                          'menubar-item': this.menuType === 'menubar',\n                        }}\n                        href={item.href}\n                        id={item.id}\n                        role=\"menuitem\"\n                        aria-current={this.lastCurrent === item.id ? 'page' : 'false'}\n                        tabIndex={-1}\n                        onKeyDown={(event) => this.handleItemKeydown(event)}\n                        target={item.target}\n                      >\n                        <span data-text={item.label}>{item.label}</span>\n                      </a>\n                    </li>\n                  ))}\n                </div>\n              )\n            )}\n          </ul>\n        )}\n      </nav>\n    );\n  }\n}\n",":host,\n*,\n::before,\n::after {\n  box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nbutton {\n  all: unset;\n  cursor: pointer;\n}\n\n@media (width < 768px) {\n  .searchbar {\n    display: flex;\n    align-items: center;\n    border: 1px solid #000;\n    border-radius: 4px;\n  }\n\n  .searchbar > *:first-child {\n    /* To have a seamless appearance of the border radius of an internal child element nested within a parent element with rounded borders, we need to subtract the parent's border thickness from the child's border radius. Inner Radius = Outer Radius - Border Thickness */\n    border-bottom-left-radius: 3px;\n    border-top-left-radius: 3px;\n  }\n\n  .searchbar button[type='reset'] {\n    display: flex;\n    padding: 0 0 0 8px;\n    cursor: pointer;\n  }\n\n  .searchbar input {\n    width: 100%;\n    height: 100%;\n    padding: 4px 8px;\n    border: none;\n    background-color: #fff;\n    font-family: var(--font-family-sans);\n    font-size: 1rem;\n  }\n\n  .searchbar input[type='search']::-webkit-search-cancel-button,\n  .searchbar input[type='search']::-webkit-search-decoration {\n    appearance: none;\n  }\n\n  .searchbar input::placeholder {\n    color: var(--gray500);\n  }\n\n  .searchbar .searchbar-button {\n    padding: 4px 8px;\n    border-left: 1px solid #000;\n    background: var(--zanit-accent-color);\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n  }\n\n  .searchbar input:focus:focus-visible,\n  .searchbar .searchbar-button:focus:focus-visible {\n    z-index: 1;\n  }\n}\n\n@media (width >= 768px) {\n  .searchbar {\n    display: flex;\n    font-size: 1.5rem;\n  }\n\n  .searchbar.searchbar-open {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    inset: 0;\n  }\n\n  .searchbar .input-wrapper {\n    display: none;\n    width: 100%;\n    align-items: center;\n    padding: 0 0 0 var(--grid-margin);\n    background-color: #fff;\n    gap: 6px; /* diventa 14px sommato al padding a sinistra della input */\n  }\n\n  .searchbar .input-wrapper:not(.hide) {\n    display: flex;\n  }\n\n  .searchbar button[type='reset'] {\n    display: flex;\n    align-items: center;\n    border-radius: 4px;\n    cursor: pointer;\n  }\n\n  .searchbar input {\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    padding: 8px;\n    border: none;\n    background-color: #fff;\n    font-family: var(--font-family-sans);\n    font-size: inherit;\n  }\n\n  .searchbar input[type='search']::-webkit-search-cancel-button,\n  .searchbar input[type='search']::-webkit-search-decoration {\n    appearance: none;\n  }\n\n  .searchbar input::placeholder {\n    color: var(--gray500);\n  }\n\n  .searchbar .searchbar-button {\n    display: flex;\n    align-items: center;\n    padding: 8px 16px;\n    border-right: 1px solid #000;\n    border-left: 1px solid #000;\n    background: var(--zanit-accent-color);\n    font-family: inherit;\n    font-size: inherit;\n    gap: 64px;\n    line-height: 1;\n  }\n\n  .searchbar input:focus:focus-visible,\n  .searchbar .searchbar-button:focus:focus-visible {\n    z-index: 1;\n  }\n}\n\n@media (width >= 768px) and (width < 1152px) {\n  .searchbar .searchbar-button > .searchbar-button-label {\n    display: none;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { containsTarget } from '../../../utils/utils';\n\n@Component({\n  tag: 'zanit-search-form',\n  styleUrl: 'search-form.css',\n  shadow: true,\n})\nexport class ZanitSearchForm {\n  private formElement: HTMLFormElement;\n\n  @Element() host: HTMLZanitSearchFormElement;\n\n  @State()\n  isMobile: boolean = false;\n\n  /** Indicates whether the searchbar is visible and usable. */\n  @State()\n  showSearchbar: boolean = false;\n\n  /** Search query to apply. */\n  @State()\n  _searchQuery: string | undefined = undefined;\n\n  /** Initial search query */\n  @Prop({ mutable: true })\n  searchQuery: string | undefined = undefined;\n\n  @Watch('searchQuery')\n  onSearchQueryChange() {\n    this._searchQuery = this.searchQuery;\n    if (this.searchQuery) {\n      this.openSearchbar();\n    }\n  }\n\n  /** Emitted on search form submission. */\n  @Event({ cancelable: true }) search: EventEmitter<{ query: string }>;\n\n  @Event() resetSearch: EventEmitter<void>;\n\n  async connectedCallback() {\n    this.showSearchbar = !!this.searchQuery;\n    const mobileMediaQuery = window.matchMedia('(width < 768px)');\n    this.isMobile = mobileMediaQuery.matches;\n    mobileMediaQuery.onchange = (mql) => {\n      this.isMobile = mql.matches;\n    };\n  }\n\n  /** Close open searchbar when clicking outside. */\n  @Listen('click', { target: 'document', passive: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (this.showSearchbar && this.formElement && !containsTarget(this.formElement, event)) {\n      this.showSearchbar = false;\n    }\n  }\n\n  private openSearchbar() {\n    this.showSearchbar = true;\n    setTimeout(() => {\n      const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input') as HTMLInputElement;\n      searchbarInput.focus();\n    }, 100);\n  }\n\n  private resetSearchQuery() {\n    this.searchQuery = undefined;\n    this.resetSearch.emit();\n  }\n\n  private handleInputChange(event: Event) {\n    this._searchQuery = (event.target as HTMLInputElement).value;\n    if (!this._searchQuery) {\n      this.searchQuery = undefined;\n    }\n  }\n\n  private onSearchSubmit(event: Event) {\n    event.preventDefault();\n    if (!this._searchQuery) {\n      return;\n    }\n\n    this.showSearchbar = false;\n    const searchEv = this.search.emit({ query: this._searchQuery });\n    // do not submit the form if the event default behavior was prevented\n    if (searchEv.defaultPrevented) {\n      return;\n    }\n\n    this.formElement.submit();\n  }\n\n  render() {\n    if (this.isMobile) {\n      return (\n        <form\n          class=\"searchbar\"\n          ref={(el) => (this.formElement = el)}\n          role=\"search\"\n          aria-label=\"Cerca\"\n          method=\"get\"\n          action=\"/ricerca\"\n          onSubmit={(event) => this.onSearchSubmit(event)}\n          onReset={() => this.resetSearchQuery()}\n        >\n          {this.searchQuery && (\n            <button\n              type=\"reset\"\n              aria-label=\"Svuota campo di ricerca\"\n            >\n              <z-icon\n                name=\"multiply-circled\"\n                width=\"1rem\"\n                height=\"1rem\"\n              />\n            </button>\n          )}\n          <input\n            id=\"searchbar-input\"\n            name=\"q\"\n            type=\"search\"\n            placeholder=\"Cerca per parola chiave o ISBN\"\n            onInput={(event) => this.handleInputChange(event)}\n            value={this.searchQuery}\n            required\n          ></input>\n          <button\n            class=\"searchbar-button\"\n            aria-controls=\"searchbar-input\"\n            aria-label=\"Cerca\"\n            type=\"submit\"\n          >\n            <z-icon\n              name=\"search\"\n              width=\"1.25rem\"\n              height=\"1.25rem\"\n            ></z-icon>\n          </button>\n        </form>\n      );\n    }\n\n    return (\n      <form\n        class={{ 'searchbar': true, 'searchbar-open': this.showSearchbar }}\n        ref={(el) => (this.formElement = el)}\n        role=\"search\"\n        aria-label=\"Cerca\"\n        method=\"get\"\n        action=\"/ricerca\"\n        onSubmit={(event) => this.onSearchSubmit(event)}\n        onReset={() => this.resetSearchQuery()}\n      >\n        <div\n          class={{ 'hide': !this.showSearchbar, 'input-wrapper': true }}\n          role=\"none\"\n        >\n          {this.searchQuery && (\n            <button\n              type=\"reset\"\n              aria-label=\"Svuota campo di ricerca\"\n            >\n              <z-icon\n                name=\"multiply-circled\"\n                width=\"1.5rem\"\n                height=\"1.5rem\"\n              />\n            </button>\n          )}\n          <input\n            id=\"searchbar-input\"\n            name=\"q\"\n            type=\"search\"\n            placeholder=\"Cerca per parola chiave o ISBN\"\n            onInput={(event) => this.handleInputChange(event)}\n            value={this.searchQuery}\n            required\n          ></input>\n        </div>\n\n        <button\n          class=\"searchbar-button\"\n          aria-label=\"Cerca\"\n          aria-controls=\"searchbar-input\"\n          type={this.showSearchbar ? 'submit' : 'button'}\n          onClick={() => this.openSearchbar()}\n        >\n          {this.showSearchbar ? null : <span class=\"searchbar-button-label\">Cerca</span>}\n          <z-icon\n            name=\"search\"\n            width=\"2rem\"\n            height=\"2rem\"\n          ></z-icon>\n        </button>\n      </form>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}