@zanichelli/delta_share 3.2.5 → 4.0.0

package/dist/wc/cjs/z-app-header-deprecated.cjs.entry.js

@@ -0,0 +1,155 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-48ad79ef.js');
+const index$1 = require('./index-9c3aec20.js');
+
+const stylesCss = ":host{--app-header-typography-1-size:24px;--app-header-typography-2-size:28px;--app-header-typography-3-size:32px;--app-header-typography-4-size:36px;--app-header-typography-5-size:42px;--app-header-typography-6-size:48px;--app-header-typography-7-size:54px;--app-header-typography-8-size:60px;--app-header-typography-9-size:68px;--app-header-typography-10-size:76px;--app-header-typography-11-size:84px;--app-header-typography-12-size:92px;--app-header-typography-1-lineheight:1.33;--app-header-typography-2-lineheight:1.29;--app-header-typography-3-lineheight:1.25;--app-header-typography-4-lineheight:1.24;--app-header-typography-5-lineheight:1.24;--app-header-typography-6-lineheight:1.25;--app-header-typography-7-lineheight:1.2;--app-header-typography-8-lineheight:1.26;--app-header-typography-9-lineheight:1.24;--app-header-typography-10-lineheight:1.26;--app-header-typography-11-lineheight:1.2;--app-header-typography-12-lineheight:1.2;--app-header-typography-1-tracking:calc(-0.2 / 1em);--app-header-typography-2-tracking:calc(-0.4 / 1em);--app-header-typography-3-tracking:calc(-0.6 / 1em);--app-header-typography-4-tracking:calc(-0.8 / 1em);--app-header-typography-5-tracking:calc(-1 / 1em);--app-header-typography-6-tracking:calc(-1.2 / 1em);--app-header-typography-7-tracking:calc(-1.4 / 1em);--app-header-typography-8-tracking:calc(-1.6 / 1em);--app-header-typography-9-tracking:calc(-1.8 / 1em);--app-header-typography-10-tracking:calc(-2 / 1em);--app-header-typography-11-tracking:calc(-2.2 / 1em);--app-header-typography-12-tracking:calc(-2.4 / 1em);--app-header-content-max-width:100%;--app-header-height:auto;--app-header-top-offset:48px;--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-surface01);--app-header-stucked-bg:var(--color-surface01);--app-header-text-color:var(--color-default-text);--app-header-title-font-size:var(--app-header-typography-3-size);--app-header-title-lineheight:var(--app-header-typography-3-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-3-tracking);--app-header-stucked-text-color:var(--color-default-text);position:relative;display:block;height:var(--app-header-height);color:var(--app-header-text-color)}:host,*{box-sizing:border-box}.heading-panel{position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:var(--grid-margin);margin:0 auto;background:var(--app-header-bg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5)}.hero-container+.heading-panel{background:transparent}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-title{display:flex;max-width:100%;flex-direction:row;align-items:flex-start;column-gap:calc(var(--space-unit) * 2)}::slotted([slot=\"title\"]),.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){margin:0;font-family:\"IBM Plex Serif\", serif;font-weight:var(--font-bd)}::slotted([slot=\"title\"]){font-size:var(--app-header-title-font-size);letter-spacing:var(--app-header-title-letter-spacing);line-height:var(--app-header-title-lineheight)}.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){font-size:var(--app-header-typography-3-size);letter-spacing:var(--app-header-typography-3-tracking);line-height:var(--app-header-typography-3-lineheight)}:host(:not([menu-length=\"0\"])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2))}::slotted([slot=\"top-subtitle\"]),::slotted([slot=\"subtitle\"]){margin:0;font-family:var(--font-family-sans);font-size:20px;font-style:italic;line-height:26px}::slotted([slot=\"subtitle\"]){font-weight:500}::slotted([slot=\"top-subtitle\"]){font-weight:400}.menu-container{display:flex;width:100%;flex:1 auto;flex-flow:row wrap}:host([menu-length=\"0\"]:not([enable-search])) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}z-searchbar{z-index:0;display:flex;width:auto;min-width:calc(var(--space-unit) * 32);flex:1 auto;align-items:center;margin-left:auto}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto;column-gap:calc(var(--space-unit) * 2)}.heading-stuck .heading-title{overflow:hidden}.heading-stuck .heading-title>*,.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.heading-stuck-content z-button{margin-left:auto}.drawer-trigger{padding:0;border:0;margin:0;appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer}.drawer-trigger z-icon{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);fill:currentcolor}.heading-container :is(.drawer-trigger,z-button.search-page-button){display:flex;height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));align-items:center}.heading-container z-button.search-page-button{margin-left:auto}.drawer-content{display:none}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column;row-gap:calc(var(--space-unit) * 2.5)}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-size:inherit;outline:none}.drawer-close:focus-visible{box-shadow:var(--shadow-focus-primary)}.hero-container{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%}:host([overlay]) .heading-panel .drawer-trigger z-icon,:host([overlay]) .heading-panel .heading-container,:host([overlay]) .heading-panel .menu-container{color:var(--color-white);fill:var(--color-white)}:host([overlay]) .heading-panel .menu-container ::slotted(z-menu){--z-menu-label-color:var(--color-white)}:host([overlay]) .hero-container::after{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;background:var(--color-black);content:\"\";opacity:0.5}.hero-container img,.hero-container ::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;-webkit-user-drag:none}@media (min-width: 768px){:host{--app-header-title-font-size:var(--app-header-typography-6-size);--app-header-title-lineheight:var(--app-header-typography-6-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-6-tracking)}.heading-panel{flex-flow:row wrap;align-items:center;padding-bottom:calc(var(--space-unit) * 2)}.heading-container{margin-right:auto}:host(:is([flow=\"offcanvas\"],[menu-length=\"0\"])) :is(.heading-container,.menu-container){width:auto}:host(:not([flow=\"offcanvas\"])) .heading-subtitle{padding-left:0}.menu-container{flex:initial;align-items:center}:host([menu-length=\"0\"]) .menu-container:not(:empty){height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight))}:host(:not([flow=\"offcanvas\"])) .menu-container{gap:var(--space-unit) calc(var(--space-unit) * 5)}:host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger{display:none}}@media (min-width: 1152px){:host{--app-header-title-font-size:var(--app-header-typography-7-size);--app-header-title-lineheight:var(--app-header-typography-7-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-7-tracking)}.heading-panel{justify-content:flex-start;padding-bottom:calc(var(--space-unit) * 3)}.heading-container,.menu-container{width:auto}:host([flow=\"stack\"]) .heading-panel{flex-flow:column;align-items:flex-start}:host([flow=\"stack\"]) .menu-container{width:100%}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-panel{row-gap:calc(var(--space-unit) * 3)}z-searchbar{min-width:calc(var(--space-unit) * 45);flex:initial}}@media (min-width: 1366px){:host{--app-header-title-font-size:var(--app-header-typography-9-size);--app-header-title-lineheight:var(--app-header-typography-9-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-9-tracking)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
+
+const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
+const ZAppHeaderDeprecated = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sticking = index.createEvent(this, "sticking", 7);
+    this.observer = SUPPORT_INTERSECTION_OBSERVER &&
+      new IntersectionObserver(([entry]) => {
+        this._stuck = !entry.isIntersecting;
+      }, {
+        threshold: 0.5,
+      });
+    this.stuck = false;
+    this.hero = undefined;
+    this.overlay = false;
+    this.flow = "auto";
+    this.drawerOpen = false;
+    this.enableSearch = false;
+    this.searchPlaceholder = "Cerca";
+    this.searchString = "";
+    this.searchPageUrl = undefined;
+    this._stuck = false;
+    this.currentViewport = "mobile";
+    this.menuLength = undefined;
+    this.openDrawer = this.openDrawer.bind(this);
+    this.closeDrawer = this.closeDrawer.bind(this);
+    this.collectMenuElements = this.collectMenuElements.bind(this);
+  }
+  evaluateViewport() {
+    if (window.innerWidth < 768) {
+      this.currentViewport = "mobile";
+    }
+    else if (window.innerWidth >= 768 && window.innerWidth < 1152) {
+      this.currentViewport = "tablet";
+    }
+    else {
+      this.currentViewport = "desktop";
+    }
+  }
+  onStuck() {
+    const scrollParent = this.scrollParent;
+    if (!scrollParent) {
+      return;
+    }
+    this.sticking.emit(this._stuck);
+  }
+  setMenuFloatingMode() {
+    if (this.menuElements.length === 0) {
+      return;
+    }
+    const elements = this.menuElements;
+    elements.forEach((element) => {
+      element.open = false;
+      element.floating = !this.drawerOpen;
+      element.verticalContext = this.drawerOpen;
+    });
+  }
+  get title() {
+    const titleElement = this.hostElement.querySelector('[slot="title"]');
+    if (titleElement === null) {
+      return "";
+    }
+    return titleElement.textContent.trim();
+  }
+  get scrollParent() {
+    const parent = this.hostElement.offsetParent;
+    if (parent === document.body || parent === document.documentElement) {
+      return window;
+    }
+    return parent;
+  }
+  get canShowMenu() {
+    return this.flow !== "offcanvas" && this.currentViewport !== "mobile" && !this.drawerOpen;
+  }
+  get canShowSearchbar() {
+    if (!this.enableSearch) {
+      return false;
+    }
+    // Always show the searchbar on desktop, even if a searchPageUrl is set
+    if (this.searchPageUrl) {
+      return this.currentViewport === "desktop";
+    }
+    return true;
+  }
+  /**
+   * Whether the header has a hero image, either as a prop or as a slot.
+   */
+  get hasHero() {
+    return !!this.hero || this.hostElement.querySelector("[slot=hero]") !== null;
+  }
+  openDrawer() {
+    this.drawerOpen = true;
+  }
+  closeDrawer() {
+    this.drawerOpen = false;
+  }
+  collectMenuElements() {
+    const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot="menu"]'));
+    this.menuLength = menuElements.length;
+    this.setMenuFloatingMode();
+  }
+  enableStuckObserver() {
+    if (this.observer) {
+      this.observer.observe(this.container);
+    }
+  }
+  disableStuckMode() {
+    this._stuck = false;
+    if (this.observer) {
+      this.observer.unobserve(this.container);
+    }
+  }
+  onStuckMode() {
+    if (this.stuck) {
+      this.enableStuckObserver();
+    }
+    else {
+      this.disableStuckMode();
+    }
+  }
+  renderSearchLinkButton() {
+    if (!this.enableSearch || !this.searchPageUrl || this.currentViewport === "desktop") {
+      return null;
+    }
+    return (index.h("z-button", { class: "search-page-button", variant: index$1.ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: index$1.ControlSize.X_SMALL }));
+  }
+  renderSeachbar(searchButtonIconOnly) {
+    return (index.h("z-searchbar", { value: this.searchString, placeholder: this.searchPlaceholder, showSearchButton: true, searchButtonIconOnly: searchButtonIconOnly, size: index$1.ControlSize.X_SMALL, variant: index$1.ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
+  }
+  componentDidLoad() {
+    this.collectMenuElements();
+    this.onStuckMode();
+    this.evaluateViewport();
+  }
+  render() {
+    return (index.h(index.Host, { key: '248c788e09761ea940575f856285bd48df83efbf', "menu-length": this.menuLength }, this.hasHero && (index.h("div", { key: '834d8da46e3fcd43f1e6f082eae1b82a0114df7d', class: "hero-container" }, index.h("slot", { key: '89f3a1034411572bdf4dbe4b1e02c7ea78b7972f', name: "hero" }, this.hero && (index.h("img", { key: '8ba742bf809c529e7a56d85457c544e79d347b8c', alt: "", src: this.hero }))))), index.h("div", { key: '3b6e06d3ea80fae0adfbbf81566d4c26087e4f61', class: "heading-panel", ref: (el) => (this.container = el) }, index.h("div", { key: 'f0e9e6c8e652227cfed385e2fc90b67d0cf56af1', class: "heading-container" }, index.h("div", { key: '38e541c297c3925bd2bb1e2bced92f14b92f2642', class: "heading-subtitle" }, index.h("slot", { key: 'bcf70e94c3bcaafb22114de70f8f7eef47d3d23d', name: "top-subtitle" })), index.h("div", { key: 'bc4944c4819e423c9e18461dd92ba3c29421cf1a', class: "heading-title" }, this.menuLength > 0 && (index.h("button", { key: 'e9dab16f601d16c4efa08d1bb670a624d900753e', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { key: 'ed29253cc6327a76387d29c811e2e5a533f39766', name: "burger-menu" }))), index.h("slot", { key: 'edbd5ef824affe20c9d2df7046e836040206adb1', name: "title" }), this.renderSearchLinkButton()), index.h("div", { key: '5786332ce6b9969686592e1be7785009c613dda6', class: "heading-subtitle" }, index.h("slot", { key: '8b66f6d034492d96276ed97e71c5e0450ad2b22a', name: "subtitle" }))), (this.canShowMenu || this.canShowSearchbar) && (index.h("div", { key: '1b9e781b2d706d3ef48c43251198739453e59918', class: "menu-container" }, this.canShowMenu && (index.h("slot", { key: 'd0138f4d3f480a28962e1bccf1f60456feb76a82', name: "menu", onSlotchange: this.collectMenuElements })), this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== "desktop")))), index.h("z-offcanvas", { key: 'bd233aac91c1ae4018b65dc40e1b6b23f64b3257', variant: index$1.OffCanvasVariant.OVERLAY, transitiondirection: index$1.TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, index.h("button", { key: '7072dd5083f928b3f85ec1c67cdd116699455f75', class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, index.h("z-icon", { key: 'b0eaedd3f7b480d207e2f59d28d9fca7b716f6a1', name: "close" })), index.h("div", { key: '5338f6b648e465eda415f6c2df6042e4fed4afc7', class: "drawer-content", slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}` }, index.h("slot", { key: '6bc7914138ff4accd2a7181b309267a652e8ec9f', name: "menu", onSlotchange: this.collectMenuElements }))), this._stuck && (index.h("div", { key: '52111f4a943e3bb0aeb2b598c691b0a0dba7cad6', class: "heading-stuck" }, index.h("div", { key: '7b83fe01b6d813ec488cd047b110651bcf68a842', class: "heading-stuck-content" }, this.menuLength > 0 && (index.h("button", { key: '980a5644ad87b850a3617a7647cf91112e0269d3', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { key: 'fa1eb36c53f6984510f4c4e25d6a99c4d0a30bcc', name: "burger-menu" }))), index.h("div", { key: '3888a5e1305a386756a307630d8435ff8cf2ef89', class: "heading-title" }, index.h("slot", { key: '6f7e6d23496af75d2a5f36540fa6a8928d391848', name: "stucked-title" }, this.title)), this.renderSearchLinkButton(), this.canShowSearchbar && this.currentViewport === "desktop" && this.renderSeachbar(false))))));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "_stuck": ["onStuck"],
+    "drawerOpen": ["setMenuFloatingMode"],
+    "stuck": ["onStuckMode"]
+  }; }
+};
+ZAppHeaderDeprecated.style = stylesCss;
+
+exports.z_app_header_deprecated = ZAppHeaderDeprecated;

package/dist/wc/cjs/z-app-header.cjs.entry.js

@@ -2,79 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c98ff1cc.js');
-const index$1 = require('./index-029f1a7e.js');
+const index$1 = require('./index-48ad79ef.js');
+const index = require('./index-9c3aec20.js');
+const breakpoints = require('./breakpoints-7770f79c.js');
+const utils = require('./utils-ff107ab4.js');
 
-const stylesCss = ":host{--app-header-typography-1-size:24px;--app-header-typography-2-size:28px;--app-header-typography-3-size:32px;--app-header-typography-4-size:36px;--app-header-typography-5-size:42px;--app-header-typography-6-size:48px;--app-header-typography-7-size:54px;--app-header-typography-8-size:60px;--app-header-typography-9-size:68px;--app-header-typography-10-size:76px;--app-header-typography-11-size:84px;--app-header-typography-12-size:92px;--app-header-typography-1-lineheight:1.33;--app-header-typography-2-lineheight:1.29;--app-header-typography-3-lineheight:1.25;--app-header-typography-4-lineheight:1.24;--app-header-typography-5-lineheight:1.24;--app-header-typography-6-lineheight:1.25;--app-header-typography-7-lineheight:1.2;--app-header-typography-8-lineheight:1.26;--app-header-typography-9-lineheight:1.24;--app-header-typography-10-lineheight:1.26;--app-header-typography-11-lineheight:1.2;--app-header-typography-12-lineheight:1.2;--app-header-typography-1-tracking:calc(-0.2 / 1em);--app-header-typography-2-tracking:calc(-0.4 / 1em);--app-header-typography-3-tracking:calc(-0.6 / 1em);--app-header-typography-4-tracking:calc(-0.8 / 1em);--app-header-typography-5-tracking:calc(-1 / 1em);--app-header-typography-6-tracking:calc(-1.2 / 1em);--app-header-typography-7-tracking:calc(-1.4 / 1em);--app-header-typography-8-tracking:calc(-1.6 / 1em);--app-header-typography-9-tracking:calc(-1.8 / 1em);--app-header-typography-10-tracking:calc(-2 / 1em);--app-header-typography-11-tracking:calc(-2.2 / 1em);--app-header-typography-12-tracking:calc(-2.4 / 1em);--app-header-content-max-width:100%;--app-header-height:auto;--app-header-top-offset:48px;--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-surface01);--app-header-stucked-bg:var(--color-surface01);--app-header-text-color:var(--color-text01);--app-header-title-font-size:var(--app-header-typography-3-size);--app-header-title-lineheight:var(--app-header-typography-3-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-3-tracking);--app-header-stucked-text-color:var(--color-text01);position:relative;display:block;height:var(--app-header-height);color:var(--app-header-text-color)}:host,*{box-sizing:border-box}.heading-panel{position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:var(--grid-margin);margin:0 auto;background:var(--app-header-bg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5)}.hero-container+.heading-panel{background:transparent}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-title{display:flex;max-width:100%;flex-direction:row;align-items:flex-start;column-gap:calc(var(--space-unit) * 2)}::slotted([slot=\"title\"]),.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){margin:0;font-family:\"IBM Plex Serif\", serif;font-weight:var(--font-bd)}::slotted([slot=\"title\"]){font-size:var(--app-header-title-font-size);letter-spacing:var(--app-header-title-letter-spacing);line-height:var(--app-header-title-lineheight)}.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){font-size:var(--app-header-typography-3-size);letter-spacing:var(--app-header-typography-3-tracking);line-height:var(--app-header-typography-3-lineheight)}:host(:not([menu-length=\"0\"])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2))}::slotted([slot=\"top-subtitle\"]),::slotted([slot=\"subtitle\"]){margin:0;font-family:var(--font-family-sans);font-size:20px;font-style:italic;line-height:26px}::slotted([slot=\"subtitle\"]){font-weight:500}::slotted([slot=\"top-subtitle\"]){font-weight:400}.menu-container{display:flex;width:100%;flex:1 auto;flex-flow:row wrap}:host([menu-length=\"0\"]:not([enable-search])) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}z-searchbar{z-index:0;display:flex;width:auto;min-width:calc(var(--space-unit) * 32);flex:1 auto;align-items:center;margin-left:auto}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto;column-gap:calc(var(--space-unit) * 2)}.heading-stuck .heading-title{overflow:hidden}.heading-stuck .heading-title>*,.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.heading-stuck-content z-button{margin-left:auto}.drawer-trigger{padding:0;border:0;margin:0;appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer}.drawer-trigger z-icon{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);fill:currentcolor}.heading-container :is(.drawer-trigger,z-button.search-page-button){display:flex;height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));align-items:center}.heading-container z-button.search-page-button{margin-left:auto}.drawer-content{display:none}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column;row-gap:calc(var(--space-unit) * 2.5)}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-size:inherit;outline:none}.drawer-close:focus-visible{box-shadow:var(--shadow-focus-primary)}.hero-container{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%}:host([overlay]) .heading-panel .drawer-trigger z-icon,:host([overlay]) .heading-panel .heading-container,:host([overlay]) .heading-panel .menu-container{color:var(--color-white);fill:var(--color-white)}:host([overlay]) .heading-panel .menu-container ::slotted(z-menu){--z-menu-label-color:var(--color-white)}:host([overlay]) .hero-container::after{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;background:var(--color-black);content:\"\";opacity:0.5}.hero-container img,.hero-container ::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;-webkit-user-drag:none}@media (min-width: 768px){:host{--app-header-title-font-size:var(--app-header-typography-6-size);--app-header-title-lineheight:var(--app-header-typography-6-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-6-tracking)}.heading-panel{flex-flow:row wrap;align-items:center;padding-bottom:calc(var(--space-unit) * 2)}.heading-container{margin-right:auto}:host(:is([flow=\"offcanvas\"],[menu-length=\"0\"])) :is(.heading-container,.menu-container){width:auto}:host(:not([flow=\"offcanvas\"])) .heading-subtitle{padding-left:0}.menu-container{flex:initial;align-items:center}:host([menu-length=\"0\"]) .menu-container:not(:empty){height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight))}:host(:not([flow=\"offcanvas\"])) .menu-container{gap:var(--space-unit) calc(var(--space-unit) * 5)}:host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger{display:none}}@media (min-width: 1152px){:host{--app-header-title-font-size:var(--app-header-typography-7-size);--app-header-title-lineheight:var(--app-header-typography-7-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-7-tracking)}.heading-panel{justify-content:flex-start;padding-bottom:calc(var(--space-unit) * 3)}.heading-container,.menu-container{width:auto}:host([flow=\"stack\"]) .heading-panel{flex-flow:column;align-items:flex-start}:host([flow=\"stack\"]) .menu-container{width:100%}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-panel{row-gap:calc(var(--space-unit) * 3)}z-searchbar{min-width:calc(var(--space-unit) * 45);flex:initial}}@media (min-width: 1366px){:host{--app-header-title-font-size:var(--app-header-typography-9-size);--app-header-title-lineheight:var(--app-header-typography-9-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-9-tracking)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
+const stylesCss = ":host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width=\"61\" height=\"32\" viewBox=\"0 0 61 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z\" fill=\"%23E2011A\"/><path d=\"M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z\" fill=\"white\"/><path d=\"M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z\" fill=\"%23E2011A\"/><path d=\"M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z\" fill=\"white\"/><path d=\"M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z\" fill=\"white\"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot=\"product-logo\"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot=\"product-logo\"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot=\"title\"]),::slotted([slot=\"stucked-title\"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot=\"title\"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot=\"title\"],[slot=\"stucked-title\"])){text-decoration:none}:host([enable-search]) ::slotted([slot=\"title\"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length=\"0\"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot=\"top-subtitle\"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length=\"0\"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot=\"menu\"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:currentcolor;content:\"\";transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role=\"menubar\"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length=\"0\"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
 
 const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
 const ZAppHeader = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sticking = index.createEvent(this, "sticking", 7);
-    /**
-     * Stuck mode for the header.
-     * You can programmatically set it using an IntersectionObserver.
-     */
-    this.stuck = false;
-    /**
-     * Should place an overlay over the hero image.
-     * Useful for legibility purpose.
-     */
-    this.overlay = false;
-    /**
-     * Control menu bar position in the header.
-     * - auto: the menu bar is positioned near the title
-     * - stack: the menu bar is positioned below the title
-     * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu
-     */
-    this.flow = "auto";
-    /**
-     * The opening state of the drawer.
-     */
-    this.drawerOpen = false;
-    /**
-     * Enable the search bar.
-     */
-    this.enableSearch = false;
-    /**
-     * Placeholder text for the search bar.
-     */
-    this.searchPlaceholder = "Cerca";
-    /**
-     * Search string for the search bar.
-     */
-    this.searchString = "";
-    /**
-     * The stuck state of the bar.
-     */
-    this._stuck = false;
-    /**
-     * Current viewport.
-     * Used to change the aspect of the search button (icon only) on mobile and tablet.
-     */
-    this.currentViewport = "mobile";
-    this.observer = SUPPORT_INTERSECTION_OBSERVER &&
-      new IntersectionObserver(([entry]) => {
-        this._stuck = !entry.isIntersecting;
-      }, {
-        threshold: 0.5,
-      });
-    this.openDrawer = this.openDrawer.bind(this);
-    this.closeDrawer = this.closeDrawer.bind(this);
-    this.collectMenuElements = this.collectMenuElements.bind(this);
-  }
-  evaluateViewport() {
-    if (window.innerWidth < 768) {
-      this.currentViewport = "mobile";
-    }
-    else if (window.innerWidth >= 768 && window.innerWidth < 1152) {
-      this.currentViewport = "tablet";
-    }
-    else {
-      this.currentViewport = "desktop";
-    }
-  }
   onStuck() {
     const scrollParent = this.scrollParent;
     if (!scrollParent) {
@@ -86,19 +22,27 @@ const ZAppHeader = class {
     if (this.menuElements.length === 0) {
       return;
     }
-    const elements = this.menuElements;
-    elements.forEach((element) => {
+    this.menuElements.forEach((element) => {
       element.open = false;
-      element.floating = !this.drawerOpen;
       element.verticalContext = this.drawerOpen;
     });
   }
-  get title() {
-    const titleElement = this.hostElement.querySelector('[slot="title"]');
-    if (titleElement === null) {
-      return "";
+  onStuckChange() {
+    var _a, _b;
+    if (!this.container) {
+      return;
+    }
+    if (this.stuck) {
+      (_a = this.stuckIntersecObserver) === null || _a === void 0 ? void 0 : _a.observe(this.container);
+    }
+    else {
+      this._stuck = false;
+      (_b = this.stuckIntersecObserver) === null || _b === void 0 ? void 0 : _b.unobserve(this.container);
     }
-    return titleElement.textContent.trim();
+  }
+  get title() {
+    var _a;
+    return (_a = this.hostElement.querySelector('[slot="title"]')) === null || _a === void 0 ? void 0 : _a.textContent.trim();
   }
   get scrollParent() {
     const parent = this.hostElement.offsetParent;
@@ -108,76 +52,214 @@ const ZAppHeader = class {
     return parent;
   }
   get canShowMenu() {
-    return this.flow !== "offcanvas" && this.currentViewport !== "mobile" && !this.drawerOpen;
-  }
-  get canShowSearchbar() {
-    if (!this.enableSearch) {
-      return false;
-    }
-    // Always show the searchbar on desktop, even if a searchPageUrl is set
-    if (this.searchPageUrl) {
-      return this.currentViewport === "desktop";
-    }
-    return true;
+    return !this.enableOffcanvas && this.menuElements.length > 0 && !this.isMobile && !this.drawerOpen;
   }
-  /**
-   * Whether the header has a hero image, either as a prop or as a slot.
-   */
-  get hasHero() {
-    return !!this.hero || this.hostElement.querySelector("[slot=hero]") !== null;
+  get focusableMenu() {
+    return this.menuElements.find((el) => el.htmlTabindex === 0);
   }
   openDrawer() {
     this.drawerOpen = true;
+    this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));
+    setTimeout(() => this.menuElements[0].setFocus(), 400); /* wait for the 400ms offcanvas transition */
   }
   closeDrawer() {
     this.drawerOpen = false;
+    setTimeout(() => this.burgerButton.focus(), 100);
   }
   collectMenuElements() {
-    const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot="menu"]'));
-    this.menuLength = menuElements.length;
+    this.menuElements = Array.from(this.hostElement.querySelectorAll('[slot="menu"]'));
+    this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));
+    this.menuLength = this.menuElements.length;
+    if (!this.enableOffcanvas) {
+      this.menuWidth =
+        this.menuElements.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0) +
+          (this.menuLength - 1) * 32 /* 32px is the gap between each menu item */;
+    }
     this.setMenuFloatingMode();
   }
-  enableStuckObserver() {
-    if (this.observer) {
-      this.observer.observe(this.container);
+  /** Automatically use offcanvas mode when the menubar doesn't fit in the header. */
+  setupMenuResizeObserver() {
+    if (this.enableOffcanvas) {
+      return;
     }
+    this.menuResizeObserver = new ResizeObserver((entries) => {
+      if (this.isMobile) {
+        this.enableOffcanvas = true;
+        return;
+      }
+      const containerWidth = entries[0].contentBoxSize[0].inlineSize;
+      if (this.menuWidth === 0) {
+        return;
+      }
+      if (this.menuWidth > containerWidth && !this.enableOffcanvas) {
+        this.enableOffcanvas = true;
+      }
+      else if (this.menuWidth <= containerWidth && this.enableOffcanvas) {
+        this.enableOffcanvas = false;
+      }
+    });
+    this.menuResizeObserver.observe(this.container);
   }
-  disableStuckMode() {
-    this._stuck = false;
-    if (this.observer) {
-      this.observer.unobserve(this.container);
+  hasSlot(slotName) {
+    return this.hostElement.querySelector(`[slot="${slotName}"]`) !== null;
+  }
+  moveFocus(current, receiver) {
+    current.htmlTabindex = -1;
+    receiver.setFocus();
+  }
+  onOffcanvasKeydown(ev) {
+    var _a, _b;
+    if (ev.key !== index.KeyboardCode.TAB || !this.drawerOpen) {
+      return;
+    }
+    const closestMenu = ev.target.closest("z-menu");
+    if (closestMenu) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      // restore tabindex to the zmenu containing the focused element
+      closestMenu.htmlTabindex = 0;
+      this.closeDrawerButton.focus();
+    }
+    else if (ev.target === this.closeDrawerButton) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      if (ev.shiftKey) {
+        // give focus to the last open menu if any or the last menu otherwhise
+        ((_a = this.menuElements.filter((menu) => menu.open).pop()) !== null && _a !== void 0 ? _a : this.menuElements[this.menuLength - 1]).setFocus();
+      }
+      else {
+        // give focus to the first open menu if any or the first menu otherwhise
+        ((_b = this.menuElements.find((menu) => menu.open)) !== null && _b !== void 0 ? _b : this.menuElements[0]).setFocus();
+      }
     }
   }
-  onStuckMode() {
-    if (this.stuck) {
-      this.enableStuckObserver();
+  /** Close each menu except the one receiving focus/click, if any */
+  manageMenus(ev) {
+    const targetMenu = this.menuElements.find((menu) => utils.containsElement(menu, ev.target));
+    if (targetMenu) {
+      this.menuElements.forEach((menu) => {
+        if (menu === targetMenu) {
+          return;
+        }
+        menu.htmlTabindex = -1;
+        if (!this.drawerOpen) {
+          menu.open = false;
+        }
+      });
     }
-    else {
-      this.disableStuckMode();
+    else if (!this.drawerOpen) {
+      this.menuElements.forEach((menu) => {
+        menu.open = false;
+      });
+    }
+  }
+  handleKeydown(ev) {
+    var _a, _b;
+    if (ev.key === index.KeyboardCode.ESC && this.drawerOpen) {
+      this.closeDrawer();
+      return;
+    }
+    if (!this.menuElements.some((elem) => elem.contains(ev.target))) {
+      return;
+    }
+    const current = this.focusableMenu;
+    const currentIndex = this.menuElements.indexOf(current);
+    let receiver;
+    if ((ev.key === index.KeyboardCode.ARROW_RIGHT && !current.verticalContext) ||
+      (ev.key === index.KeyboardCode.ARROW_DOWN && current.verticalContext)) {
+      receiver = (_a = this.menuElements[currentIndex + 1]) !== null && _a !== void 0 ? _a : this.menuElements[0];
+    }
+    else if ((ev.key === index.KeyboardCode.ARROW_LEFT && !current.verticalContext) ||
+      (ev.key === index.KeyboardCode.ARROW_UP && current.verticalContext)) {
+      receiver = (_b = this.menuElements[currentIndex - 1]) !== null && _b !== void 0 ? _b : this.menuElements[this.menuLength - 1];
+    }
+    if (!receiver) {
+      return;
     }
+    if (ev.key === index.KeyboardCode.ARROW_UP && current.verticalContext) {
+      if (receiver.open) {
+        current.htmlTabindex = -1;
+        receiver.focusLastItem();
+        return;
+      }
+    }
+    this.moveFocus(current, receiver);
   }
-  renderSearchLinkButton() {
-    if (!this.enableSearch || !this.searchPageUrl || this.currentViewport === "desktop") {
-      return null;
+  renderSeachbar() {
+    if (this.isMobile && !this.searchPageUrl && this._stuck) {
+      return;
     }
-    return (index.h("z-button", { class: "search-page-button", variant: index$1.ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: index$1.ControlSize.X_SMALL }));
+    if (this.searchPageUrl && (this.isMobile || this.isTablet)) {
+      return (index$1.h("z-button", { class: "search-page-button", variant: index.ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: index.ControlSize.X_SMALL }));
+    }
+    return (index$1.h("z-searchbar", { value: this.searchString, placeholder: this.searchPlaceholder, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, size: index.ControlSize.X_SMALL, variant: index.ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
   }
-  renderSeachbar(searchButtonIconOnly) {
-    return (index.h("z-searchbar", { value: this.searchString, placeholder: this.searchPlaceholder, showSearchButton: true, searchButtonIconOnly: searchButtonIconOnly, size: index$1.ControlSize.X_SMALL, variant: index$1.ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
+  renderProductLogos() {
+    return (index$1.h(index$1.Fragment, null, this.enableZLogo && (index$1.h("span", { class: "z-logo" }, index$1.h("img", { alt: "Logo Zanichelli" }))), this.hostElement.querySelector("[slot='product-logo']") && (index$1.h("span", { class: "product-logo" }, index$1.h("slot", { name: "product-logo" })))));
   }
-  componentDidLoad() {
+  renderMenuButton() {
+    return (this.menuLength > 0 &&
+      (this.enableOffcanvas || this._stuck || this.isMobile) && (index$1.h("button", { ref: (el) => (this.burgerButton = el), class: "drawer-trigger", "aria-label": "Apri menu", "aria-haspopup": "menu", "aria-expanded": `${this.drawerOpen}`, "aria-controls": "offcanvas-menu", onClick: this.openDrawer }, index$1.h("z-icon", { name: "burger-menu" }))));
+  }
+  renderOffcanvas() {
+    return (index$1.h("z-offcanvas", { id: "offcanvas-menu", variant: index.OffCanvasVariant.OVERLAY, transitiondirection: index.TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail), onKeyDown: this.onOffcanvasKeydown }, index$1.h("div", { slot: "canvasContent" }, index$1.h("button", { ref: (el) => (this.closeDrawerButton = el), class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, index$1.h("z-icon", { name: "close" })), index$1.h("div", { class: "drawer-content", "aria-hidden": `${!this.drawerOpen}` }, index$1.h("slot", { name: "menu", onSlotchange: this.collectMenuElements })))));
+  }
+  renderStuck() {
+    return (index$1.h("div", { class: "heading-stuck" }, index$1.h("div", { class: "heading-stuck-content" }, this.renderMenuButton(), index$1.h("div", { class: "heading-title" }, this.renderProductLogos(), index$1.h("div", { class: "stucked-title" }, index$1.h("slot", { name: "stucked-title" }, this.title))), this.enableSearch && this.renderSeachbar())));
+  }
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this.sticking = index$1.createEvent(this, "sticking", 7);
+    this.menuElements = [];
+    this.stuckIntersecObserver = SUPPORT_INTERSECTION_OBSERVER
+      ? new IntersectionObserver(([entry]) => {
+        this._stuck = !entry.isIntersecting;
+      }, { threshold: 0.5 })
+      : undefined;
+    this.stuck = false;
+    this.enableOffcanvas = false;
+    this.enableSearch = false;
+    this.searchPlaceholder = "Cerca";
+    this.searchString = "";
+    this.searchPageUrl = undefined;
+    this.enableZLogo = true;
+    this.drawerOpen = false;
+    this._stuck = false;
+    this.menuLength = undefined;
+    this.isMobile = true;
+    this.isTablet = false;
+    this.openDrawer = this.openDrawer.bind(this);
+    this.closeDrawer = this.closeDrawer.bind(this);
+    this.collectMenuElements = this.collectMenuElements.bind(this);
+    this.onOffcanvasKeydown = this.onOffcanvasKeydown.bind(this);
+  }
+  componentWillLoad() {
     this.collectMenuElements();
-    this.onStuckMode();
-    this.evaluateViewport();
+    // mobile and tablet media queries listeners
+    const mobileMediaQuery = window.matchMedia(`(max-width: ${breakpoints.Breakpoints.MOBILE}px)`);
+    this.isMobile = mobileMediaQuery.matches;
+    mobileMediaQuery.addEventListener("change", (e) => (this.isMobile = e.matches));
+    const tabletMediaQuery = window.matchMedia(`(min-width: ${breakpoints.Breakpoints.MOBILE + 1}px) and (max-width: ${breakpoints.Breakpoints.TABLET}px)`);
+    this.isTablet = tabletMediaQuery.matches;
+    tabletMediaQuery.addEventListener("change", (e) => (this.isTablet = e.matches));
+  }
+  componentDidLoad() {
+    this.onStuckChange();
+    this.setupMenuResizeObserver();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.menuResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   render() {
-    return (index.h(index.Host, { "menu-length": this.menuLength }, this.hasHero && (index.h("div", { class: "hero-container" }, index.h("slot", { name: "hero" }, this.hero && (index.h("img", { alt: "", src: this.hero }))))), index.h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, index.h("div", { class: "heading-container" }, index.h("div", { class: "heading-subtitle" }, index.h("slot", { name: "top-subtitle" })), index.h("div", { class: "heading-title" }, this.menuLength > 0 && (index.h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { name: "burger-menu" }))), index.h("slot", { name: "title" }), this.renderSearchLinkButton()), index.h("div", { class: "heading-subtitle" }, index.h("slot", { name: "subtitle" }))), (this.canShowMenu || this.canShowSearchbar) && (index.h("div", { class: "menu-container" }, this.canShowMenu && (index.h("slot", { name: "menu", onSlotchange: this.collectMenuElements })), this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== "desktop")))), index.h("z-offcanvas", { variant: index$1.OffCanvasVariant.OVERLAY, transitiondirection: index$1.TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, index.h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, index.h("z-icon", { name: "close" })), index.h("div", { class: "drawer-content", slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}` }, index.h("slot", { name: "menu", onSlotchange: this.collectMenuElements }))), this._stuck && (index.h("div", { class: "heading-stuck" }, index.h("div", { class: "heading-stuck-content" }, this.menuLength > 0 && (index.h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { name: "burger-menu" }))), index.h("div", { class: "heading-title" }, index.h("slot", { name: "stucked-title" }, this.title)), this.renderSearchLinkButton(), this.canShowSearchbar && this.currentViewport === "desktop" && this.renderSeachbar(false))))));
+    const hasTopSubtitle = this.hasSlot("top-subtitle");
+    return (index$1.h(index$1.Host, { key: '202f6410a5d144f99fd6e1dcda03e158cc6243e9', "menu-length": this.menuLength }, index$1.h("div", { key: 'de7906463bba9f27c698d8cc91858e80bf47e25b', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, index$1.h("div", { key: '2794e5031cbdac06d2d62adc5843ecbe33cd1864', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (index$1.h("div", { key: 'ac7b5112a3e4428e93ff70ca15537722c6592958', class: "top-subtitle" }, index$1.h("slot", { key: 'aac195f353d13542c2bb34c5132ad917d75a84f8', name: "top-subtitle" }))), index$1.h("div", { key: 'd9cfcf3e58684c4dd123b1b9389d6da84d48d516', class: "heading-title" }, this.renderMenuButton(), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), index$1.h("slot", { key: '668343a3f5999d717a62fa9d227ffb164d026224', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), index$1.h("nav", { key: '1d506682846d26428e563c414c7c38d978946bc5', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (index$1.h("div", { key: '600d9afa684d0f7070f526ce09a9f69ebb229296', role: "menubar", "aria-label": this.title || undefined }, index$1.h("slot", { key: 'b525f96aa7ff013a0a469f161fc2667deb6a7497', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
   }
-  get hostElement() { return index.getElement(this); }
+  get hostElement() { return index$1.getElement(this); }
   static get watchers() { return {
     "_stuck": ["onStuck"],
     "drawerOpen": ["setMenuFloatingMode"],
-    "stuck": ["onStuckMode"]
+    "stuck": ["onStuckChange"]
   }; }
 };
 ZAppHeader.style = stylesCss;

package/dist/wc/cjs/z-aria-alert.cjs.entry.js

@@ -2,17 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c98ff1cc.js');
-const index$1 = require('./index-029f1a7e.js');
+const index = require('./index-48ad79ef.js');
+const index$1 = require('./index-9c3aec20.js');
 
 const ZAriaAlert = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /** Aria live mode */
     this.mode = index$1.ZAriaAlertMode.POLITE;
   }
   render() {
-    return (index.h(index.Host, { "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, index.h("slot", null)));
+    return (index.h(index.Host, { key: '351d44f3f64362a97cac21201f8cfa5311158870', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, index.h("slot", { key: '456a2c0bb53f74d74b84a90c027dbf94249fbab9' })));
   }
 };