npm - @zanichelli/albe-web-components - Versions diffs - 19.2.3-RC1 → 19.2.3 - Mend

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

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

Files changed (1550) hide show

package/dist/components/z-app-header-deprecated.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"z-app-header-deprecated.js","mappings":"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","names":["ZAppHeaderDeprecated"],"sources":["src/components/deprecated/z-app-header-deprecated/styles.css?tag=z-app-header-deprecated&encapsulation=shadow","src/components/deprecated/z-app-header-deprecated/index.tsx"],"sourcesContent":[":host {\n --app-header-typography-1-size: 24px;\n --app-header-typography-2-size: 28px;\n --app-header-typography-3-size: 32px;\n --app-header-typography-4-size: 36px;\n --app-header-typography-5-size: 42px;\n --app-header-typography-6-size: 48px;\n --app-header-typography-7-size: 54px;\n --app-header-typography-8-size: 60px;\n --app-header-typography-9-size: 68px;\n --app-header-typography-10-size: 76px;\n --app-header-typography-11-size: 84px;\n --app-header-typography-12-size: 92px;\n --app-header-typography-1-lineheight: 1.33;\n --app-header-typography-2-lineheight: 1.29;\n --app-header-typography-3-lineheight: 1.25;\n --app-header-typography-4-lineheight: 1.24;\n --app-header-typography-5-lineheight: 1.24;\n --app-header-typography-6-lineheight: 1.25;\n --app-header-typography-7-lineheight: 1.2;\n --app-header-typography-8-lineheight: 1.26;\n --app-header-typography-9-lineheight: 1.24;\n --app-header-typography-10-lineheight: 1.26;\n --app-header-typography-11-lineheight: 1.2;\n --app-header-typography-12-lineheight: 1.2;\n --app-header-typography-1-tracking: calc(-0.2 / 1em);\n --app-header-typography-2-tracking: calc(-0.4 / 1em);\n --app-header-typography-3-tracking: calc(-0.6 / 1em);\n --app-header-typography-4-tracking: calc(-0.8 / 1em);\n --app-header-typography-5-tracking: calc(-1 / 1em);\n --app-header-typography-6-tracking: calc(-1.2 / 1em);\n --app-header-typography-7-tracking: calc(-1.4 / 1em);\n --app-header-typography-8-tracking: calc(-1.6 / 1em);\n --app-header-typography-9-tracking: calc(-1.8 / 1em);\n --app-header-typography-10-tracking: calc(-2 / 1em);\n --app-header-typography-11-tracking: calc(-2.2 / 1em);\n --app-header-typography-12-tracking: calc(-2.4 / 1em);\n --app-header-content-max-width: 100%;\n --app-header-height: auto;\n\n /* Variable to set stuck header and drawer's top offset.\n Useful when something is absolutely positioned above the header. */\n --app-header-top-offset: 48px;\n --app-header-drawer-trigger-size: calc(var(--space-unit) * 4);\n\n /* Variable to customize header background color. */\n --app-header-bg: var(--color-surface01);\n\n /* Variable to customize stuck header background color. */\n --app-header-stucked-bg: var(--color-surface01);\n\n /* Variable to customize text and icon color. */\n --app-header-text-color: var(--color-default-text);\n\n /* Variable to customize the title's font size.\n NOTE: Only use one of the exported `--app-header-typography-*-size` as a value. */\n --app-header-title-font-size: var(--app-header-typography-3-size);\n\n /* Variable to customize the title's line-height.\n NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value\n and use the same level as the one of the font size. */\n --app-header-title-lineheight: var(--app-header-typography-3-lineheight);\n\n /* Variable to customize the title's letter-spacing.\n NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value\n and use the same level as the one of the font size. */\n --app-header-title-letter-spacing: var(--app-header-typography-3-tracking);\n\n /* Variable to customize stuck header's text and icon color. */\n --app-header-stucked-text-color: var(--color-default-text);\n\n position: relative;\n display: block;\n height: var(--app-header-height);\n color: var(--app-header-text-color);\n}\n\n:host,\n* {\n box-sizing: border-box;\n}\n\n.heading-panel {\n position: relative;\n display: flex;\n width: 100%;\n max-width: var(--app-header-content-max-width);\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: baseline;\n padding: var(--grid-margin);\n margin: 0 auto;\n background: var(--app-header-bg);\n gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n}\n\n.hero-container + .heading-panel {\n background: transparent;\n}\n\n:host(:empty) .heading-panel {\n padding: 0;\n}\n\n.heading-container {\n position: relative;\n z-index: 1;\n display: flex;\n width: 100%;\n max-width: 100%;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n}\n\n.heading-title {\n display: flex;\n max-width: 100%;\n flex-direction: row;\n align-items: flex-start;\n column-gap: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"title\"]),\n.heading-stuck .heading-title > *,\n::slotted([slot=\"stucked-title\"]) {\n margin: 0;\n font-family: \"IBM Plex Serif\", serif;\n font-weight: var(--font-bd);\n}\n\n::slotted([slot=\"title\"]) {\n font-size: var(--app-header-title-font-size);\n letter-spacing: var(--app-header-title-letter-spacing);\n line-height: var(--app-header-title-lineheight);\n}\n\n.heading-stuck .heading-title > *,\n::slotted([slot=\"stucked-title\"]) {\n font-size: var(--app-header-typography-3-size);\n letter-spacing: var(--app-header-typography-3-tracking);\n line-height: var(--app-header-typography-3-lineheight);\n}\n\n:host(:not([menu-length=\"0\"])) .heading-subtitle {\n padding-left: calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2));\n}\n\n::slotted([slot=\"top-subtitle\"]),\n::slotted([slot=\"subtitle\"]) {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 20px;\n font-style: italic;\n line-height: 26px;\n}\n\n::slotted([slot=\"subtitle\"]) {\n font-weight: 500;\n}\n\n::slotted([slot=\"top-subtitle\"]) {\n font-weight: 400;\n}\n\n.menu-container {\n display: flex;\n width: 100%;\n flex: 1 auto;\n flex-flow: row wrap;\n}\n\n:host([menu-length=\"0\"]:not([enable-search])) .menu-container,\n.menu-container:empty {\n display: none;\n}\n\n.menu-container ::slotted([open]) {\n position: relative;\n z-index: 3;\n}\n\nz-searchbar {\n z-index: 0;\n display: flex;\n width: auto;\n min-width: calc(var(--space-unit) * 32);\n flex: 1 auto;\n align-items: center;\n margin-left: auto;\n}\n\n.heading-stuck {\n position: fixed;\n z-index: 20;\n top: var(--app-header-top-offset);\n left: 0;\n width: 100%;\n max-width: 100%;\n animation: slide-stuck-heading-in 250ms ease-out;\n background: var(--app-header-stucked-bg);\n box-shadow: var(--shadow-2);\n color: var(--app-header-stucked-text-color);\n}\n\n.heading-stuck-content {\n display: flex;\n max-width: var(--app-header-content-max-width);\n align-items: center;\n padding: var(--space-unit) var(--grid-margin);\n margin: 0 auto;\n column-gap: calc(var(--space-unit) * 2);\n}\n\n.heading-stuck .heading-title {\n overflow: hidden;\n}\n\n.heading-stuck .heading-title > *,\n.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]) {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.heading-stuck-content z-button {\n margin-left: auto;\n}\n\n.drawer-trigger {\n padding: 0;\n border: 0;\n margin: 0;\n appearance: none;\n background: none;\n border-radius: 0;\n color: inherit;\n cursor: pointer;\n}\n\n.drawer-trigger z-icon {\n --z-icon-width: var(--app-header-drawer-trigger-size);\n --z-icon-height: var(--app-header-drawer-trigger-size);\n\n fill: currentcolor;\n}\n\n/* Simulate the height of the first line of text,\nto correctly align drawer icon and search page button with the title */\n.heading-container :is(.drawer-trigger, z-button.search-page-button) {\n display: flex;\n height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));\n align-items: center;\n}\n\n.heading-container z-button.search-page-button {\n margin-left: auto;\n}\n\n.drawer-content {\n display: none;\n}\n\nz-offcanvas[open] .drawer-content {\n display: flex;\n width: 100%;\n flex: 1 auto;\n flex-direction: column;\n row-gap: calc(var(--space-unit) * 2.5);\n}\n\nz-offcanvas[open] .drawer-content ::slotted(z-menu) {\n width: 100%;\n}\n\n.drawer-close {\n --z-icon-width: var(--app-header-drawer-trigger-size);\n --z-icon-height: var(--app-header-drawer-trigger-size);\n\n padding: 0;\n border: 0;\n margin: var(--space-unit) 0 calc(var(--space-unit) * 2.5);\n appearance: none;\n background: transparent;\n border-radius: 0;\n color: inherit;\n cursor: pointer;\n fill: currentcolor;\n font-size: inherit;\n outline: none;\n}\n\n.drawer-close:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.hero-container {\n position: absolute;\n z-index: 0;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n:host([overlay]) .heading-panel .drawer-trigger z-icon,\n:host([overlay]) .heading-panel .heading-container,\n:host([overlay]) .heading-panel .menu-container {\n color: var(--color-white);\n fill: var(--color-white);\n}\n\n:host([overlay]) .heading-panel .menu-container ::slotted(z-menu) {\n --z-menu-label-color: var(--color-white);\n}\n\n:host([overlay]) .hero-container::after {\n position: absolute;\n z-index: 0;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-black);\n content: \"\";\n opacity: 0.5;\n}\n\n.hero-container img,\n.hero-container ::slotted(*) {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: top center;\n -webkit-user-drag: none;\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n :host {\n --app-header-title-font-size: var(--app-header-typography-6-size);\n --app-header-title-lineheight: var(--app-header-typography-6-lineheight);\n --app-header-title-letter-spacing: var(--app-header-typography-6-tracking);\n }\n\n .heading-panel {\n flex-flow: row wrap;\n align-items: center;\n padding-bottom: calc(var(--space-unit) * 2);\n }\n\n .heading-container {\n margin-right: auto;\n }\n\n :host(:is([flow=\"offcanvas\"], [menu-length=\"0\"])) :is(.heading-container, .menu-container) {\n width: auto;\n }\n\n :host(:not([flow=\"offcanvas\"])) .heading-subtitle {\n padding-left: 0;\n }\n\n .menu-container {\n flex: initial;\n align-items: center;\n }\n\n :host([menu-length=\"0\"]) .menu-container:not(:empty) {\n height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));\n }\n\n :host(:not([flow=\"offcanvas\"])) .menu-container {\n gap: var(--space-unit) calc(var(--space-unit) * 5);\n }\n\n :host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger {\n display: none;\n }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n :host {\n --app-header-title-font-size: var(--app-header-typography-7-size);\n --app-header-title-lineheight: var(--app-header-typography-7-lineheight);\n --app-header-title-letter-spacing: var(--app-header-typography-7-tracking);\n }\n\n .heading-panel {\n justify-content: flex-start;\n padding-bottom: calc(var(--space-unit) * 3);\n }\n\n .heading-container,\n .menu-container {\n width: auto;\n }\n\n :host([flow=\"stack\"]) .heading-panel {\n flex-flow: column;\n align-items: flex-start;\n }\n\n :host([flow=\"stack\"]) .menu-container {\n width: 100%;\n }\n\n :host(:not([flow=\"offcanvas\"], [menu-length=\"0\"])) .heading-panel {\n row-gap: calc(var(--space-unit) * 3);\n }\n\n z-searchbar {\n min-width: calc(var(--space-unit) * 45);\n flex: initial;\n }\n}\n\n/* Wide breakpoint */\n@media (min-width: 1366px) {\n :host {\n --app-header-title-font-size: var(--app-header-typography-9-size);\n --app-header-title-lineheight: var(--app-header-typography-9-lineheight);\n --app-header-title-letter-spacing: var(--app-header-typography-9-tracking);\n }\n}\n\n@keyframes slide-stuck-heading-in {\n 0% {\n transform: translate3d(0, -100%, 0);\n }\n\n 100% {\n transform: none;\n }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, OffCanvasVariant, TransitionDirection} from \"../../../beans\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/**\n * @slot title - Slot for the main title\n * @slot subtitle - Slot for the bottom subtitle. It will not appear in stuck header.\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.\n * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.\n * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.\n * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.\n * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.\n * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.\n * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.\n * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.\n * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.\n * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.\n * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.\n * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.\n * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.\n * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.\n * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.\n * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.\n * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.\n * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.\n * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.\n * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.\n * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.\n * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.\n * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.\n * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.\n * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.\n * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.\n * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n * @cssprop --app-header-height - Defaults to `auto`.\n * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.\n * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.\n * @cssprop --app-header-title-font-size - Variable to customize the title's font size.\n * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.\n * Defaults to `--app-header-typography-3-size`.\n * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.\n * NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value and use the same level as the one of the font size.\n * Defaults to `--app-header-typography-3-lineheight`.\n * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.\n * NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value and use the same level as the one of the font size.\n * Defaults to `--app-header-typography-3-tracking`.\n * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.\n */\n@Component({\n tag: \"z-app-header-deprecated\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAppHeaderDeprecated {\n @Element() hostElement: HTMLZAppHeaderDeprecatedElement;\n\n /**\n * Stuck mode for the header.\n * You can programmatically set it using an IntersectionObserver.\n */\n @Prop({reflect: true})\n stuck = false;\n\n /**\n * Set the hero image source for the header.\n * You can also use a [slot=\"hero\"] node for advanced customization.\n */\n @Prop()\n hero: string;\n\n /**\n * Should place an overlay over the hero image.\n * Useful for legibility purpose.\n */\n @Prop({reflect: true})\n overlay = false;\n\n /**\n * Control menu bar position in the header.\n * - auto: the menu bar is positioned near the title\n * - stack: the menu bar is positioned below the title\n * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu\n */\n @Prop({reflect: true})\n flow: \"auto\" | \"stack\" | \"offcanvas\" = \"auto\";\n\n /**\n * The opening state of the drawer.\n */\n @Prop({reflect: true})\n drawerOpen = false;\n\n /**\n * Enable the search bar.\n */\n @Prop({reflect: true})\n enableSearch = false;\n\n /**\n * Placeholder text for the search bar.\n */\n @Prop()\n searchPlaceholder = \"Cerca\";\n\n /**\n * Search string for the search bar.\n */\n @Prop({mutable: true})\n searchString = \"\";\n\n /**\n * Url to the search page.\n * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n * The link will also appear on the sticky header.\n */\n @Prop()\n searchPageUrl: string;\n\n /**\n * The stuck state of the bar.\n */\n @State()\n private _stuck = false;\n\n /**\n * Current viewport.\n * Used to change the aspect of the search button (icon only) on mobile and tablet.\n */\n @State()\n private currentViewport: \"mobile\" | \"tablet\" | \"desktop\" = \"mobile\";\n\n /**\n * Current count of menu items.\n */\n @State()\n menuLength: number;\n\n /**\n * Emitted when the `stuck` state of the header changes\n */\n @Event()\n sticking: EventEmitter;\n\n private container?: HTMLDivElement;\n\n private menuElements?: NodeListOf<HTMLElement>;\n\n private observer?: IntersectionObserver =\n SUPPORT_INTERSECTION_OBSERVER &&\n new IntersectionObserver(\n ([entry]) => {\n this._stuck = !entry.isIntersecting;\n },\n {\n threshold: 0.5,\n }\n );\n\n constructor() {\n this.openDrawer = this.openDrawer.bind(this);\n this.closeDrawer = this.closeDrawer.bind(this);\n this.collectMenuElements = this.collectMenuElements.bind(this);\n }\n\n @Listen(\"resize\", {target: \"window\", passive: true})\n evaluateViewport(): void {\n if (window.innerWidth < 768) {\n this.currentViewport = \"mobile\";\n } else if (window.innerWidth >= 768 && window.innerWidth < 1152) {\n this.currentViewport = \"tablet\";\n } else {\n this.currentViewport = \"desktop\";\n }\n }\n\n @Watch(\"_stuck\")\n onStuck(): void {\n const scrollParent = this.scrollParent;\n if (!scrollParent) {\n return;\n }\n\n this.sticking.emit(this._stuck);\n }\n\n @Watch(\"drawerOpen\")\n setMenuFloatingMode(): void {\n if (this.menuElements.length === 0) {\n return;\n }\n\n const elements = this.menuElements;\n elements.forEach((element) => {\n (element as HTMLZMenuDeprecatedElement).open = false;\n (element as HTMLZMenuDeprecatedElement).floating = !this.drawerOpen;\n (element as HTMLZMenuDeprecatedElement).verticalContext = this.drawerOpen;\n });\n }\n\n private get title(): string {\n const titleElement = this.hostElement.querySelector('[slot=\"title\"]');\n if (titleElement === null) {\n return \"\";\n }\n\n return titleElement.textContent.trim();\n }\n\n private get scrollParent(): Window | Element {\n const parent = this.hostElement.offsetParent;\n if (parent === document.body || parent === document.documentElement) {\n return window;\n }\n\n return parent;\n }\n\n private get canShowMenu(): boolean {\n return this.flow !== \"offcanvas\" && this.currentViewport !== \"mobile\" && !this.drawerOpen;\n }\n\n private get canShowSearchbar(): boolean {\n if (!this.enableSearch) {\n return false;\n }\n\n // Always show the searchbar on desktop, even if a searchPageUrl is set\n if (this.searchPageUrl) {\n return this.currentViewport === \"desktop\";\n }\n\n return true;\n }\n\n /**\n * Whether the header has a hero image, either as a prop or as a slot.\n */\n private get hasHero(): boolean {\n return !!this.hero || this.hostElement.querySelector(\"[slot=hero]\") !== null;\n }\n\n private openDrawer(): void {\n this.drawerOpen = true;\n }\n\n private closeDrawer(): void {\n this.drawerOpen = false;\n }\n\n private collectMenuElements(): void {\n const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n this.menuLength = menuElements.length;\n this.setMenuFloatingMode();\n }\n\n private enableStuckObserver(): void {\n if (this.observer) {\n this.observer.observe(this.container);\n }\n }\n\n private disableStuckMode(): void {\n this._stuck = false;\n if (this.observer) {\n this.observer.unobserve(this.container);\n }\n }\n\n @Watch(\"stuck\")\n onStuckMode(): void {\n if (this.stuck) {\n this.enableStuckObserver();\n } else {\n this.disableStuckMode();\n }\n }\n\n private renderSearchLinkButton(): HTMLZButtonElement | null {\n if (!this.enableSearch || !this.searchPageUrl || this.currentViewport === \"desktop\") {\n return null;\n }\n\n return (\n <z-button\n class=\"search-page-button\"\n variant={ButtonVariant.SECONDARY}\n href={this.searchPageUrl}\n icon=\"search\"\n size={ControlSize.X_SMALL}\n ></z-button>\n );\n }\n\n private renderSeachbar(searchButtonIconOnly: boolean): HTMLZSearchbarElement {\n return (\n <z-searchbar\n value={this.searchString}\n placeholder={this.searchPlaceholder}\n showSearchButton={true}\n searchButtonIconOnly={searchButtonIconOnly}\n size={ControlSize.X_SMALL}\n variant={ButtonVariant.SECONDARY}\n preventSubmit={this.searchString.length < 3}\n onSearchTyping={(e) => (this.searchString = e.detail)}\n />\n );\n }\n\n componentDidLoad(): void {\n this.collectMenuElements();\n this.onStuckMode();\n this.evaluateViewport();\n }\n\n render(): HTMLZAppHeaderElement {\n return (\n <Host menu-length={this.menuLength}>\n {this.hasHero && (\n <div class=\"hero-container\">\n <slot name=\"hero\">\n {this.hero && (\n <img\n alt=\"\"\n src={this.hero}\n />\n )}\n </slot>\n </div>\n )}\n\n <div\n class=\"heading-panel\"\n ref={(el) => (this.container = el)}\n >\n <div class=\"heading-container\">\n <div class=\"heading-subtitle\">\n <slot name=\"top-subtitle\"></slot>\n </div>\n <div class=\"heading-title\">\n {this.menuLength > 0 && (\n <button\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\"></z-icon>\n </button>\n )}\n\n <slot name=\"title\"></slot>\n\n {this.renderSearchLinkButton()}\n </div>\n\n <div class=\"heading-subtitle\">\n <slot name=\"subtitle\"></slot>\n </div>\n </div>\n\n {(this.canShowMenu || this.canShowSearchbar) && (\n <div class=\"menu-container\">\n {this.canShowMenu && (\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n ></slot>\n )}\n\n {this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== \"desktop\")}\n </div>\n )}\n </div>\n\n <z-offcanvas\n variant={OffCanvasVariant.OVERLAY}\n transitiondirection={TransitionDirection.RIGHT}\n open={this.drawerOpen}\n onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n >\n <button\n class=\"drawer-close\"\n aria-label=\"Chiudi menu\"\n onClick={this.closeDrawer}\n slot=\"canvasContent\"\n aria-hidden={`${!this.drawerOpen}`}\n disabled={!this.drawerOpen}\n >\n <z-icon name=\"close\"></z-icon>\n </button>\n\n <div\n class=\"drawer-content\"\n slot=\"canvasContent\"\n aria-hidden={`${!this.drawerOpen}`}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n ></slot>\n </div>\n </z-offcanvas>\n\n {this._stuck && (\n <div class=\"heading-stuck\">\n <div class=\"heading-stuck-content\">\n {this.menuLength > 0 && (\n <button\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\"></z-icon>\n </button>\n )}\n\n <div class=\"heading-title\">\n <slot name=\"stucked-title\">{this.title}</slot>\n </div>\n\n {this.renderSearchLinkButton()}\n {this.canShowSearchbar && this.currentViewport === \"desktop\" && this.renderSeachbar(false)}\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/z-app-header.js CHANGED Viewed

@@ -1 +1,367 @@
-import{proxyCustomElement as t,HTMLElement as e,h as i,Fragment as a,createEvent as s,Host as n,transformTag as o}from"@stencil/core/internal/client";import{g as r,e as l,B as c,u as h,O as d}from"./index2.js";import{B as u}from"./breakpoints.js";import{a as p}from"./utils.js";import{d as g}from"./index5.js";import{d as m}from"./index6.js";import{d as f}from"./index3.js";import{d as v}from"./index7.js";import{d as b}from"./index8.js";import{d as w}from"./index9.js";import{d as x}from"./index10.js";import{d as z}from"./index11.js";import{d as k}from"./index12.js";import{d as y}from"./index13.js";import{d as C}from"./index14.js";const M="undefined"!=typeof IntersectionObserver,E=t(class extends e{onStuck(){this.scrollParent&&this.sticking.emit(this._stuck)}setMenuFloatingMode(){0!==this.menuElements.length&&this.menuElements.forEach((t=>{t.open=!1,t.verticalContext=this.drawerOpen}))}onStuckChange(){var t,e;this.container&&(this.stuck?null===(t=this.stuckIntersecObserver)||void 0===t||t.observe(this.container):(this._stuck=!1,null===(e=this.stuckIntersecObserver)||void 0===e||e.unobserve(this.container)))}get title(){var t;return null===(t=this.hostElement.querySelector('[slot="title"]'))||void 0===t?void 0:t.textContent.trim()}get scrollParent(){const t=this.hostElement.offsetParent;return t===document.body||t===document.documentElement?window:t}get canShowMenu(){return!this.enableOffcanvas&&this.menuElements.length>0&&!this.isMobile&&!this.drawerOpen}get focusableMenu(){return this.menuElements.find((t=>0===t.htmlTabindex))}openDrawer(){this.drawerOpen=!0,this.menuElements.forEach(((t,e)=>t.htmlTabindex=0===e?0:-1)),setTimeout((()=>this.menuElements[0].setFocus()),400)}closeDrawer(){this.drawerOpen=!1,setTimeout((()=>this.burgerButton.focus()),100)}collectMenuElements(){this.menuElements=Array.from(this.hostElement.querySelectorAll('[slot="menu"]')),this.menuElements.forEach(((t,e)=>t.htmlTabindex=0===e?0:-1)),this.menuLength=this.menuElements.length,this.enableOffcanvas||(this.menuWidth=this.menuElements.reduce(((t,e)=>t+e.getBoundingClientRect().width),0)+32*(this.menuLength-1)),this.setMenuFloatingMode()}setupMenuResizeObserver(){this.enableOffcanvas||(this.menuResizeObserver=new ResizeObserver((t=>{if(this.isMobile)return void(this.enableOffcanvas=!0);const e=t[0].contentBoxSize[0].inlineSize;0!==this.menuWidth&&(this.menuWidth>e&&!this.enableOffcanvas?this.enableOffcanvas=!0:this.menuWidth<=e&&this.enableOffcanvas&&(this.enableOffcanvas=!1))})),this.menuResizeObserver.observe(this.container))}hasSlot(t){return null!==this.hostElement.querySelector(`[slot="${t}"]`)}moveFocus(t,e){t.htmlTabindex=-1,e.setFocus()}onOffcanvasKeydown(t){var e,i;if(t.key!==r.TAB||!this.drawerOpen)return;const a=t.target.closest("z-menu");a?(t.preventDefault(),t.stopPropagation(),a.htmlTabindex=0,this.closeDrawerButton.focus()):t.target===this.closeDrawerButton&&(t.preventDefault(),t.stopPropagation(),t.shiftKey?(null!==(e=this.menuElements.filter((t=>t.open)).pop())&&void 0!==e?e:this.menuElements[this.menuLength-1]).setFocus():(null!==(i=this.menuElements.find((t=>t.open)))&&void 0!==i?i:this.menuElements[0]).setFocus())}manageMenus(t){const e=this.menuElements.find((e=>p(e,t.target)));e?this.menuElements.forEach((t=>{t!==e&&(t.htmlTabindex=-1,this.drawerOpen||(t.open=!1))})):this.drawerOpen||this.menuElements.forEach((t=>{t.open=!1}))}handleKeydown(t){var e,i;if(t.key===r.ESC&&this.drawerOpen)return void this.closeDrawer();if(!this.menuElements.some((e=>e.contains(t.target))))return;const a=this.focusableMenu,s=this.menuElements.indexOf(a);let n;return t.key===r.ARROW_RIGHT&&!a.verticalContext||t.key===r.ARROW_DOWN&&a.verticalContext?n=null!==(e=this.menuElements[s+1])&&void 0!==e?e:this.menuElements[0]:(t.key===r.ARROW_LEFT&&!a.verticalContext||t.key===r.ARROW_UP&&a.verticalContext)&&(n=null!==(i=this.menuElements[s-1])&&void 0!==i?i:this.menuElements[this.menuLength-1]),n?t.key===r.ARROW_UP&&a.verticalContext&&n.open?(a.htmlTabindex=-1,void n.focusLastItem()):void this.moveFocus(a,n):void 0}renderSeachbar(){if(!this.isMobile||this.searchPageUrl||!this._stuck)return this.searchPageUrl&&(this.isMobile||this.isTablet)?i("z-button",{class:"search-page-button",variant:c.SECONDARY,href:this.searchPageUrl,icon:"search",size:l.X_SMALL}):i("z-searchbar",{value:this.searchString,placeholder:this.searchPlaceholder,showSearchButton:!0,searchButtonIconOnly:this.isMobile||this.isTablet,size:l.X_SMALL,variant:c.SECONDARY,preventSubmit:this.searchString.length<3,onSearchTyping:t=>this.searchString=t.detail})}renderProductLogos(){return i(a,null,this.enableZLogo&&i("span",{class:"z-logo"},i("img",{alt:"Logo Zanichelli"})),this.hostElement.querySelector("[slot='product-logo']")&&i("span",{class:"product-logo"},i("slot",{name:"product-logo"})))}renderMenuButton(){return this.menuLength>0&&(this.enableOffcanvas||this._stuck||this.isMobile)&&i("button",{ref:t=>this.burgerButton=t,class:"drawer-trigger","aria-label":"Apri menu","aria-haspopup":"menu","aria-expanded":""+this.drawerOpen,"aria-controls":"offcanvas-menu",onClick:this.openDrawer},i("z-icon",{name:"burger-menu"}))}renderOffcanvas(){return i("z-offcanvas",{id:"offcanvas-menu",variant:d.OVERLAY,transitiondirection:h.RIGHT,open:this.drawerOpen,onCanvasOpenStatusChanged:t=>this.drawerOpen=t.detail,onKeyDown:this.onOffcanvasKeydown},i("div",{slot:"canvasContent"},i("button",{ref:t=>this.closeDrawerButton=t,class:"drawer-close","aria-label":"Chiudi menu",onClick:this.closeDrawer,"aria-hidden":""+!this.drawerOpen,disabled:!this.drawerOpen},i("z-icon",{name:"close"})),i("div",{class:"drawer-content","aria-hidden":""+!this.drawerOpen},i("slot",{name:"menu",onSlotchange:this.collectMenuElements}))))}renderStuck(){return i("div",{class:"heading-stuck"},i("div",{class:"heading-stuck-content"},this.renderMenuButton(),i("div",{class:"heading-title"},this.renderProductLogos(),i("div",{class:"stucked-title"},i("slot",{name:"stucked-title"},this.title))),this.enableSearch&&this.renderSeachbar()))}constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.sticking=s(this,"sticking",7),this.stuck=!1,this.enableOffcanvas=!1,this.enableSearch=!1,this.searchPlaceholder="Cerca",this.searchString="",this.enableZLogo=!0,this.drawerOpen=!1,this._stuck=!1,this.isMobile=!0,this.isTablet=!1,this.menuElements=[],this.stuckIntersecObserver=M?new IntersectionObserver((([t])=>{this._stuck=!t.isIntersecting}),{threshold:.5}):void 0,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();const t=window.matchMedia(`(max-width: ${u.MOBILE}px)`);this.isMobile=t.matches,t.addEventListener("change",(t=>this.isMobile=t.matches));const e=window.matchMedia(`(min-width: ${u.MOBILE+1}px) and (max-width: ${u.TABLET}px)`);this.isTablet=e.matches,e.addEventListener("change",(t=>this.isTablet=t.matches))}componentDidLoad(){this.onStuckChange(),this.setupMenuResizeObserver()}disconnectedCallback(){var t;null===(t=this.menuResizeObserver)||void 0===t||t.disconnect()}render(){const t=this.hasSlot("top-subtitle");return i(n,{key:"dc030db81c271ed36850fb287d29ace79851d4a1","menu-length":this.menuLength},i("div",{key:"49d34b66c216a92c80eb9216fa52e48add4cee0a",class:{"heading-panel":!0,"has-menubar":this.menuLength>0&&!this.enableOffcanvas},ref:t=>this.container=t},i("div",{key:"29639ab6d0620491c69651139ddf8311e2177122",class:{"heading-container":!0,"has-top-subtitle":t}},(!this.enableSearch&&this.isMobile||!this.isMobile)&&i("div",{key:"bc685fb828a89777bec6dcc5bc754534f83361cd",class:{"top-subtitle":!0,"has-product-logo":t&&this.hasSlot("product-logo")}},i("slot",{key:"cb2b1468f4b34d11dbf444f2cde0c7cce86cbd1e",name:"top-subtitle"})),i("div",{key:"80036c45fcbd3d490b85f653efb35010b1639b6f",class:"heading-title"},i("slot",{key:"bc4a0397893534c0dac99e081ef0ba5d6db2ecd3",name:"menu-button"},this.renderMenuButton()),!this._stuck&&this.renderProductLogos(),i("slot",{key:"a72c2c657ae430e0cc6b134e843fec1c983e7777",name:"title"}),this.enableSearch&&!this.isMobile&&this.renderSeachbar()),this.enableSearch&&this.isMobile&&this.renderSeachbar()),i("nav",{key:"b620b02b62b99b13e6b4c0c1be0997d3af448aeb",class:"menu-container","aria-label":this.title||void 0},this.canShowMenu&&i("div",{key:"6c1887c703734a0e1ab4b77b821dad2e9bc0c3df",role:"menubar","aria-label":this.title||void 0},i("slot",{key:"2daaf3501852cab84cf2b3a85a770553dc70a101",name:"menu",onSlotchange:this.collectMenuElements})))),this.renderOffcanvas(),this._stuck&&this.renderStuck())}get hostElement(){return this}static get watchers(){return{_stuck:[{onStuck:0}],drawerOpen:[{setMenuFloatingMode:0}],stuck:[{onStuckChange:0}]}}static get style(){return':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:var(--color-default-icon);content:"";font-size:var(--font-size-3);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,::slotted([slot="menu-button"]){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}.has-top-subtitle .z-logo{display:none}.top-subtitle.has-product-logo{padding-left:calc(32px + var(--space-unit))}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}}'}},[257,"z-app-header",{stuck:[516],enableOffcanvas:[1540,"enable-offcanvas"],enableSearch:[516,"enable-search"],searchPlaceholder:[1,"search-placeholder"],searchString:[1025,"search-string"],searchPageUrl:[1,"search-page-url"],enableZLogo:[516,"enable-z-logo"],drawerOpen:[1028,"drawer-open"],_stuck:[32],menuLength:[32],isMobile:[32],isTablet:[32]},[[5,"focusin","manageMenus"],[5,"click","manageMenus"],[1,"keydown","handleKeydown"]],{_stuck:[{onStuck:0}],drawerOpen:[{setMenuFloatingMode:0}],stuck:[{onStuckChange:0}]}]),S=E,j=function(){"undefined"!=typeof customElements&&["z-app-header","z-button","z-divider","z-icon","z-input","z-input-message","z-list","z-list-element","z-list-group","z-offcanvas","z-searchbar","z-tag"].forEach((t=>{switch(t){case"z-app-header":customElements.get(o(t))||customElements.define(o(t),E);break;case"z-button":customElements.get(o(t))||g();break;case"z-divider":customElements.get(o(t))||m();break;case"z-icon":customElements.get(o(t))||f();break;case"z-input":customElements.get(o(t))||v();break;case"z-input-message":customElements.get(o(t))||b();break;case"z-list":customElements.get(o(t))||w();break;case"z-list-element":customElements.get(o(t))||x();break;case"z-list-group":customElements.get(o(t))||z();break;case"z-offcanvas":customElements.get(o(t))||k();break;case"z-searchbar":customElements.get(o(t))||y();break;case"z-tag":customElements.get(o(t))||C()}}))};export{S as ZAppHeader,j as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Fragment, createEvent, Host } from '@stencil/core/internal/client';
+import { g as KeyboardCode, B as ButtonVariant, e as ControlSize, O as OffCanvasVariant, u as TransitionDirection } from './index2.js';
+import { B as Breakpoints } from './breakpoints.js';
+import { a as containsElement } from './utils.js';
+import { d as defineCustomElement$c } from './index5.js';
+import { d as defineCustomElement$b } from './index7.js';
+import { d as defineCustomElement$a } from './index10.js';
+import { d as defineCustomElement$9 } from './index12.js';
+import { d as defineCustomElement$8 } from './index13.js';
+import { d as defineCustomElement$7 } from './index14.js';
+import { d as defineCustomElement$6 } from './index15.js';
+import { d as defineCustomElement$5 } from './index16.js';
+import { d as defineCustomElement$4 } from './index23.js';
+import { d as defineCustomElement$3 } from './index25.js';
+import { d as defineCustomElement$2 } from './index26.js';
+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:var(--color-default-icon);content:\"\";font-size:var(--font-size-3);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,::slotted([slot=\"menu-button\"]){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}.has-top-subtitle .z-logo{display:none}.top-subtitle.has-product-logo{padding-left:calc(32px + var(--space-unit))}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 ZAppHeaderStyle0 = stylesCss;
+const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
+const ZAppHeader$1 = /*@__PURE__*/ proxyCustomElement(class ZAppHeader extends HTMLElement {
+    onStuck() {
+        const scrollParent = this.scrollParent;
+        if (!scrollParent) {
+            return;
+        }
+        this.sticking.emit(this._stuck);
+    }
+    setMenuFloatingMode() {
+        if (this.menuElements.length === 0) {
+            return;
+        }
+        this.menuElements.forEach((element) => {
+            element.open = false;
+            element.verticalContext = this.drawerOpen;
+        });
+    }
+    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);
+        }
+    }
+    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;
+        if (parent === document.body || parent === document.documentElement) {
+            return window;
+        }
+        return parent;
+    }
+    get canShowMenu() {
+        return !this.enableOffcanvas && this.menuElements.length > 0 && !this.isMobile && !this.drawerOpen;
+    }
+    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() {
+        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();
+    }
+    /** 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);
+    }
+    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 !== 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();
+            }
+        }
+    }
+    /** Close each menu except the one receiving focus/click, if any */
+    manageMenus(ev) {
+        const targetMenu = this.menuElements.find((menu) => containsElement(menu, ev.target));
+        if (targetMenu) {
+            this.menuElements.forEach((menu) => {
+                if (menu === targetMenu) {
+                    return;
+                }
+                menu.htmlTabindex = -1;
+                if (!this.drawerOpen) {
+                    menu.open = false;
+                }
+            });
+        }
+        else if (!this.drawerOpen) {
+            this.menuElements.forEach((menu) => {
+                menu.open = false;
+            });
+        }
+    }
+    handleKeydown(ev) {
+        var _a, _b;
+        if (ev.key === 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 === KeyboardCode.ARROW_RIGHT && !current.verticalContext) ||
+            (ev.key === KeyboardCode.ARROW_DOWN && current.verticalContext)) {
+            receiver = (_a = this.menuElements[currentIndex + 1]) !== null && _a !== void 0 ? _a : this.menuElements[0];
+        }
+        else if ((ev.key === KeyboardCode.ARROW_LEFT && !current.verticalContext) ||
+            (ev.key === 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 === KeyboardCode.ARROW_UP && current.verticalContext) {
+            if (receiver.open) {
+                current.htmlTabindex = -1;
+                receiver.focusLastItem();
+                return;
+            }
+        }
+        this.moveFocus(current, receiver);
+    }
+    renderSeachbar() {
+        if (this.isMobile && !this.searchPageUrl && this._stuck) {
+            return;
+        }
+        if (this.searchPageUrl && (this.isMobile || this.isTablet)) {
+            return (h("z-button", { class: "search-page-button", variant: ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: ControlSize.X_SMALL }));
+        }
+        return (h("z-searchbar", { value: this.searchString, placeholder: this.searchPlaceholder, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
+    }
+    renderProductLogos() {
+        return (h(Fragment, null, this.enableZLogo && (h("span", { class: "z-logo" }, h("img", { alt: "Logo Zanichelli" }))), this.hostElement.querySelector("[slot='product-logo']") && (h("span", { class: "product-logo" }, h("slot", { name: "product-logo" })))));
+    }
+    renderMenuButton() {
+        return (this.menuLength > 0 &&
+            (this.enableOffcanvas || this._stuck || this.isMobile) && (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 }, h("z-icon", { name: "burger-menu" }))));
+    }
+    renderOffcanvas() {
+        return (h("z-offcanvas", { id: "offcanvas-menu", variant: OffCanvasVariant.OVERLAY, transitiondirection: TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail), onKeyDown: this.onOffcanvasKeydown }, h("div", { slot: "canvasContent" }, h("button", { ref: (el) => (this.closeDrawerButton = el), class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content", "aria-hidden": `${!this.drawerOpen}` }, h("slot", { name: "menu", onSlotchange: this.collectMenuElements })))));
+    }
+    renderStuck() {
+        return (h("div", { class: "heading-stuck" }, h("div", { class: "heading-stuck-content" }, this.renderMenuButton(), h("div", { class: "heading-title" }, this.renderProductLogos(), h("div", { class: "stucked-title" }, h("slot", { name: "stucked-title" }, this.title))), this.enableSearch && this.renderSeachbar())));
+    }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sticking = 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();
+        // mobile and tablet media queries listeners
+        const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);
+        this.isMobile = mobileMediaQuery.matches;
+        mobileMediaQuery.addEventListener("change", (e) => (this.isMobile = e.matches));
+        const tabletMediaQuery = window.matchMedia(`(min-width: ${Breakpoints.MOBILE + 1}px) and (max-width: ${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() {
+        const hasTopSubtitle = this.hasSlot("top-subtitle");
+        return (h(Host, { key: 'a823113610378e9d634bf1779f5be2f5dc0c39f1', "menu-length": this.menuLength }, h("div", { key: 'c93cc0d8ef6cfba9875b2a4be50f065a4c276329', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '5138c2f0828d182ca610696b341f7292a12dc29b', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '3ccea8b1134d18c47e7736683090a5cff1f5805c', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: '7f2e046036bb62644b4d20ebcea6879d146f7900', name: "top-subtitle" }))), h("div", { key: 'a6be051f516f7e23348c7e3781463048f49c4fb5', class: "heading-title" }, h("slot", { key: '561fab39ded745bfc44a3ed6b16df481771b71eb', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: 'd0339b71194c5b61da665a3ccf38f9188a6b11c9', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '016d2598ab5e436713dc70a100100ecc7490729e', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '8cef304ecced8d2f4f6ba454db5c7ef74fcaed87', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '9bd29440ce257ab3b6f58567713823c2047d7b2c', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "_stuck": ["onStuck"],
+        "drawerOpen": ["setMenuFloatingMode"],
+        "stuck": ["onStuckChange"]
+    }; }
+    static get style() { return ZAppHeaderStyle0; }
+}, [1, "z-app-header", {
+        "stuck": [516],
+        "enableOffcanvas": [1540, "enable-offcanvas"],
+        "enableSearch": [516, "enable-search"],
+        "searchPlaceholder": [1, "search-placeholder"],
+        "searchString": [1025, "search-string"],
+        "searchPageUrl": [1, "search-page-url"],
+        "enableZLogo": [516, "enable-z-logo"],
+        "drawerOpen": [1028, "drawer-open"],
+        "_stuck": [32],
+        "menuLength": [32],
+        "isMobile": [32],
+        "isTablet": [32]
+    }, [[5, "focusin", "manageMenus"], [5, "click", "manageMenus"], [1, "keydown", "handleKeydown"]], {
+        "_stuck": ["onStuck"],
+        "drawerOpen": ["setMenuFloatingMode"],
+        "stuck": ["onStuckChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-app-header", "z-button", "z-divider", "z-icon", "z-input", "z-input-message", "z-list", "z-list-element", "z-list-group", "z-offcanvas", "z-searchbar", "z-tag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-app-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZAppHeader$1);
+            }
+            break;
+        case "z-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "z-divider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "z-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "z-input-message":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "z-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "z-list-element":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "z-list-group":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "z-offcanvas":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "z-searchbar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "z-tag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+const ZAppHeader = ZAppHeader$1;
+const defineCustomElement = defineCustomElement$1;
+export { ZAppHeader, defineCustomElement };
+//# sourceMappingURL=z-app-header.js.map

package/dist/components/z-app-header.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"z-app-header.js","mappings":"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","names":["ZAppHeader"],"sources":["src/components/z-app-header/styles.css?tag=z-app-header&encapsulation=shadow","src/components/z-app-header/index.tsx"],"sourcesContent":[":host {\n --app-header-content-max-width: ;\n\n /* Variable to set stuck header and drawer's top offset.\n Useful when something is absolutely positioned above the header. */\n --app-header-top-offset: ;\n\n /* Variable to customize header background color. */\n --app-header-bg: ;\n\n /* Variable to customize text and icon color. */\n --app-header-text-color: ;\n\n /* Variable to customize stuck header background color. */\n --app-header-stucked-bg: ;\n\n /* Variable to customize stuck header's text and icon color. */\n --app-header-stucked-text-color: ;\n\n position: relative;\n display: block;\n box-shadow: var(--shadow-2);\n}\n\n:host,\n* {\n box-sizing: border-box;\n}\n\n.heading-panel {\n /* Title's line height. */\n --title-line-height: 1.333;\n --title-font-size: var(--font-size-6);\n\n position: relative;\n display: flex;\n width: 100%;\n max-width: var(--app-header-content-max-width, 100%);\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: baseline;\n padding: calc(var(--space-unit) * 2);\n margin: 0 auto;\n background: var(--app-header-bg, var(--color-surface01));\n}\n\n:host(:empty) .heading-panel {\n padding: 0;\n}\n\n.heading-container {\n position: relative;\n z-index: 1;\n display: flex;\n width: 100%;\n max-width: 100%;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n}\n\n.heading-panel.has-menubar {\n padding-bottom: 0;\n}\n\n.heading-panel .heading-container {\n flex-direction: column-reverse;\n}\n\n:host([enable-search]) .heading-panel .heading-container {\n flex-direction: column;\n}\n\n:host([enable-search][search-page-url]) .heading-panel .heading-container {\n flex-direction: row;\n}\n\n.heading-title {\n display: flex;\n width: 100%;\n flex-direction: row;\n align-items: flex-start;\n}\n\n.heading-title:not(:last-child) {\n margin-right: var(--space-unit);\n}\n\n.z-logo,\n.search-page-button {\n display: flex;\n height: calc(var(--title-font-size) * var(--title-line-height));\n align-items: center;\n}\n\n.z-logo img {\n height: 24px;\n margin: 0 var(--space-unit) 0 0;\n 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>');\n}\n\n.product-logo {\n display: none;\n}\n\n.product-logo ::slotted([slot=\"product-logo\"]) {\n width: 32px;\n height: 32px;\n margin-right: var(--space-unit);\n}\n\n.product-logo ::slotted([slot=\"product-logo\"]) img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n::slotted([slot=\"title\"]),\n::slotted([slot=\"stucked-title\"]),\n.stucked-title {\n margin: 0;\n color: var(--app-header-text-color, var(--color-default-text));\n font-family: var(--font-family-serif);\n font-weight: var(--font-sb);\n}\n\n::slotted([slot=\"title\"]) {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n font-size: var(--title-font-size);\n -webkit-line-clamp: 2;\n line-clamp: 2;\n line-height: var(--title-line-height);\n text-overflow: ellipsis;\n}\n\n::slotted(a:is([slot=\"title\"], [slot=\"stucked-title\"])) {\n text-decoration: none;\n}\n\n:host([enable-search]) ::slotted([slot=\"title\"]) + * {\n margin-left: calc(var(--space-unit) * 2);\n}\n\n:host([enable-offcanvas]:not([menu-length=\"0\"])) .top-subtitle {\n padding-left: calc(var(--space-unit) * 4 + var(--space-unit));\n}\n\n::slotted([slot=\"top-subtitle\"]) {\n display: -webkit-box;\n overflow: hidden;\n max-width: 80%;\n margin: 0;\n -webkit-box-orient: vertical;\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-2);\n font-style: italic;\n font-weight: var(--font-rg);\n -webkit-line-clamp: 2;\n line-clamp: 2;\n}\n\n.search-page-button {\n margin-left: auto;\n}\n\n.menu-container {\n display: flex;\n flex: 1 auto;\n column-gap: calc(var(--space-unit) * 4);\n}\n\n.menu-container:focus:focus-visible {\n outline: none;\n}\n\n:host([menu-length=\"0\"]) .menu-container,\n.menu-container:empty {\n display: none;\n}\n\n.menu-container ::slotted([open]) {\n position: relative;\n z-index: 3;\n}\n\n.menu-container ::slotted([slot=\"menu\"]:not(:last-child))::after {\n position: absolute;\n top: calc(1.5em / 2); /* half the line-height of the label */\n right: calc(var(--space-unit) * -2);\n width: var(--border-size-small);\n height: 1em;\n background-color: var(--color-default-icon);\n content: \"\";\n font-size: var(--font-size-3);\n transform: translateY(-50%);\n}\n\nz-searchbar {\n z-index: 0;\n display: flex;\n width: 100%;\n align-items: center;\n}\n\n.heading-stuck {\n position: fixed;\n z-index: 20;\n top: var(--app-header-top-offset, 48px);\n left: 0;\n width: 100%;\n max-width: 100%;\n animation: slide-stuck-heading-in 250ms ease-out;\n background: var(--app-header-stucked-bg, var(--color-surface01));\n box-shadow: var(--shadow-2);\n color: var(--app-header-stucked-text-color, var(--color-default-text));\n}\n\n.heading-stuck-content {\n display: flex;\n max-width: var(--app-header-content-max-width, 100%);\n align-items: center;\n padding: var(--space-unit) var(--grid-margin);\n margin: 0 auto;\n}\n\n.heading-stuck .heading-title {\n --title-font-size: var(--font-size-5);\n --title-line-height: 1.4;\n\n overflow: hidden;\n align-items: center;\n}\n\n.heading-stuck .stucked-title {\n overflow: hidden;\n font-size: var(--title-font-size);\n line-height: var(--title-line-height);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.drawer-trigger,\n::slotted([slot=\"menu-button\"]) {\n display: flex;\n height: calc(var(--title-font-size) * var(--title-line-height));\n align-items: center;\n padding: 0;\n border: 0;\n margin-right: var(--space-unit);\n appearance: none;\n background: none;\n border-radius: 0;\n color: inherit;\n cursor: pointer;\n outline: none;\n}\n\n.drawer-trigger:focus:focus-visible z-icon {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.drawer-trigger z-icon {\n --z-icon-width: calc(var(--space-unit) * 4);\n --z-icon-height: calc(var(--space-unit) * 4);\n\n fill: var(--color-default-icon);\n}\n\n.drawer-content {\n display: none;\n}\n\nz-offcanvas {\n --z-offcanvas--top-space: var(--app-header-top-offset);\n}\n\nz-offcanvas[open] .drawer-content {\n display: flex;\n width: 100%;\n flex: 1 auto;\n flex-direction: column;\n}\n\nz-offcanvas[open] .drawer-content ::slotted(z-menu) {\n width: 100%;\n}\n\n.drawer-close {\n --z-icon-width: calc(var(--space-unit) * 4);\n --z-icon-height: calc(var(--space-unit) * 4);\n\n padding: 0;\n border: 0;\n margin: var(--space-unit) 0 calc(var(--space-unit) * 2.5);\n appearance: none;\n background: transparent;\n border-radius: 0;\n cursor: pointer;\n outline: none;\n}\n\n.drawer-close z-icon {\n fill: var(--color-default-icon);\n}\n\n.drawer-close:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n}\n\n@media (max-width: 767px) {\n :host([enable-search]) .heading-panel .heading-container {\n row-gap: calc(var(--space-unit) * 1.5);\n }\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n .heading-panel {\n --title-font-size: var(--font-size-9);\n\n padding: calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25);\n }\n\n :host([enable-search][search-page-url]) .heading-panel .heading-container {\n flex-direction: column;\n }\n\n .heading-panel .heading-container {\n flex-direction: column;\n margin-right: auto;\n }\n\n .z-logo img {\n height: 32px;\n }\n\n .product-logo {\n display: flex;\n height: calc(var(--title-font-size) * var(--title-line-height));\n align-items: center;\n }\n\n .has-top-subtitle .z-logo {\n display: none;\n }\n\n .top-subtitle.has-product-logo {\n padding-left: calc(32px + var(--space-unit));\n }\n\n z-searchbar {\n width: 30%;\n height: calc(var(--title-font-size) * var(--title-line-height));\n margin-left: auto;\n }\n\n .menu-container {\n flex: initial;\n }\n\n .menu-container > [role=\"menubar\"] {\n display: contents;\n }\n\n :host(:not([enable-offcanvas])) .menu-container {\n margin-top: calc((var(--space-unit) * 1.75));\n }\n\n :host(:not([enable-offcanvas])) .heading-container .drawer-trigger {\n display: none;\n }\n\n .heading-stuck .heading-title {\n --title-font-size: var(--font-size-8);\n --title-line-height: 1.5;\n }\n\n .heading-stuck-content {\n padding: 6px var(--grid-margin);\n }\n\n :host(:not([enable-offcanvas], [menu-length=\"0\"])) {\n padding-left: 0;\n }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n z-searchbar {\n min-width: calc(var(--space-unit) * 45);\n }\n}\n\n@keyframes slide-stuck-heading-in {\n 0% {\n transform: translate3d(0, -100%, 0);\n }\n\n 100% {\n transform: none;\n }\n}\n","import {Component, Element, Event, EventEmitter, Fragment, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/**\n * @slot menu-button - Slot for a custom menu button. It will replace the default burger icon.\n * @slot title - Slot for the main title\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @slot product-logo - To insert the product logo, it should be used with an img tag.\n * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-text-color - Header text color. Defaults to `--color-default-text`.\n * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.\n */\n@Component({\n tag: \"z-app-header\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAppHeader {\n @Element() hostElement: HTMLZAppHeaderElement;\n\n /**\n * Stuck mode for the header.\n * You can programmatically set it using an IntersectionObserver.\n */\n @Prop({reflect: true})\n stuck = false;\n\n /**\n * When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container.\n */\n @Prop({reflect: true, mutable: true})\n enableOffcanvas = false;\n\n /**\n * Enable the search bar.\n */\n @Prop({reflect: true})\n enableSearch = false;\n\n /**\n * Placeholder text for the search bar.\n */\n @Prop()\n searchPlaceholder = \"Cerca\";\n\n /**\n * Search string for the search bar.\n */\n @Prop({mutable: true})\n searchString = \"\";\n\n /**\n * Url to the search page.\n * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n * The link will also appear on the sticky header.\n */\n @Prop()\n searchPageUrl: string;\n\n /**\n * Enable laZ logo.\n */\n @Prop({reflect: true})\n enableZLogo = true;\n\n /**\n * The opening state of the drawer.\n */\n @Prop({mutable: true})\n drawerOpen = false;\n\n /**\n * Emitted when the `stuck` state of the header changes\n */\n @Event()\n sticking: EventEmitter;\n\n /**\n * The stuck state of the bar.\n */\n @State()\n private _stuck = false;\n\n /**\n * Current count of menu items.\n */\n @State()\n private menuLength: number;\n\n @State()\n private isMobile = true;\n\n @State()\n private isTablet = false;\n\n private container?: HTMLDivElement;\n\n private menuElements: HTMLZMenuElement[] = [];\n\n private menuWidth: number;\n\n private closeDrawerButton: HTMLButtonElement;\n\n private burgerButton: HTMLButtonElement;\n\n private menuResizeObserver: ResizeObserver;\n\n private stuckIntersecObserver?: IntersectionObserver = SUPPORT_INTERSECTION_OBSERVER\n ? new IntersectionObserver(\n ([entry]) => {\n this._stuck = !entry.isIntersecting;\n },\n {threshold: 0.5}\n )\n : undefined;\n\n @Watch(\"_stuck\")\n onStuck(): void {\n const scrollParent = this.scrollParent;\n if (!scrollParent) {\n return;\n }\n\n this.sticking.emit(this._stuck);\n }\n\n @Watch(\"drawerOpen\")\n setMenuFloatingMode(): void {\n if (this.menuElements.length === 0) {\n return;\n }\n\n this.menuElements.forEach((element) => {\n element.open = false;\n element.verticalContext = this.drawerOpen;\n });\n }\n\n @Watch(\"stuck\")\n onStuckChange(): void {\n if (!this.container) {\n return;\n }\n\n if (this.stuck) {\n this.stuckIntersecObserver?.observe(this.container);\n } else {\n this._stuck = false;\n this.stuckIntersecObserver?.unobserve(this.container);\n }\n }\n\n private get title(): string {\n return this.hostElement.querySelector('[slot=\"title\"]')?.textContent.trim();\n }\n\n private get scrollParent(): Window | Element {\n const parent = this.hostElement.offsetParent;\n if (parent === document.body || parent === document.documentElement) {\n return window;\n }\n\n return parent;\n }\n\n private get canShowMenu(): boolean {\n return !this.enableOffcanvas && this.menuElements.length > 0 && !this.isMobile && !this.drawerOpen;\n }\n\n private get focusableMenu(): HTMLZMenuElement {\n return this.menuElements.find((el) => el.htmlTabindex === 0);\n }\n\n private openDrawer(): void {\n this.drawerOpen = true;\n this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n setTimeout(() => this.menuElements[0].setFocus(), 400); /* wait for the 400ms offcanvas transition */\n }\n\n private closeDrawer(): void {\n this.drawerOpen = false;\n setTimeout(() => this.burgerButton.focus(), 100);\n }\n\n private collectMenuElements(): void {\n this.menuElements = Array.from(this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n this.menuLength = this.menuElements.length;\n if (!this.enableOffcanvas) {\n this.menuWidth =\n this.menuElements.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0) +\n (this.menuLength - 1) * 32 /* 32px is the gap between each menu item */;\n }\n this.setMenuFloatingMode();\n }\n\n /** Automatically use offcanvas mode when the menubar doesn't fit in the header. */\n private setupMenuResizeObserver(): void {\n if (this.enableOffcanvas) {\n return;\n }\n\n this.menuResizeObserver = new ResizeObserver((entries) => {\n if (this.isMobile) {\n this.enableOffcanvas = true;\n\n return;\n }\n\n const containerWidth = entries[0].contentBoxSize[0].inlineSize;\n if (this.menuWidth === 0) {\n return;\n }\n\n if (this.menuWidth > containerWidth && !this.enableOffcanvas) {\n this.enableOffcanvas = true;\n } else if (this.menuWidth <= containerWidth && this.enableOffcanvas) {\n this.enableOffcanvas = false;\n }\n });\n this.menuResizeObserver.observe(this.container);\n }\n\n private hasSlot(slotName: string): boolean {\n return this.hostElement.querySelector(`[slot=\"${slotName}\"]`) !== null;\n }\n\n private moveFocus(current: HTMLZMenuElement, receiver: HTMLZMenuElement): void {\n current.htmlTabindex = -1;\n receiver.setFocus();\n }\n\n private onOffcanvasKeydown(ev: KeyboardEvent): void {\n if (ev.key !== KeyboardCode.TAB || !this.drawerOpen) {\n return;\n }\n\n const closestMenu = (ev.target as HTMLElement).closest(\"z-menu\");\n if (closestMenu) {\n ev.preventDefault();\n ev.stopPropagation();\n // restore tabindex to the zmenu containing the focused element\n closestMenu.htmlTabindex = 0;\n this.closeDrawerButton.focus();\n } else if (ev.target === this.closeDrawerButton) {\n ev.preventDefault();\n ev.stopPropagation();\n if (ev.shiftKey) {\n // give focus to the last open menu if any or the last menu otherwhise\n (this.menuElements.filter((menu) => menu.open).pop() ?? this.menuElements[this.menuLength - 1]).setFocus();\n } else {\n // give focus to the first open menu if any or the first menu otherwhise\n (this.menuElements.find((menu) => menu.open) ?? this.menuElements[0]).setFocus();\n }\n }\n }\n\n /** Close each menu except the one receiving focus/click, if any */\n @Listen(\"focusin\", {target: \"document\", passive: true})\n @Listen(\"click\", {target: \"document\", passive: true})\n manageMenus(ev: FocusEvent | PointerEvent): void {\n const targetMenu = this.menuElements.find((menu) => containsElement(menu, ev.target as Element));\n if (targetMenu) {\n this.menuElements.forEach((menu) => {\n if (menu === targetMenu) {\n return;\n }\n\n menu.htmlTabindex = -1;\n if (!this.drawerOpen) {\n menu.open = false;\n }\n });\n } else if (!this.drawerOpen) {\n this.menuElements.forEach((menu) => {\n menu.open = false;\n });\n }\n }\n\n @Listen(\"keydown\", {passive: true})\n handleKeydown(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.ESC && this.drawerOpen) {\n this.closeDrawer();\n\n return;\n }\n\n if (!this.menuElements.some((elem) => elem.contains(ev.target as HTMLElement))) {\n return;\n }\n\n const current = this.focusableMenu;\n const currentIndex = this.menuElements.indexOf(current);\n let receiver: HTMLZMenuElement;\n if (\n (ev.key === KeyboardCode.ARROW_RIGHT && !current.verticalContext) ||\n (ev.key === KeyboardCode.ARROW_DOWN && current.verticalContext)\n ) {\n receiver = this.menuElements[currentIndex + 1] ?? this.menuElements[0];\n } else if (\n (ev.key === KeyboardCode.ARROW_LEFT && !current.verticalContext) ||\n (ev.key === KeyboardCode.ARROW_UP && current.verticalContext)\n ) {\n receiver = this.menuElements[currentIndex - 1] ?? this.menuElements[this.menuLength - 1];\n }\n if (!receiver) {\n return;\n }\n\n if (ev.key === KeyboardCode.ARROW_UP && current.verticalContext) {\n if (receiver.open) {\n current.htmlTabindex = -1;\n receiver.focusLastItem();\n\n return;\n }\n }\n\n this.moveFocus(current, receiver);\n }\n\n private renderSeachbar(): HTMLZButtonElement | HTMLZSearchbarElement | undefined {\n if (this.isMobile && !this.searchPageUrl && this._stuck) {\n return;\n }\n\n if (this.searchPageUrl && (this.isMobile || this.isTablet)) {\n return (\n <z-button\n class=\"search-page-button\"\n variant={ButtonVariant.SECONDARY}\n href={this.searchPageUrl}\n icon=\"search\"\n size={ControlSize.X_SMALL}\n />\n );\n }\n\n return (\n <z-searchbar\n value={this.searchString}\n placeholder={this.searchPlaceholder}\n showSearchButton={true}\n searchButtonIconOnly={this.isMobile || this.isTablet}\n size={ControlSize.X_SMALL}\n variant={ButtonVariant.SECONDARY}\n preventSubmit={this.searchString.length < 3}\n onSearchTyping={(e) => (this.searchString = e.detail)}\n />\n );\n }\n\n private renderProductLogos(): HTMLElement | null {\n return (\n <Fragment>\n {this.enableZLogo && (\n <span class=\"z-logo\">\n <img alt=\"Logo Zanichelli\" />\n </span>\n )}\n {this.hostElement.querySelector(\"[slot='product-logo']\") && (\n <span class=\"product-logo\">\n <slot name=\"product-logo\" />\n </span>\n )}\n </Fragment>\n );\n }\n\n private renderMenuButton(): HTMLButtonElement {\n return (\n this.menuLength > 0 &&\n (this.enableOffcanvas || this._stuck || this.isMobile) && (\n <button\n ref={(el) => (this.burgerButton = el as HTMLButtonElement)}\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n aria-haspopup=\"menu\"\n aria-expanded={`${this.drawerOpen}`}\n aria-controls=\"offcanvas-menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\" />\n </button>\n )\n );\n }\n\n private renderOffcanvas(): HTMLZOffcanvasElement {\n return (\n <z-offcanvas\n id=\"offcanvas-menu\"\n variant={OffCanvasVariant.OVERLAY}\n transitiondirection={TransitionDirection.RIGHT}\n open={this.drawerOpen}\n onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n onKeyDown={this.onOffcanvasKeydown}\n >\n <div slot=\"canvasContent\">\n <button\n ref={(el) => (this.closeDrawerButton = el)}\n class=\"drawer-close\"\n aria-label=\"Chiudi menu\"\n onClick={this.closeDrawer}\n aria-hidden={`${!this.drawerOpen}`}\n disabled={!this.drawerOpen}\n >\n <z-icon name=\"close\" />\n </button>\n\n <div\n class=\"drawer-content\"\n aria-hidden={`${!this.drawerOpen}`}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n />\n </div>\n </div>\n </z-offcanvas>\n );\n }\n\n private renderStuck(): HTMLElement {\n return (\n <div class=\"heading-stuck\">\n <div class=\"heading-stuck-content\">\n {this.renderMenuButton()}\n <div class=\"heading-title\">\n {this.renderProductLogos()}\n <div class=\"stucked-title\">\n <slot name=\"stucked-title\">{this.title}</slot>\n </div>\n </div>\n {this.enableSearch && this.renderSeachbar()}\n </div>\n </div>\n );\n }\n\n constructor() {\n this.openDrawer = this.openDrawer.bind(this);\n this.closeDrawer = this.closeDrawer.bind(this);\n this.collectMenuElements = this.collectMenuElements.bind(this);\n this.onOffcanvasKeydown = this.onOffcanvasKeydown.bind(this);\n }\n\n componentWillLoad(): void {\n this.collectMenuElements();\n\n // mobile and tablet media queries listeners\n const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);\n this.isMobile = mobileMediaQuery.matches;\n mobileMediaQuery.addEventListener(\"change\", (e) => (this.isMobile = e.matches));\n const tabletMediaQuery = window.matchMedia(\n `(min-width: ${Breakpoints.MOBILE + 1}px) and (max-width: ${Breakpoints.TABLET}px)`\n );\n this.isTablet = tabletMediaQuery.matches;\n tabletMediaQuery.addEventListener(\"change\", (e) => (this.isTablet = e.matches));\n }\n\n componentDidLoad(): void {\n this.onStuckChange();\n this.setupMenuResizeObserver();\n }\n\n disconnectedCallback(): void {\n this.menuResizeObserver?.disconnect();\n }\n\n render(): HTMLZAppHeaderElement {\n const hasTopSubtitle = this.hasSlot(\"top-subtitle\");\n\n return (\n <Host menu-length={this.menuLength}>\n <div\n class={{\"heading-panel\": true, \"has-menubar\": this.menuLength > 0 && !this.enableOffcanvas}}\n ref={(el) => (this.container = el)}\n >\n <div class={{\"heading-container\": true, \"has-top-subtitle\": hasTopSubtitle}}>\n {((!this.enableSearch && this.isMobile) || !this.isMobile) && (\n <div class={{\"top-subtitle\": true, \"has-product-logo\": hasTopSubtitle && this.hasSlot(\"product-logo\")}}>\n <slot name=\"top-subtitle\" />\n </div>\n )}\n <div class=\"heading-title\">\n <slot name=\"menu-button\">{this.renderMenuButton()}</slot>\n {!this._stuck && this.renderProductLogos()}\n <slot name=\"title\" />\n {this.enableSearch && !this.isMobile && this.renderSeachbar()}\n </div>\n {this.enableSearch && this.isMobile && this.renderSeachbar()}\n </div>\n\n <nav\n class=\"menu-container\"\n aria-label={this.title || undefined}\n >\n {this.canShowMenu && (\n <div\n role=\"menubar\"\n aria-label={this.title || undefined}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n />\n </div>\n )}\n </nav>\n </div>\n {this.renderOffcanvas()}\n {this._stuck && this.renderStuck()}\n </Host>\n );\n }\n}\n"],"version":3}