@zanichelli/albe-web-components 19.2.2 → 19.2.3-RC1

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: '25fe02e7c173bc1adeaa335baebd934f7c4bf3c2', "menu-length": this.menuLength }, this.hasHero && (index.h("div", { key: 'fbe86c970aa8a60b4fd2e81e760ce06fcb18b26d', class: "hero-container" }, index.h("slot", { key: '79746c04d0b3ae7685ee6b0a863f96125f392a84', name: "hero" }, this.hero && (index.h("img", { key: '700565a8349a4043b4783b3dfec512575eb464be', alt: "", src: this.hero }))))), index.h("div", { key: 'd103eb1d00f36e3187d3bf04289bc4f8fbec7fac', class: "heading-panel", ref: (el) => (this.container = el) }, index.h("div", { key: '88eba7aa608db3f4283a3191755864b262ccf579', class: "heading-container" }, index.h("div", { key: '43b4b555901fbb93f4976910a8e99227dbd06e9d', class: "heading-subtitle" }, index.h("slot", { key: '84e3d84916956bf7f6867e6f999260bcec1dc946', name: "top-subtitle" })), index.h("div", { key: '5d308d910f1e28d7ce365940d3ddfa431e708ff6', class: "heading-title" }, this.menuLength > 0 && (index.h("button", { key: '862f94284926a7b4cb4373b3fbad853c5c9a16bc', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { key: '90a10f0a603f871b18345bf74e353a515b6d4363', name: "burger-menu" }))), index.h("slot", { key: '9e70498e1e96b169cec959ca6ec5e9b7fab1551b', name: "title" }), this.renderSearchLinkButton()), index.h("div", { key: '0590c5e8294bc79413407d263bec7c19078aad37', class: "heading-subtitle" }, index.h("slot", { key: 'fbd4c13f1985880c18c9151c0d4f62bc0b2644e2', name: "subtitle" }))), (this.canShowMenu || this.canShowSearchbar) && (index.h("div", { key: '8cc2760c853cead3287d590fd64d3f457186a7c7', class: "menu-container" }, this.canShowMenu && (index.h("slot", { key: '3e1f6491146ac3cd5e02f19441a3e3d5a8d1629d', name: "menu", onSlotchange: this.collectMenuElements })), this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== "desktop")))), index.h("z-offcanvas", { key: 'a977d6a6c9b3e8e834feb12235aad8be96c7aa03', variant: index$1.OffCanvasVariant.OVERLAY, transitiondirection: index$1.TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, index.h("button", { key: 'c5facf8597fd819423a758c6f94e33c64b2d41a7', class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, index.h("z-icon", { key: '85a5abd2083f7a809d49a21ae06c0d3f1ed4d3d6', name: "close" })), index.h("div", { key: '50d3e7ac3baa10ea9d1cb79be85cfa6af0d3a7d6', class: "drawer-content", slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}` }, index.h("slot", { key: '266739e07b977831229868f237e561c03d058032', name: "menu", onSlotchange: this.collectMenuElements }))), this._stuck && (index.h("div", { key: '959bd1fddd4e9c49890405b9b271bd27e5b4a67c', class: "heading-stuck" }, index.h("div", { key: '5700bc77fe1d1954e991f1bbcb930c8ad0b04ce5', class: "heading-stuck-content" }, this.menuLength > 0 && (index.h("button", { key: '51bf250e500094c18aef6fdcbed7d756af8ff1f3', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { key: 'abb77685d48e7c1e8476624199dd8b18140dca4f', name: "burger-menu" }))), index.h("div", { key: '69d94fe26925443e3348e8c5752bd474c0436d7c', class: "heading-title" }, index.h("slot", { key: 'ff00ee0b2de8bb8cd9f96dd42b20f4ecd2030828', 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