@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-RC5

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

@@ -1,36 +1,63 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-2H1EJ2Tl.js');
+var index$1 = require('./index-wGaSHN1_.js');
 
-const index = require('./index-96af6326.js');
-const index$1 = require('./index-e30d0503.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 ZAppHeaderDeprecatedStyle0 = stylesCss;
+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,
-            });
+        /**
+         * Stuck mode for the header.
+         * You can programmatically set it using an IntersectionObserver.
+         */
         this.stuck = false;
-        this.hero = undefined;
+        /**
+         * 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 = "";
-        this.searchPageUrl = undefined;
+        /**
+         * 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.menuLength = undefined;
+        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);
@@ -142,17 +169,21 @@ const ZAppHeaderDeprecated = class {
         this.evaluateViewport();
     }
     render() {
-        return (index.h(index.Host, { key: '70daa2ed1195bf9d557f0e24816810b00fb913a9', "menu-length": this.menuLength }, this.hasHero && (index.h("div", { key: '30ffe4d824d560709b54bf300881d03476ba3a13', class: "hero-container" }, index.h("slot", { key: '1bececd2955d1f45299f4bc891a35f374f1d0ef6', name: "hero" }, this.hero && (index.h("img", { key: '2ac6dac7069d6b58d44cef0cafb471ae445110b5', alt: "", src: this.hero }))))), index.h("div", { key: 'c652e565853a9e33aad7f9d0f748193c32deec53', class: "heading-panel", ref: (el) => (this.container = el) }, index.h("div", { key: '70c9c5a1bbde50b36e63115bee8b3269ce022039', class: "heading-container" }, index.h("div", { key: 'a76d1c2752372f73d7dd7a3b78288c69d259cf86', class: "heading-subtitle" }, index.h("slot", { key: 'b0232cddcc686f08ab8da5a8018036df3187edf1', name: "top-subtitle" })), index.h("div", { key: 'db595cb70e93c52c54abd6e466bedad72b356e0f', class: "heading-title" }, this.menuLength > 0 && (index.h("button", { key: '7f2654a8e143498ac059fbad52824917c3484895', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { key: '00269a4e47a2711a069dab8085ba5e96544ecc19', name: "burger-menu" }))), index.h("slot", { key: 'b8c54b4e1a2edf4257cc0d6622c99e5a49c229f4', name: "title" }), this.renderSearchLinkButton()), index.h("div", { key: 'be7cd607852e675ab18a1a802c9d35db56f79293', class: "heading-subtitle" }, index.h("slot", { key: '8431c484ab6db9cf0a9b43aff2f28d0212af0f62', name: "subtitle" }))), (this.canShowMenu || this.canShowSearchbar) && (index.h("div", { key: 'e8ac060dd2ba98437dc500e392537d3d1fb1b541', class: "menu-container" }, this.canShowMenu && (index.h("slot", { key: '84372e3a4b6bdfb656492543ac00594c78912c3d', name: "menu", onSlotchange: this.collectMenuElements })), this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== "desktop")))), index.h("z-offcanvas", { key: '09449043bca4b74ce62e3015dbc3a94874081d99', variant: index$1.OffCanvasVariant.OVERLAY, transitiondirection: index$1.TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, index.h("button", { key: 'e61077afa2db151b091e097d243c400d05ed8b6e', class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, index.h("z-icon", { key: '0ee13486c2f812d7e9ea33506252876e9091e846', name: "close" })), index.h("div", { key: '551693f4df9d53b595a017978e54d09eeced00e0', class: "drawer-content", slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}` }, index.h("slot", { key: 'b1dc2791de9770c44ebd85b8108eb31abdc121cf', name: "menu", onSlotchange: this.collectMenuElements }))), this._stuck && (index.h("div", { key: '8a8992d2cc59da34510fc2c30ae2a5b96bcb5049', class: "heading-stuck" }, index.h("div", { key: '7a419cb48ad5f073d6ddcc50e8fbf179446e87ac', class: "heading-stuck-content" }, this.menuLength > 0 && (index.h("button", { key: '43923eb984c6b16e7766b31288e1ac62cf1e7d0a', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { key: '99431d770890c990fa6c67ad89a59f7fc11c3101', name: "burger-menu" }))), index.h("div", { key: '47ed8b0f5654dfd76909681d2566fd8acd2234f5', class: "heading-title" }, index.h("slot", { key: '5861c0fa1e8e2bba8ee48e6453788b27eda537e5', name: "stucked-title" }, this.title)), this.renderSearchLinkButton(), this.canShowSearchbar && this.currentViewport === "desktop" && this.renderSeachbar(false))))));
+        return (index.h(index.Host, { key: '4d98fcae5ac33ba947f6ff5a040dd532b743faab', "menu-length": this.menuLength }, this.hasHero && (index.h("div", { key: 'f2105ccf7087e83d54c47ca0722b1099f81a8179', class: "hero-container" }, index.h("slot", { key: '451530f8e43a4f3ca714b4c59b995bd761ee9dc1', name: "hero" }, this.hero && (index.h("img", { key: '7eceb9dab857740287d51b5fecb4c817ead691dc', alt: "", src: this.hero }))))), index.h("div", { key: 'b271e53c52c519a09eee6cec9465b9d7aa97a197', class: "heading-panel", ref: (el) => (this.container = el) }, index.h("div", { key: '8637be0cbfa33887f1cac0599fa9a2752856c9b8', class: "heading-container" }, index.h("div", { key: '556ad49f4dbe98e0a59c712fa7bb8a30d9b7cf7c', class: "heading-subtitle" }, index.h("slot", { key: '1cc116d852ae01c0fd35003c92eac5a5b5ff91e7', name: "top-subtitle" })), index.h("div", { key: '3ced62279a854043978ad6829db41e830525880f', class: "heading-title" }, this.menuLength > 0 && (index.h("button", { key: '27ee765d26aaf4450cdc9048f88f8f3868776fc0', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { key: '77b4538acce08037e2d7ff2807e3da877cea06b4', name: "burger-menu" }))), index.h("slot", { key: 'ff3cc40db1155d7417842f1b573688117fa38f1a', name: "title" }), this.renderSearchLinkButton()), index.h("div", { key: '60b46172cdbdf15dfd163368b6dc0c9ff442f725', class: "heading-subtitle" }, index.h("slot", { key: 'b8f08a0ac6e2446736a27a3e211454db739792b8', name: "subtitle" }))), (this.canShowMenu || this.canShowSearchbar) && (index.h("div", { key: '21ea0742122e3c2eb2fd49ebf872cb287dd61ed9', class: "menu-container" }, this.canShowMenu && (index.h("slot", { key: 'f65701606bf787a0eefdb1305ccb897d7a21f026', name: "menu", onSlotchange: this.collectMenuElements })), this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== "desktop")))), index.h("z-offcanvas", { key: 'a6c999a01c8a956567c992bc4dbe9912c7b98f3b', variant: index$1.OffCanvasVariant.OVERLAY, transitiondirection: index$1.TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, index.h("button", { key: '9f03560a04d34dc7b888f8fef1e392f3c0052720', class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, index.h("z-icon", { key: 'e1f467a7ea2810158883c6e58d03628a120d7eee', name: "close" })), index.h("div", { key: '581886a5fabd793dafc6b5bbb243a3e9241756e0', class: "drawer-content", slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}` }, index.h("slot", { key: '6d581a70fdc08610851c45ec3b01da89461d09c5', name: "menu", onSlotchange: this.collectMenuElements }))), this._stuck && (index.h("div", { key: '459d01a5337718248440da883f4d1cd5065d8671', class: "heading-stuck" }, index.h("div", { key: '2c66f4a2b70a564d04ae70aa6f57bf5d8166b088', class: "heading-stuck-content" }, this.menuLength > 0 && (index.h("button", { key: 'd778fb87bc2fbff3ef63a59eb0bd246832cd56cb', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { key: 'd57c58aefe3511290576dc9edfbfbd45f694795d', name: "burger-menu" }))), index.h("div", { key: '22feee81b662e325b8de3fbdb90e19c959bd1bd8', class: "heading-title" }, index.h("slot", { key: '2a856a72f2bbdd5653b9fb4f718ab518cca37462', 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"]
+        "_stuck": [{
+                "onStuck": 0
+            }],
+        "drawerOpen": [{
+                "setMenuFloatingMode": 0
+            }],
+        "stuck": [{
+                "onStuckMode": 0
+            }]
     }; }
 };
-ZAppHeaderDeprecated.style = ZAppHeaderDeprecatedStyle0;
+ZAppHeaderDeprecated.style = stylesCss();
 
 exports.z_app_header_deprecated = ZAppHeaderDeprecated;
-
-//# sourceMappingURL=z-app-header-deprecated.cjs.entry.js.map