npm - @zanichelli/zanichelli-it-frontend-kit - Versions diffs - 0.1.2 → 0.1.4 - Mend

@zanichelli/zanichelli-it-frontend-kit 0.1.2 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/www/build/p-60e8a466.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{h as e,r as t,a as r,F as i,c as a}from"./p-BGwuI2U_.js";const n=(e,t)=>t.composedPath().filter((e=>e!==document&&e!==window.window)).some((t=>e.contains(t)));const o=(e,t)=>{e.tabIndex=-1;t.tabIndex=0;t.focus()};const s="default";const h={id:s,label:s};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===s?1:t.group.id===s?-1:0))};const u=({controlledBy:t,items:r,currentPath:i=[],onItemKeyDown:a})=>{if(!r?.length){return null}const n=l(r);const o=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!==s?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!==s?t.id:undefined},r.map((t=>e("li",{role:"none"},t.href&&e("a",{class:{"menu-item":true,active:o(t)},href:t.href,role:"menuitem",tabIndex:-1,"aria-current":o(t)?"page":"false",onKeyDown:e=>a(e)},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:4px}.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:24px}}";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;mouseOutTimeout=1e3;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}),this.mouseOutTimeout)}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){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){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){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];o(r,t);break}case"End":{e.preventDefault();e.stopPropagation();const t=this.getParentMenubarElements(r).pop();o(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"]`));o(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];o(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"]')??[];o(t,a[0]);break}case"ArrowDown":{e.preventDefault();e.stopPropagation();const a=r[i+1]\|\|r[0];o(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"]')??[];o(t,a[0]);break}case"Home":e.preventDefault();e.stopPropagation();o(t,r[0]);break;case"End":e.preventDefault();e.stopPropagation();o(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)},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((t=>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-haspopup":t.menuItems?.length?"true":"false","aria-expanded":t.menuItems?.length?this.openMenu===t.id?"true":"false":undefined,"aria-current":this.current.includes(t.id)?"page":"false",onPointerOver:()=>this.showMenu(t),onKeyDown:e=>this.handleItemKeydown(e,t)},e("span",null,t.label),t.menuItems?.length>0&&e("z-icon",{name:this.openMenu===t.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:4px}.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:24px}}";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){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){return 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];o(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];o(t[r],i);break}case"Home":{e.preventDefault();e.stopPropagation();o(e.target,this.menuItemsElement[0]);break}case"End":{e.preventDefault();e.stopPropagation();o(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:"16ca47d079fec7b84021b86375f3362d438c0608","aria-label":"Zanichelli.it"},e("z-logo",{key:"4fc27adbdee1bec7b3ca855b1ee258e427b23be1",imageAlt:"Logo Zanichelli",link:"/",height:32,width:126}),e("button",{key:"09483a707364493ba68d5109b016161198c076b4",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:"ed3e8da087dd1885e299453387edfadd43cb665f",name:this.open?"multiply":"burger-menu",width:"1.5rem",height:"1.5rem"})),this.open&&e("ul",{key:"6e9d5fcec1f1d136f179b76b38376e8f0db06391",class:"mobile-menu",role:"menubar"},e("li",{key:"9b1fe940ee0783d59c5b43c4117611692dd7c45a",role:"none"},e("zanit-search-form",{key:"e882147e08e18fd2e1101ea84a46210b2c1e708c",searchQuery:this.searchQuery,onResetSearch:()=>this.searchQuery=undefined})),!this.loading&&this.currentPath&&e("li",{key:"003f0c5d2097ef0445fb2865026c879fa220b864",role:"none"},e("a",{key:"00dca7aa15ee68512b9cbf75ebe841fd9e792f64",class:"parent",href:this.parentItem?.href??"/",id:this.parentItem?.id??undefined,role:"menuitem",tabIndex:-1,onKeyDown:e=>this.handleItemKeydown(e)},e("z-icon",{key:"4a60c30ed9729493d89c8fc2ca9d02c7133be350",name:"arrow-left",width:"0.5rem",height:"0.5rem"}),e("span",{key:"35504959de57ec38ffeb36bfb1a540c7df17b306"},this.parentItem?.label??"Home"))),this.loading&&e("div",{key:"4d2eb4b1db92745ac27638f078d39424fee92aac",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&&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)},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:14px}.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 14px 8px 0;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.showSearchbar=true}}onShowSearchbar(){if(!this.showSearchbar){return}setTimeout((()=>{const e=this.host.shadowRoot.querySelector("#searchbar-input");if(this.showSearchbar&&!this.searchQuery){e.focus()}}),100)}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}}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.showSearchbar=true},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"],showSearchbar:["onShowSearchbar"]}}};w.style=g;export{m as zanit_menubar,f as zanit_mobile_menubar,w as zanit_search_form};
2	+ //# sourceMappingURL=p-60e8a466.entry.js.map

package/www/build/p-60e8a466.entry.js.map ADDED Viewed

@@ -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","menubarCss","menuCss","ZanitMenubar","openMenu","openNavbar","isMobile","loading","data","mouseOutTimeout","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","target","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","onShowSearchbar","searchbarInput","search","resetSearch","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 >\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: 4px;\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: 24px;\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 /**\n * Delay in milliseconds before closing the menu after a mouseout event.\n * Useful to avoid immediate closing when the pointer briefly leaves the component.\n */\n @Prop()\n mouseOutTimeout: number | undefined = 1000;\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 @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 }, this.mouseOutTimeout);\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 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 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 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 >\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 >\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: 4px;\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: 24px;\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 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 return 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 && (\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 >\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 )}\n\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 && (\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 >\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: 14px;\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 14px 8px 0;\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.showSearchbar = true;\n }\n }\n\n /** Focus searchbar input when it becomes visible. */\n @Watch('showSearchbar')\n onShowSearchbar() {\n if (!this.showSearchbar) {\n return;\n }\n\n setTimeout(() => {\n const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input') as HTMLInputElement;\n if (this.showSearchbar && !this.searchQuery) {\n searchbarInput.focus();\n }\n }, 100);\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 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.showSearchbar = true)}\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":[]}

package/www/build/zanichelli-it-frontend-kit.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,g as a,b as o}from"./p-BGwuI2U_.js";export{s as setNonce}from"./p-BGwuI2U_.js";var r=()=>{const a=import.meta.url;const o={};if(a!==""){o.resourcesUrl=new URL(".",a).href}return e(o)};r().then((async e=>{await a();return o([["p-b064a657",[[1,"zanit-menubar",{data:[1],current:[1],mouseOutTimeout:[2,"mouse-out-timeout"],searchQuery:[1025,"search-query"],items:[32],openMenu:[32],openNavbar:[32],isMobile:[32],loading:[32]},[[5,"click","handleOutsideClick"],[1,"keydown","handleKeydown"],[1,"mouseover","handleMouseover"],[1,"mouseout","handleMouseout"],[1,"focusout","handleFocusout"]],{data:["parseData"],items:["onItemsChange"]}],[1,"zanit-mobile-menubar",{current:[1],items:[16],searchQuery:[1025,"search-query"],loading:[4],parentItem:[32],menuItems:[32],menuType:[32],open:[32]},[[5,"click","handleOutsideClick"],[1,"keydown","handleKeydown"],[5,"focusin","handleFocusout"]],{items:["onItemsChange"],current:["onItemsChange"]}],[1,"zanit-search-form",{searchQuery:[1025,"search-query"],isMobile:[32],showSearchbar:[32],_searchQuery:[32]},[[5,"click","handleOutsideClick"]],{searchQuery:["onSearchQueryChange"],showSearchbar:["onShowSearchbar"]}]]]],e)}));
+import{p as e,g as a,b as r}from"./p-BGwuI2U_.js";export{s as setNonce}from"./p-BGwuI2U_.js";var n=()=>{const a=import.meta.url;const r={};if(a!==""){r.resourcesUrl=new URL(".",a).href}return e(r)};n().then((async e=>{await a();return r([["p-60e8a466",[[1,"zanit-menubar",{data:[1],current:[1],mouseOutTimeout:[2,"mouse-out-timeout"],searchQuery:[1025,"search-query"],items:[32],openMenu:[32],openNavbar:[32],currentPath:[32],isMobile:[32],loading:[32]},[[5,"click","handleOutsideClick"],[1,"keydown","handleKeydown"],[1,"mouseover","handleMouseover"],[1,"mouseout","handleMouseout"],[1,"focusout","handleFocusout"]],{data:["parseData"],items:["onItemsChange"],current:["onCurrentChange"]}],[1,"zanit-mobile-menubar",{currentPath:[16,"current-path"],items:[16],searchQuery:[1025,"search-query"],loading:[4],lastCurrent:[32],parentItem:[32],menuItems:[32],menuType:[32],open:[32]},[[5,"click","handleOutsideClick"],[1,"keydown","handleKeydown"],[5,"focusin","handleFocusout"]],{items:["onItemsChange"],currentPath:["onItemsChange"]}],[1,"zanit-search-form",{searchQuery:[1025,"search-query"],isMobile:[32],showSearchbar:[32],_searchQuery:[32]},[[5,"click","handleOutsideClick"]],{searchQuery:["onSearchQueryChange"],showSearchbar:["onShowSearchbar"]}]]]],e)}));
 //# sourceMappingURL=zanichelli-it-frontend-kit.esm.js.map