@zanichelli/albe-web-components 6.5.0-offcanvasTest3 → 6.5.1

package/dist/collection/components/navigation/z-user-dropdown/index.js

@@ -1,247 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { mobileBreakpoint } from "../../../constants/breakpoints";
-export class ZUserDropdown {
-  constructor() {
-    /** if inner components colors are inverted, or not, default false */
-    this.useInverseColors = false;
-    this.isMenuOpen = false;
-    this.handleLoggedButtonClick = this.handleLoggedButtonClick.bind(this);
-    this.emitDropdownMenuLinkClick = this.emitDropdownMenuLinkClick.bind(this);
-  }
-  componentDidLoad() {
-    this.setMobileAndDivToResizeWidth();
-  }
-  componentWillUpdate() {
-    this.setMobileAndDivToResizeWidth();
-  }
-  componentWillRender() {
-    if (this.menuContent) {
-      this.linkArray = typeof this.menuContent === "string" ? JSON.parse(this.menuContent) : this.menuContent;
-    }
-  }
-  setMobileAndDivToResizeWidth() {
-    var _a;
-    if (this.divToResize) {
-      this.isMobile = window.screen.width <= mobileBreakpoint || window.innerWidth <= mobileBreakpoint;
-      if (this.logged && !this.isMobile && this.isMenuOpen) {
-        this.divToResize.style.width = `${(_a = this.userButton) === null || _a === void 0 ? void 0 : _a.offsetWidth}px`;
-      }
-      else {
-        this.divToResize.removeAttribute("style");
-      }
-    }
-  }
-  emitUserButtonClick() {
-    this.userButtonClick.emit(this.isMenuOpen);
-  }
-  emitDropdownMenuLinkClick(e) {
-    this.isMenuOpen = false;
-    this.dropdownMenuLinkClick.emit({ e, linkId: e.detail.linkId });
-  }
-  handleResize() {
-    this.isMobile = window.innerWidth <= mobileBreakpoint;
-  }
-  handleOrientationChange() {
-    this.isMobile = screen.width <= mobileBreakpoint;
-  }
-  handleClickOutside(e) {
-    if (e.target.nodeName !== "Z-USER-DROPDOWN") {
-      this.isMenuOpen = false;
-    }
-  }
-  handleLoggedButtonClick() {
-    this.isMenuOpen = !this.isMenuOpen;
-    this.emitUserButtonClick();
-  }
-  renderGuestButton() {
-    return (h("button", { id: "guestbutton", class: this.useInverseColors ? "inverse" : "", onClick: () => this.emitUserButtonClick() }, "ENTRA"));
-  }
-  renderLoggedButton() {
-    const direction = this.isMenuOpen ? "up" : "down";
-    const colorClass = this.useInverseColors ? "inverse" : "";
-    return (h("button", { ref: (el) => (this.userButton = el), title: this.userFullName, class: `${colorClass} ${this.isMenuOpen ? "open" : ""}`, onClick: this.handleLoggedButtonClick }, h("div", null, h("div", { class: "firstline" }, h("z-icon", { class: colorClass, name: "user-avatar-filled", height: 16, width: 16 }), !this.isMobile && h("div", { class: `userfullname ${colorClass}` }, this.userFullName), h("z-icon", { class: colorClass, name: `caret-${direction}-filled`, height: 16, width: 16 })), !this.isMobile && this.isMenuOpen && h("div", { class: `useremail ${colorClass}` }, this.userEmail))));
-  }
-  getZLinkTextcolor() {
-    if (this.isMobile) {
-      return this.useInverseColors ? "black" : "white";
-    }
-    return this.useInverseColors ? "white" : "black";
-  }
-  renderDropdownMenu() {
-    const colorClass = this.useInverseColors ? "inverse" : "";
-    return (this.isMenuOpen && (h("ul", { class: colorClass }, this.isMobile && (h("li", { class: colorClass }, h("div", { class: `userfullname ${colorClass}` }, this.userFullName), h("div", { class: `useremail ${colorClass}` }, this.userEmail))), this.linkArray &&
-      this.linkArray.map((link) => (h("li", { id: link.id, class: colorClass }, h("z-link", { textcolor: this.getZLinkTextcolor(), href: link.link, htmlid: link.id, target: link.target, icon: link.icon, onZLinkClick: this.emitDropdownMenuLinkClick }, link.label)))))));
-  }
-  render() {
-    const openClass = `${this.logged && this.isMenuOpen ? "open" : ""}`;
-    const colorClass = this.useInverseColors ? "inverse" : "";
-    return (h(Host, { class: colorClass }, h("div", { ref: (el) => (this.divToResize = el), class: openClass }, h("div", { class: `${colorClass} ${openClass}` }, this.logged ? this.renderLoggedButton() : this.renderGuestButton(), this.logged && this.renderDropdownMenu()))));
-  }
-  static get is() { return "z-user-dropdown"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "logged": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "logged status flag"
-        },
-        "attribute": "logged",
-        "reflect": false
-      },
-      "userFullName": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "user full name"
-        },
-        "attribute": "user-full-name",
-        "reflect": false
-      },
-      "userEmail": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "user email"
-        },
-        "attribute": "user-email",
-        "reflect": false
-      },
-      "menuContent": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | MenuItem[]",
-          "resolved": "MenuItem[] | string",
-          "references": {
-            "MenuItem": {
-              "location": "import",
-              "path": "../../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Json stringified or array to fill menu dropdown"
-        },
-        "attribute": "menu-content",
-        "reflect": false
-      },
-      "useInverseColors": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "if inner components colors are inverted, or not, default false"
-        },
-        "attribute": "use-inverse-colors",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isMenuOpen": {},
-      "isMobile": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "userButtonClick",
-        "name": "userButtonClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted on enter or user Button click, returns isMenuOpen (bool)"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "dropdownMenuLinkClick",
-        "name": "dropdownMenuLinkClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted on dropdown menu zlink click, returns event"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "orientationchange",
-        "method": "handleOrientationChange",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "click",
-        "method": "handleClickOutside",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}

package/dist/collection/components/navigation/z-user-dropdown/styles.css

@@ -1,306 +0,0 @@
-:host {
-  background-color: var(--gray900);
-}
-
-:host(.inverse) {
-  background-color: var(--color-white);
-}
-
-button {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  padding: 0;
-  border: none;
-  margin: 0;
-  background-color: var(--gray900);
-  cursor: pointer;
-  letter-spacing: 0.16px;
-  white-space: nowrap;
-}
-
-button.inverse {
-  background-color: var(--color-white);
-}
-
-button div.firstline {
-  display: flex;
-  max-width: 200px;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-button.open div.firstline {
-  max-width: none;
-}
-
-z-icon {
-  padding: 0 2px;
-  fill: var(--color-white);
-}
-
-z-icon.inverse {
-  fill: var(--gray900);
-}
-
-ul {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  box-sizing: border-box;
-  padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);
-  margin: calc(var(--space-unit) * 1.5) 0 0 0;
-  background-color: var(--gray900);
-  font-family: var(--font-family-sans);
-  font-size: 14px;
-  font-weight: var(--font-sb);
-  letter-spacing: 0.3px;
-  line-height: 20px;
-}
-
-ul.inverse {
-  background-color: var(--color-white);
-}
-
-ul > li {
-  display: flex;
-  justify-content: flex-end;
-  padding: calc(var(--space-unit) * 1.5 - 1px) 0;
-  border-bottom: var(--border-base) solid var(--gray700);
-  margin: 0;
-  white-space: nowrap;
-}
-
-ul > li.inverse {
-  border-bottom-color: var(--gray400);
-}
-
-ul > li:first-child {
-  flex-direction: column;
-  align-items: end;
-  padding-top: 0;
-  padding-bottom: calc(var(--space-unit) + 6px);
-  border-top: none;
-}
-
-ul > li:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
-}
-
-#guestbutton {
-  display: inline-flex;
-  width: 100%;
-  min-width: 32px;
-  height: 32px;
-  box-sizing: border-box;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: 0 calc(var(--space-unit) * 2);
-  border-width: var(--border-size-medium);
-  border-style: solid;
-  border-color: var(--color-white);
-  background-color: var(--color-white);
-  border-radius: var(--border-radius);
-  color: var(--gray800);
-  cursor: pointer;
-  fill: currentcolor;
-  font-family: var(--font-family-sans);
-  font-size: 14px;
-  font-weight: var(--font-sb);
-  letter-spacing: 0.3px;
-  line-height: 1;
-  outline: none;
-  text-decoration: none;
-  text-transform: uppercase;
-  vertical-align: middle;
-}
-
-#guestbutton.inverse {
-  border-color: var(--gray800);
-  background-color: var(--gray800);
-  color: var(--color-white);
-}
-
-.userfullname {
-  overflow: hidden;
-  width: 100%;
-  max-width: 250px;
-  padding: 0;
-  color: var(--color-white);
-  font-family: var(--font-family-sans);
-  font-size: 16px;
-  font-weight: var(--font-sb);
-  letter-spacing: 0;
-  line-height: 24px;
-  text-align: right;
-  text-overflow: ellipsis;
-}
-
-.userfullname.inverse {
-  color: var(--gray800);
-}
-
-.useremail {
-  overflow: hidden;
-  width: 100%;
-  color: var(--color-white);
-  font-family: var(--font-family-sans);
-  font-size: 12px;
-  font-weight: var(--font-rg);
-  letter-spacing: 0.32px;
-  line-height: 16px;
-  text-align: right;
-  text-overflow: ellipsis;
-}
-
-.useremail.inverse {
-  color: var(--gray800);
-}
-
-/* Tablet breakpoint */
-@media only screen and (min-width: 768px) {
-  :host {
-    height: calc(var(--space-unit) * 4);
-    background-color: var(--gray900);
-  }
-
-  :host(.inverse) {
-    background-color: var(--color-white);
-  }
-
-  :host > div {
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  :host > div.open {
-    top: auto;
-    transform: none;
-  }
-
-  :host > div > div {
-    padding: 0;
-  }
-
-  :host > div > div.open {
-    position: absolute;
-    right: calc(var(--space-unit) * -1);
-    padding: calc(var(--space-unit) / 2 + 1px) var(--space-unit) 0 var(--space-unit);
-    margin-top: calc(var(--space-unit) / 2);
-    background-color: var(--color-white);
-    box-shadow: 0 2px calc(var(--space-unit) * 0.5) 0 rgb(0 0 0 / 50%);
-    transform: translate(0, -4px);
-  }
-
-  :host > div > div.inverse.open {
-    background-color: var(--gray800);
-  }
-
-  button {
-    display: flex;
-    flex-flow: row nowrap;
-    align-content: center;
-    align-items: end;
-    justify-content: flex-end;
-  }
-
-  button.open {
-    max-width: initial;
-    padding-right: var(--space-unit);
-    border-top: var(--border-size-small) solid var(--color-white);
-    margin-left: var(--space-unit);
-    background-color: var(--color-white);
-    border-top-left-radius: calc(var(--space-unit) * 0.5);
-    border-top-right-radius: calc(var(--space-unit) * 0.5);
-  }
-
-  button.open.inverse {
-    border-top-color: var(--gray800);
-    background-color: var(--gray800);
-  }
-
-  button:not(.open) z-icon {
-    fill: var(--color-white);
-  }
-
-  button:not(.open) z-icon.inverse {
-    fill: var(--gray800);
-  }
-
-  button.open z-icon {
-    fill: var(--gray800);
-  }
-
-  button.open z-icon.inverse {
-    fill: var(--color-white);
-  }
-
-  .userfullname {
-    width: auto;
-    padding: 0 calc(var(--space-unit) - 6px) 0 calc(var(--space-unit) - 2px);
-    font-family: var(--font-family-sans);
-    font-size: 14px;
-    font-weight: var(--font-sb);
-    letter-spacing: 0.16px;
-    line-height: 20px;
-  }
-
-  .userfullname.inverse {
-    color: var(--gray800);
-  }
-
-  button.open div.userfullname {
-    max-width: none;
-    color: var(--gray800);
-    text-overflow: clip;
-  }
-
-  button.open div.userfullname.inverse {
-    color: var(--color-white);
-  }
-
-  .useremail {
-    box-sizing: border-box;
-    padding-right: calc(var(--space-unit) * 3 - 2px);
-  }
-
-  button.open div.useremail {
-    color: var(--gray800);
-  }
-
-  button.open div.useremail.inverse {
-    color: var(--color-white);
-  }
-
-  ul {
-    position: initial;
-    left: initial;
-    width: 100%;
-    padding: 0;
-    background-color: var(--color-white);
-  }
-
-  ul.inverse {
-    border-bottom-color: var(--gray800);
-    background-color: var(--gray800);
-  }
-
-  ul > li {
-    border-bottom: var(--border-base) solid var(--gray400);
-    margin: 0 var(--space-unit);
-    color: var(--gray800);
-  }
-
-  ul > li.inverse {
-    color: var(--color-white);
-  }
-
-  ul > li:first-child {
-    padding-top: calc(var(--space-unit) + 3px);
-    padding-bottom: calc(var(--space-unit) + 5px);
-    border-top: var(--border-base) solid var(--gray400);
-  }
-}

package/dist/esm/z-app-header.entry.js

@@ -1,129 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
-
-const stylesCss = ":host{--app-header-height:auto;--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-top-offset:48px;--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-white);--app-header-stucked-bg:var(--color-white);--app-header-text-color:var(--gray800);--app-header-stucked-text-color:var(--gray800);display:block;color:var(--app-header-text-color)}:host,*{box-sizing:border-box}.heading-panel{position:relative;display:flex;width:100%;height:var(--app-header-height);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;justify-content:flex-start;padding:calc(var(--space-unit) * 2) var(--grid-mobile-margin);background:var(--app-header-bg)}:host(:empty) .heading-panel{padding:0}.heading-title{display:flex;max-width:100%;flex-direction:row;align-items:center}:host(:not([menu-length=\"0\"])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 1.5))}.heading-stucked{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;display:flex;width:100%;max-width:100%;flex-direction:row;padding:var(--space-unit) var(--grid-mobile-margin);animation:slide-stucked-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stucked .heading-title,.heading-stucked .heading-title>*,.heading-stucked .heading-title ::slotted([slot=\"stucked-title\"]){display:block;overflow:hidden;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.heading-stucked .heading-title>*,::slotted([slot=\"title\"]),::slotted([slot=\"stucked-title\"]){margin:0;font-family:\"IBM Plex Serif\", serif;font-size:var(--app-header-typography-3-size);font-weight:700;letter-spacing:var(--app-header-typography-3-tracking)}::slotted([slot=\"title\"]){line-height:1}::slotted([slot=\"subtitle\"]){margin:var(--space-unit) 0 0;font-family:var(--font-family-sans);font-size:20px;font-style:italic;font-weight:500;line-height:1.2}.heading-container{position:relative;z-index:1;display:flex;max-width:100%;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-right:auto}.menu-container{display:none;flex-flow:row wrap;align-items:baseline}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted(*:not(:last-of-type)){margin-right:calc(var(--space-unit) * 4.5)}.drawer-trigger{padding:0;border:0;margin:0 calc(var(--space-unit) * 1.5) 0 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}.drawer-container{position:fixed;z-index:100;top:var(--app-header-top-offset);left:0;width:100%;height:100%;pointer-events:none}.drawer-container .drawer-overlay{position:absolute;z-index:1;top:0;left:0;display:block;width:100%;height:100%;background:var(--gray900);opacity:0;pointer-events:none;transition:opacity 400ms ease-out}.drawer-panel{position:absolute;z-index:2;top:0;left:0;display:flex;width:375px;max-width:100%;height:100%;flex-direction:column;align-items:flex-start;padding:calc(var(--space-unit) * 2) var(--space-unit);background:var(--color-white);color:var(--gray800);pointer-events:none;transform:translate3d(-100%, 0, 0);transition:transform 400ms ease-out}.drawer-content{display:flex;overflow:auto;width:100%;flex:1 auto;flex-direction:column;padding:calc(var(--space-unit) * 0.5) var(--space-unit)}.drawer-content::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.drawer-content::-webkit-scrollbar-track{background-color:transparent}.drawer-content::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.drawer-content::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.drawer-content ::slotted(z-menu){width:100%}.drawer-content ::slotted(z-menu:not(:last-of-type)){margin-bottom:calc(var(--space-unit) * 2.5)}.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:0 0 calc(var(--space-unit) * 2.5) var(--space-unit);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)}:host([drawer-open]) .drawer-container .drawer-overlay{opacity:0.7;pointer-events:all}:host([drawer-open]) .drawer-container .drawer-panel{pointer-events:all;transform:none}.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:not([open])){--color-surface05: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 only screen and (min-width: 768px){.heading-panel{padding:calc(var(--space-unit) * 3) var(--grid-tablet-margin)}.heading-stucked{padding-right:var(--grid-tablet-margin);padding-left:var(--grid-tablet-margin)}:host(:not([flow=\"offcanvas\"])) .heading-subtitle{padding-left:0}:host(:not([flow=\"offcanvas\"])) .menu-container{display:flex}:host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger{display:none}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-container:not(:last-child){margin-bottom:calc(var(--space-unit) * 3)}::slotted([slot=\"title\"]){font-size:var(--app-header-typography-6-size);letter-spacing:var(--app-header-typography-6-tracking)}::slotted([slot=\"subtitle\"]){margin-top:calc(var(--space-unit) * 1.5)}}@media only screen and (min-width: 1152px){.heading-panel,.heading-stucked{padding-right:var(--grid-desktop-margin);padding-left:var(--grid-desktop-margin)}:host(:not([flow=\"stack\"])) .heading-panel{flex-flow:row wrap}::slotted([slot=\"title\"]){margin-right:var(--grid-desktop-gutter);font-size:var(--app-header-typography-7-size);letter-spacing:var(--app-header-typography-7-tracking)}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-container:not(:last-child){margin-bottom:calc(var(--space-unit) * 2)}.menu-container{margin-top:var(--space-unit)}}@media only screen and (min-width: 1366px){.heading-panel,.heading-stucked{padding-right:var(--grid-wide-margin);padding-left:var(--grid-wide-margin)}::slotted([slot=\"title\"]){margin-right:var(--grid-wide-gutter);font-size:var(--app-header-typography-9-size);letter-spacing:var(--app-header-typography-9-tracking)}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-container:not(:last-child){margin-bottom:0}}@keyframes slide-stucked-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
-
-const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
-const ZAppHeader = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sticking = createEvent(this, "sticking", 7);
-    /**
-     * Stuck mode for the header.
-     * You can programmatically set it using an IntersectionObserver.
-     * **Optional**
-     */
-    this.stuck = false;
-    /**
-     * Should place an overlay over the hero image.
-     * Useful for legibility purpose.
-     * **Optional**
-     */
-    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
-     *
-     * **Optional**
-     */
-    this.flow = "auto";
-    /**
-     * The opening state of the drawer.
-     */
-    this.drawerOpen = false;
-    /**
-     * The stucked state of the bar.
-     */
-    this.stucked = false;
-    this.observer = SUPPORT_INTERSECTION_OBSERVER &&
-      new IntersectionObserver(([entry]) => {
-        this.stucked = !entry.isIntersecting;
-      }, {
-        threshold: 0.5,
-      });
-    this.openDrawer = this.openDrawer.bind(this);
-    this.closeDrawer = this.closeDrawer.bind(this);
-    this.collectMenuElements.bind(this);
-  }
-  emitStickingEvent() {
-    this.sticking.emit(this.stucked);
-  }
-  componentDidLoad() {
-    this.collectMenuElements();
-    this.onStuckMode();
-  }
-  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;
-  }
-  collectMenuElements() {
-    const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot="menu"]'));
-    this.menuLength = menuElements.length;
-    this.setMenuFloatingMode();
-  }
-  onStuckMode() {
-    if (this.stuck) {
-      this.enableStuckObserver();
-    }
-    else {
-      this.disableStuckMode();
-    }
-  }
-  enableStuckObserver() {
-    if (this.observer) {
-      this.observer.observe(this.container);
-    }
-  }
-  disableStuckMode() {
-    this.stucked = false;
-    if (this.observer) {
-      this.observer.unobserve(this.container);
-    }
-  }
-  onStucked() {
-    const scrollParent = this.scrollParent;
-    if (!scrollParent) {
-      return;
-    }
-    this.emitStickingEvent();
-  }
-  setMenuFloatingMode() {
-    if (this.menuElements.length === 0) {
-      return;
-    }
-    const elements = this.menuElements;
-    for (let i = 0, len = elements.length; i < len; i++) {
-      elements[i].open = false;
-      elements[i].floating = !this.drawerOpen;
-    }
-  }
-  render() {
-    return (h(Host, { "menu-length": this.menuLength }, h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { class: "hero-container" }, h("slot", { name: "hero" }, this.hero && (h("img", { alt: "", src: this.hero })))), h("div", { class: "heading-container" }, h("div", { class: "heading-title" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("slot", { name: "title" })), h("div", { class: "heading-subtitle" }, h("slot", { name: "subtitle" }))), h("div", { class: "menu-container" }, !this.drawerOpen && this.flow !== "offcanvas" && (h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() })))), h("div", { class: "drawer-container" }, h("div", { class: "drawer-overlay", onClick: this.closeDrawer }), h("div", { class: "drawer-panel" }, h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content" }, this.drawerOpen && (h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() }))))), this.stucked && (h("div", { class: "heading-stucked" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("div", { class: "heading-title" }, h("slot", { name: "stucked-title" }, this.title))))));
-  }
-  openDrawer() {
-    this.drawerOpen = true;
-  }
-  closeDrawer() {
-    this.drawerOpen = false;
-  }
-  get hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "stuck": ["onStuckMode"],
-    "stucked": ["onStucked"],
-    "drawerOpen": ["setMenuFloatingMode"]
-  }; }
-};
-ZAppHeader.style = stylesCss;
-
-export { ZAppHeader as z_app_header };