npm - @zanichelli/albe-web-components - Versions diffs - 19.1.4-RC1 → 19.2.1-RC - Mend

@zanichelli/albe-web-components 19.1.4-RC1 → 19.2.1-RC

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 (800) hide show

package/dist/components/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"utils.js","mappings":"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","names":[],"sources":["src/utils/utils.ts"],"sourcesContent":["import {ChildNode} from \"@stencil/core\";\nimport {Device, KeyboardCode} from \"../beans/index\";\nimport {Breakpoints} from \"../constants/breakpoints\";\n\n/*\n Return boolean value for passed value if a boolean corresponding value is found\n * Return passed value otherwise\n /\nexport function boolean(value: string \| number \| boolean): boolean \| string \| number {\n switch (value) {\n case true:\n case \"true\":\n case 1:\n case \"1\":\n case \"on\":\n case \"yes\":\n return true;\n case false:\n case \"false\":\n case 0:\n case \"0\":\n case \"off\":\n case \"no\":\n return false;\n default:\n return value;\n }\n}\n\nexport function retrieveAsset(assetName: string): string {\n return assetName && \"assets/images/png/\" + assetName;\n}\n\nexport function randomId(): string {\n return Math.random().toString(36).replace(\"0.\", \"\");\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function handleKeyboardSubmit(ev: KeyboardEvent, callback: (...args) => void, ...args: any[]): void {\n if (ev.code === KeyboardCode.ENTER \|\| ev.code === KeyboardCode.SPACE) {\n ev.preventDefault();\n callback(...args);\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function handleEnterKeydSubmit(ev: KeyboardEvent, callback: (...args) => void, ...args: any[]): void {\n if (ev.code === KeyboardCode.ENTER) {\n ev.preventDefault();\n callback(...args);\n }\n}\n\nexport function getClickedElement(elem: null \| Element = null): null \| Element {\n if (!elem) {\n elem = document.activeElement;\n }\n\n if (elem && elem.shadowRoot && elem.shadowRoot.activeElement) {\n elem = elem.shadowRoot.activeElement;\n\n return getClickedElement(elem);\n }\n\n return elem;\n}\n\nexport function getElementTree(elem: Element, tree: Element[] = []): null \| Element[] {\n tree.push(elem);\n\n if (elem.parentElement) {\n elem = elem.parentElement;\n\n return getElementTree(elem, tree);\n } else if (elem.parentNode && (elem.parentNode as ShadowRoot).host) {\n elem = (elem.parentNode as ShadowRoot).host;\n\n return getElementTree(elem, tree);\n }\n\n return tree;\n}\n\nexport function getSiblings(elem: HTMLElement): ChildNode[] {\n const siblings = [];\n if (!elem \|\| !elem.parentNode \|\| !elem.parentNode.childNodes) {\n return siblings;\n }\n\n elem.parentNode.childNodes.forEach((child) => {\n if (child.nodeType === 1 && child !== elem) {\n siblings.push(child);\n }\n });\n\n return siblings;\n}\n\n/\n Get the current device type based on the window width.\n * @returns {Device} - The current device type\n /\nexport function getDevice(): Device {\n switch (true) {\n case window.innerWidth <= Breakpoints.MOBILE:\n return Device.MOBILE;\n case window.innerWidth <= Breakpoints.TABLET:\n return Device.TABLET;\n case window.innerWidth <= Breakpoints.DESKTOP:\n return Device.DESKTOP;\n default:\n return Device.DESKTOP_WIDE;\n }\n}\n\ntype JSONValue = string \| number \| boolean \| JSONObject \| JSONArray;\ninterface JSONObject {\n [x: string]: JSONValue;\n}\ntype JSONArray = JSONValue[];\n\nexport function convertJson(data: string): JSONValue {\n try {\n return JSON.parse(data);\n } catch {\n return false;\n }\n}\n\nexport function colorFromId(id: number): string {\n const prefix = \"avatar-C\"; // prefix for color vars name\n const colorsCount = 19; // available colors\n const seed = Math.ceil(2 * 31 - 1) * parseFloat(`0.${id}`);\n let color = Math.ceil(colorsCount * (seed % 1));\n\n // if result of mc is 0\n // es.: 3895229\n if (color === 0) {\n color = 1;\n }\n\n return `${prefix}${color.toString().padStart(2, \"0\")}`;\n}\n\n/*\n Check if the passed CSS selector is valid.\n * @param selector CSS selector to validate\n /\nexport function isSelectorValid(selector: string): boolean {\n try {\n document.createDocumentFragment().querySelector(selector);\n\n return true;\n } catch {\n return false;\n }\n}\n\n/\n Check if an element contains another element, checking both light and shadow DOM.\n * @param ancestor Ancestor element\n * @param descendant Descendant element\n /\nexport function containsElement(ancestor: HTMLElement, descendant: Node): boolean {\n return ancestor.contains(descendant) \|\| !!ancestor.shadowRoot?.contains(descendant);\n}\n\n/* Get the parent of passed element, accounting for shadow DOM.\n * @param element The element whose parent is to be found.\n /\nexport function getParentElement(element: Element): Element {\n if (element.parentNode === element.shadowRoot) {\n return element.shadowRoot.host;\n }\n\n if (element.parentNode instanceof ShadowRoot) {\n return element.parentNode.host;\n }\n\n return element.parentElement;\n}\n\n/\n Check if the `element` is visible within the `container` or in the viewport.\n * @param element The element to check.\n * @param container The container to check against, which must be the nearest scrollable ancestor.\n /\nexport function isElementVisibleInContainer(element: HTMLElement, container: HTMLElement): boolean {\n const elemRect = element.getBoundingClientRect();\n const documentWidth = element.ownerDocument.documentElement.clientWidth;\n const documentHeight = element.ownerDocument.documentElement.clientHeight;\n\n // Check if element is visible in viewport\n const isVisibleInViewport =\n elemRect.bottom > 0 && elemRect.top < documentHeight && elemRect.right > 0 && elemRect.left < documentWidth;\n\n // If container is the document element, only check viewport visibility\n if (container === element.ownerDocument.documentElement \|\| container === element.ownerDocument.body) {\n return isVisibleInViewport;\n }\n\n // For other containers, check both container and viewport visibility\n const containerRect = container.getBoundingClientRect();\n const isVisibleInContainer =\n elemRect.bottom > containerRect.top &&\n elemRect.top < containerRect.bottom &&\n elemRect.right > containerRect.left &&\n elemRect.left < containerRect.right;\n\n return isVisibleInContainer && isVisibleInViewport;\n}\n\n/\n Find the nearest containing block ancestor of an element.\n * The containing block is determined based on the element's `position` value:\n * - `static`, `sticky` or `relative`: nearest block container or root\n * - `absolute`: nearest ancestor with `position` != `static`\n * - `fixed`: nearest ancestor with properties that create a containing block (`transform`, `filter`, `will-change`, `backdrop-filter`, `perspective`, etc.).\n * An ancestor with these properties will create a containing block for fixed positioned elements, making them behave like absolute positioned elements relative to that ancestor.\n \n @link https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Display/Containing_block#identifying_the_containing_block\n * @param element The element for which to find the containing block\n * @returns The containing block element if any, or the `documentElement`\n */\nexport function findContainingBlockAncestor(element: HTMLElement): HTMLElement {\n let parent = getParentElement(element);\n const elementPosition = window.getComputedStyle(element).position;\n while (parent && parent !== element.ownerDocument.documentElement) {\n const parentStyle = window.getComputedStyle(parent);\n\n switch (elementPosition) {\n case \"fixed\": {\n const affectingProperties = [\n \"filter\",\n \"transform\",\n \"translate\",\n \"perspective\",\n \"scale\",\n \"rotate\",\n \"backdrop-filter\",\n ];\n if (\n affectingProperties.some((property) => parentStyle.getPropertyValue(property) !== \"none\") \|\|\n affectingProperties.some((property) => parentStyle.getPropertyValue(\"will-change\").includes(property))\n ) {\n return parent as HTMLElement;\n }\n break;\n }\n case \"absolute\":\n if (parentStyle.position !== \"static\") {\n return parent as HTMLElement;\n }\n break;\n // Handle position: static, relative, sticky (they all look for the nearest block container or root)\n case \"relative\":\n case \"sticky\":\n case \"static\": {\n const display = window.getComputedStyle(parent).display;\n\n // Block containers: block, flex, grid, table, flow-root\n if (\n display === \"block\" \|\|\n display === \"flex\" \|\|\n display === \"grid\" \|\|\n display === \"table\" \|\|\n display === \"flow-root\" \|\|\n display === \"inline-block\" \|\|\n display === \"inline-flex\" \|\|\n display === \"inline-grid\"\n ) {\n return parent as HTMLElement;\n }\n\n break;\n }\n }\n\n parent = getParentElement(parent);\n }\n\n return element.ownerDocument.documentElement;\n}\n"],"version":3}
1	+ {"file":"utils.js","mappings":"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","names":[],"sources":["src/utils/utils.ts"],"sourcesContent":["import {ChildNode} from \"@stencil/core\";\nimport {Device, KeyboardCode} from \"../beans/index\";\nimport {Breakpoints} from \"../constants/breakpoints\";\n\n/*\n Return boolean value for passed value if a boolean corresponding value is found\n * Return passed value otherwise\n /\nexport function boolean(value: string \| number \| boolean): boolean \| string \| number {\n switch (value) {\n case true:\n case \"true\":\n case 1:\n case \"1\":\n case \"on\":\n case \"yes\":\n return true;\n case false:\n case \"false\":\n case 0:\n case \"0\":\n case \"off\":\n case \"no\":\n return false;\n default:\n return value;\n }\n}\n\nexport function retrieveAsset(assetName: string): string {\n return assetName && \"assets/images/png/\" + assetName;\n}\n\nexport function randomId(): string {\n return Math.random().toString(36).replace(\"0.\", \"\");\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function handleKeyboardSubmit(ev: KeyboardEvent, callback: (...args) => void, ...args: any[]): void {\n if (ev.code === KeyboardCode.ENTER \|\| ev.code === KeyboardCode.SPACE) {\n ev.preventDefault();\n callback(...args);\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function handleEnterKeydSubmit(ev: KeyboardEvent, callback: (...args) => void, ...args: any[]): void {\n if (ev.code === KeyboardCode.ENTER) {\n ev.preventDefault();\n callback(...args);\n }\n}\n\nexport function getClickedElement(elem: null \| Element = null): null \| Element {\n if (!elem) {\n elem = document.activeElement;\n }\n\n if (elem && elem.shadowRoot && elem.shadowRoot.activeElement) {\n elem = elem.shadowRoot.activeElement;\n\n return getClickedElement(elem);\n }\n\n return elem;\n}\n\nexport function getElementTree(elem: Element, tree: Element[] = []): null \| Element[] {\n tree.push(elem);\n\n if (elem.parentElement) {\n elem = elem.parentElement;\n\n return getElementTree(elem, tree);\n } else if (elem.parentNode && (elem.parentNode as ShadowRoot).host) {\n elem = (elem.parentNode as ShadowRoot).host;\n\n return getElementTree(elem, tree);\n }\n\n return tree;\n}\n\nexport function getSiblings(elem: HTMLElement): ChildNode[] {\n const siblings = [];\n if (!elem \|\| !elem.parentNode \|\| !elem.parentNode.childNodes) {\n return siblings;\n }\n\n elem.parentNode.childNodes.forEach((child) => {\n if (child.nodeType === 1 && child !== elem) {\n siblings.push(child);\n }\n });\n\n return siblings;\n}\n\n/\n Get the current device type based on the window width.\n * @returns {Device} - The current device type\n /\nexport function getDevice(): Device {\n switch (true) {\n case window.innerWidth <= Breakpoints.MOBILE:\n return Device.MOBILE;\n case window.innerWidth <= Breakpoints.TABLET:\n return Device.TABLET;\n case window.innerWidth <= Breakpoints.DESKTOP:\n return Device.DESKTOP;\n default:\n return Device.DESKTOP_WIDE;\n }\n}\n\ntype JSONValue = string \| number \| boolean \| JSONObject \| JSONArray;\ninterface JSONObject {\n [x: string]: JSONValue;\n}\ntype JSONArray = JSONValue[];\n\nexport function convertJson(data: string): JSONValue {\n try {\n return JSON.parse(data);\n } catch {\n return false;\n }\n}\n\nexport function colorFromId(id: number): string {\n const prefix = \"avatar-C\"; // prefix for color vars name\n const colorsCount = 19; // available colors\n const seed = Math.ceil(2 * 31 - 1) * parseFloat(`0.${id}`);\n let color = Math.ceil(colorsCount * (seed % 1));\n\n // if result of mc is 0\n // es.: 3895229\n if (color === 0) {\n color = 1;\n }\n\n return `${prefix}${color.toString().padStart(2, \"0\")}`;\n}\n\n/*\n Check if the passed CSS selector is valid.\n * @param selector CSS selector to validate\n /\nexport function isSelectorValid(selector: string): boolean {\n try {\n document.createDocumentFragment().querySelector(selector);\n\n return true;\n } catch {\n return false;\n }\n}\n\n/\n Check if an element contains another element, checking both light and shadow DOM recursively.\n * This function also checks slot assignments, so it correctly handles nested slots across components.\n * @param ancestor Ancestor element\n * @param descendant Descendant element\n /\nexport function containsElement(ancestor: HTMLElement, descendant: Node): boolean {\n if (ancestor.contains(descendant) \|\| ancestor.shadowRoot?.contains(descendant)) {\n return true;\n }\n\n const checkRecursive = (node: Node): boolean => {\n if (node === descendant) {\n return true;\n }\n\n const shadowRoot = (node as HTMLElement).shadowRoot;\n if (!shadowRoot) {\n // Check light DOM children only\n return Array.from(node.childNodes).some(checkRecursive);\n }\n\n if (shadowRoot.contains(descendant)) {\n return true;\n }\n\n // Check slot assigned nodes\n const hasDescendantInAssignedNodes = Array.from(shadowRoot.querySelectorAll(\"slot\")).some((slot) =>\n (slot as HTMLSlotElement)\n .assignedNodes({flatten: true})\n .some((assigned) => (assigned as HTMLElement).contains?.(descendant) \|\| checkRecursive(assigned))\n );\n if (hasDescendantInAssignedNodes) {\n return true;\n }\n\n // Check shadow and light DOM children\n return Array.from(shadowRoot.children).some(checkRecursive) \|\| Array.from(node.childNodes).some(checkRecursive);\n };\n\n return checkRecursive(ancestor);\n}\n\n/* Get the parent of passed element, accounting for shadow DOM.\n * @param element The element whose parent is to be found.\n /\nexport function getParentElement(element: Element): Element \| null {\n // If the element is slotted, the direct rendered parent is the target slot in shadow DOM.\n if (element.assignedSlot) {\n return element.assignedSlot;\n }\n\n // If the element is in a shadow root, the parent is the shadow host.\n if (element.parentNode instanceof ShadowRoot) {\n return element.parentNode.host;\n }\n\n // Otherwise fall back to standard light DOM parent.\n return element.parentElement;\n}\n\n/\n Check if the `element` is visible within the `container` or in the viewport.\n * @param element The element to check.\n * @param container The container to check against, which must be the nearest scrollable ancestor.\n /\nexport function isElementVisibleInContainer(element: HTMLElement, container: HTMLElement): boolean {\n const elemRect = element.getBoundingClientRect();\n const documentWidth = element.ownerDocument.documentElement.clientWidth;\n const documentHeight = element.ownerDocument.documentElement.clientHeight;\n\n // Check if element is visible in viewport\n const isVisibleInViewport =\n elemRect.bottom > 0 && elemRect.top < documentHeight && elemRect.right > 0 && elemRect.left < documentWidth;\n\n // If container is the document element, only check viewport visibility\n if (container === element.ownerDocument.documentElement \|\| container === element.ownerDocument.body) {\n return isVisibleInViewport;\n }\n\n // For other containers, check both container and viewport visibility\n const containerRect = container.getBoundingClientRect();\n const isVisibleInContainer =\n elemRect.bottom > containerRect.top &&\n elemRect.top < containerRect.bottom &&\n elemRect.right > containerRect.left &&\n elemRect.left < containerRect.right;\n\n return isVisibleInContainer && isVisibleInViewport;\n}\n\n/\n Find the nearest containing block ancestor of an element.\n * The containing block is determined based on the element's `position` value:\n * - `static`, `sticky` or `relative`: nearest block container or root\n * - `absolute`: nearest ancestor with `position` != `static`\n * - `fixed`: nearest ancestor with properties that create a containing block (`transform`, `filter`, `will-change`, `backdrop-filter`, `perspective`, etc.).\n * An ancestor with these properties will create a containing block for fixed positioned elements, making them behave like absolute positioned elements relative to that ancestor.\n \n @link https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Display/Containing_block#identifying_the_containing_block\n * @param element The element for which to find the containing block\n * @returns The containing block element if any, or the `documentElement`\n */\nexport function findContainingBlockAncestor(element: HTMLElement): HTMLElement {\n let parent = getParentElement(element);\n const elementPosition = window.getComputedStyle(element).position;\n while (parent && parent !== element.ownerDocument.documentElement) {\n const parentStyle = window.getComputedStyle(parent);\n\n switch (elementPosition) {\n case \"fixed\": {\n const affectingProperties = [\n \"filter\",\n \"transform\",\n \"translate\",\n \"perspective\",\n \"scale\",\n \"rotate\",\n \"backdrop-filter\",\n ];\n if (\n affectingProperties.some((property) => parentStyle.getPropertyValue(property) !== \"none\") \|\|\n affectingProperties.some((property) => parentStyle.getPropertyValue(\"will-change\").includes(property))\n ) {\n return parent as HTMLElement;\n }\n break;\n }\n case \"absolute\":\n if (parentStyle.position !== \"static\") {\n return parent as HTMLElement;\n }\n break;\n // Handle position: static, relative, sticky (they all look for the nearest block container or root)\n case \"relative\":\n case \"sticky\":\n case \"static\": {\n const display = window.getComputedStyle(parent).display;\n\n // Block containers: block, flex, grid, table, flow-root\n if (\n display === \"block\" \|\|\n display === \"flex\" \|\|\n display === \"grid\" \|\|\n display === \"table\" \|\|\n display === \"flow-root\" \|\|\n display === \"inline-block\" \|\|\n display === \"inline-flex\" \|\|\n display === \"inline-grid\"\n ) {\n return parent as HTMLElement;\n }\n\n break;\n }\n }\n\n parent = getParentElement(parent);\n }\n\n return element.ownerDocument.documentElement;\n}\n"],"version":3}

package/dist/components/z-accordion.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { e as ControlSize, _ as AccordionVariant } from './index2.js';
 import { d as defineCustomElement$2 } from './index10.js';
-const stylesCss = ":host,:host *,:host ::slotted(*){box-sizing:border-box}:host{--z-accordion-highlight-color:transparent;--z-accordion-bg:var(--color-surface01);--z-accordion-label-color:var(--color-default-text);--z-accordion-disabled-label-color:var(--color-text03);--z-accordion-content-bg:var(--color-surface01);--z-accordion-content-fg:var(--color-default-text);--z-accordion-hover-color:var(--color-surface02);--z-accordion-left-padding:calc(var(--space-unit) * 2);--z-accordion-right-padding:var(--space-unit);--z-accordion-label-font-weight:var(--font-sb);display:block;border-top:var(--border-size-small) solid var(--color-surface03);border-bottom:var(--border-size-small) solid var(--color-surface03);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([variant=\"background\"]){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}:host([variant=\"background\"][shadow]){box-shadow:var(--shadow-2)}details{background-color:transparent}summary{--summary-x-small-height:32px;--summary-small-height:36px;--summary-big-height:44px;--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit);position:relative;display:flex;min-height:var(--summary-height);align-items:center;padding:var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)\n    var(--z-accordion-left-padding);background-color:var(--z-accordion-bg);column-gap:var(--space-unit);cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}:host([size=\"x-small\"]) summary{--summary-height:var(--summary-x-small-height)}:host([size=\"small\"]) summary{--summary-height:var(--summary-small-height)}:host(:is([size=\"x-small\"],[size=\"small\"])) summary{--summary-y-padding:calc(var(--space-unit) / 2)}:host([variant=\"background\"]) summary{padding-right:calc(var(--space-unit) * 2);border-radius:calc(var(--border-radius) - var(--border-size-small))}:host([variant=\"background\"][open]) summary{border-bottom-left-radius:0;border-bottom-right-radius:0}:host([is-disabled]) summary{cursor:default}summary:focus:focus-visible{background-color:var(--z-accordion-hover-color);box-shadow:var(--shadow-focus-primary);outline:none}summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{position:absolute;top:0;left:0;display:block;width:var(--space-unit);height:100%;content:\"\"}:host([highlight][variant=\"background\"]) summary::before{border-top-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight][variant=\"background\"]:not([open])) summary::before,:host([highlight][variant=\"background\"][open]) .z-accordion-content::before{border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight]) summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--z-accordion-highlight-color, transparent)}:host([is-disabled][highlight]) summary::before,:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--z-accordion-disabled-label-color)}summary>z-icon{fill:var(--z-accordion-label-color)}:host([is-disabled]) summary>z-icon{fill:var(--z-accordion-disabled-label-color)}.z-accordion-label{color:var(--z-accordion-label-color);font-size:var(--font-size-3);font-weight:var(--z-accordion-label-font-weight)}:host([size=\"x-small\"]) .z-accordion-label{font-size:var(--font-size-2)}:host([size=\"x-small\"]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:16px;--z-icon-height:16px}.z-accordion-tags{display:flex;align-items:center;column-gap:calc(var(--space-unit) / 2)}summary z-icon.z-accordion-chevron{margin-left:auto}.z-accordion-content{position:relative;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);background-color:var(--z-accordion-content-bg);color:var(--z-accordion-content-fg);font-size:var(--font-size-2);}:host(:is([size=\"x-small\"],[size=\"small\"])) .z-accordion-content{padding-bottom:var(--space-unit)}:host([size=\"x-small\"]) .z-accordion-content{font-size:var(--font-size-1)}:host([variant=\"background\"]) .z-accordion-content{padding-right:calc(var(--space-unit) * 2)}:host([is-disabled]) .z-accordion-label{color:var(--z-accordion-disabled-label-color)}:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]){--z-tag-bg:var(--z-accordion-disabled-label-color) !important;--z-tag-text-color:var(--color-text-inverse) !important}@media (hover: hover){summary:focus:focus-visible{position:relative;z-index:1}:host(:not([is-disabled])) summary:hover{background-color:var(--z-accordion-hover-color)}:host(:not([is-disabled])) summary:hover .z-accordion-label{text-decoration:underline}}@media (hover: none){:host([size]) summary{--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit)}:host([size]) .z-accordion-label{font-size:var(--font-size-3)}:host([size]) .z-accordion-content{font-size:var(--font-size-2)}:host([size]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:18px;--z-icon-height:18px}}z-accordion+z-accordion{border-top:none}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]{border-radius:0}z-accordion[variant=\"background\"]:first-of-type:not(:last-of-type){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]:last-of-type{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}z-accordion[variant=\"background\"]:first-of-type:not(:last-of-type)::part(summary){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]::part(summary){border-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]:last-of-type:not([open])::part(summary){border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small));border-bottom-right-radius:calc(var(--border-radius) - var(--border-size-small))}";
+const stylesCss = ":host,:host *,:host ::slotted(*){box-sizing:border-box}:host{--z-accordion-highlight-color:transparent;--z-accordion-bg:var(--color-surface01);--z-accordion-label-color:var(--color-default-text);--z-accordion-disabled-label-color:var(--color-text03);--z-accordion-content-bg:var(--color-surface01);--z-accordion-content-fg:var(--color-default-text);--z-accordion-hover-color:var(--color-surface02);--z-accordion-left-padding:calc(var(--space-unit) * 2);--z-accordion-right-padding:var(--space-unit);--z-accordion-label-font-weight:var(--font-sb);display:block;border-top:var(--border-size-small) solid var(--color-surface03);border-bottom:var(--border-size-small) solid var(--color-surface03);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([variant=\"background\"]){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}:host([variant=\"background\"][shadow]){box-shadow:var(--shadow-2)}details{background-color:transparent}summary{--summary-x-small-height:32px;--summary-small-height:36px;--summary-big-height:44px;--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit);position:relative;display:flex;min-height:var(--summary-height);align-items:center;padding:var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)\n    var(--z-accordion-left-padding);background-color:var(--z-accordion-bg);column-gap:var(--space-unit);cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}:host([size=\"x-small\"]) summary{--summary-height:var(--summary-x-small-height)}:host([size=\"small\"]) summary{--summary-height:var(--summary-small-height)}:host(:is([size=\"x-small\"],[size=\"small\"])) summary{--summary-y-padding:calc(var(--space-unit) / 2)}:host([variant=\"background\"]) summary{padding-right:calc(var(--space-unit) * 2);border-radius:calc(var(--border-radius) - var(--border-size-small))}:host([variant=\"background\"][open]) summary{border-bottom-left-radius:0;border-bottom-right-radius:0}:host([is-disabled]) summary{cursor:default}summary:focus:focus-visible{background-color:var(--z-accordion-hover-color);box-shadow:var(--shadow-focus-primary);outline:none}summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{position:absolute;top:0;left:0;display:block;width:var(--space-unit);height:100%;content:\"\"}:host([highlight][variant=\"background\"]) summary::before{border-top-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight][variant=\"background\"]:not([open])) summary::before,:host([highlight][variant=\"background\"][open]) .z-accordion-content::before{border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight]) summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--z-accordion-highlight-color, transparent)}:host([is-disabled][highlight]) summary::before,:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--z-accordion-disabled-label-color)}summary>z-icon{fill:var(--z-accordion-label-color)}:host([is-disabled]) summary>z-icon{fill:var(--z-accordion-disabled-label-color)}.z-accordion-label{color:var(--z-accordion-label-color);font-size:var(--font-size-3);font-weight:var(--z-accordion-label-font-weight)}:host([size=\"x-small\"]) .z-accordion-label{font-size:var(--font-size-2)}:host([size=\"x-small\"]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:16px;--z-icon-height:16px}.z-accordion-tags{display:flex;align-items:center;column-gap:calc(var(--space-unit) / 2)}summary z-icon.z-accordion-chevron{margin-left:auto}.z-accordion-content{position:relative;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);background-color:var(--z-accordion-content-bg);color:var(--z-accordion-content-fg);font-size:var(--font-size-2);}:host(:is([size=\"x-small\"],[size=\"small\"])) .z-accordion-content{padding-bottom:var(--space-unit)}:host([size=\"x-small\"]) .z-accordion-content{font-size:var(--font-size-1)}:host([variant=\"background\"]) .z-accordion-content{padding-right:calc(var(--space-unit) * 2);border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small));border-bottom-right-radius:calc(var(--border-radius) - var(--border-size-small))}:host([is-disabled]) .z-accordion-label{color:var(--z-accordion-disabled-label-color)}:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]){--z-tag-bg:var(--z-accordion-disabled-label-color) !important;--z-tag-text-color:var(--color-text-inverse) !important}@media (hover: hover){summary:focus:focus-visible{position:relative;z-index:1}:host(:not([is-disabled])) summary:hover{background-color:var(--z-accordion-hover-color)}:host(:not([is-disabled])) summary:hover .z-accordion-label{text-decoration:underline}}@media (hover: none){:host([size]) summary{--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit)}:host([size]) .z-accordion-label{font-size:var(--font-size-3)}:host([size]) .z-accordion-content{font-size:var(--font-size-2)}:host([size]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:18px;--z-icon-height:18px}}";
 const ZAccordionStyle0 = stylesCss;
 const ZAccordion$1 = /*@__PURE__*/ proxyCustomElement(class ZAccordion extends HTMLElement {
@@ -19,12 +19,17 @@ const ZAccordion$1 = /*@__PURE__*/ proxyCustomElement(class ZAccordion extends H
         this.highlight = false;
         this.variant = AccordionVariant.DEFAULT;
         this.shadow = true;
+        this.hasSlottedTags = false;
     }
     onDisabledChange() {
         if (this.isDisabled) {
             this.open = false;
         }
     }
+    /** Check if there is any content in the "tag" slot. */
+    checkSlottedTags() {
+        this.hasSlottedTags = !!this.host.querySelector('[slot="tag"]');
+    }
     /**
      * Handle `details` element toggle.
      * If currently disabled, prevent toggling by forcing the `open` state to `false`.
@@ -39,9 +44,13 @@ const ZAccordion$1 = /*@__PURE__*/ proxyCustomElement(class ZAccordion extends H
         this.open = this.detailsElm.open;
         this.toggled.emit(this.open);
     }
+    componentWillLoad() {
+        this.checkSlottedTags();
+    }
     render() {
-        return (h("details", { key: '75f8a546aa49db6a078ee035a359ea512da290a1', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '83cf68bd5d118bb43dce8aed36776bdb6f31df24', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: 'b718c6923a9176504f1c4f05e706938fc44aabe9', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '5db96b4f3f565e6e746fa1d339edb72839900a7e', class: "z-accordion-label" }, this.label), h("span", { key: 'f6b7bc7ce502d25be290af4ac3f257b8f2d88142', class: "z-accordion-tags" }, h("slot", { key: '304b3ac5f1cd58e9e3532e4e47109fb569d7a14a', name: "tag" })), h("z-icon", { key: 'ad373df60eafcabe0f707a74cff5bacdaeccb531', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '3997863313ebf787bdc1ef101fb46ab4ed9fac00', class: "z-accordion-content", part: "content" }, h("slot", { key: '1870a604a2949390f50ef03e5d9f3a407a494023' })))));
+        return (h("details", { key: 'f7e5933db8c37cfe6e39d2ff41a0d1611784e668', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '6109ae145d22b879326c0b6493886e8e93587157', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: 'aa81dc1a116fb11a36e3f3339e02f2206a0b1ce4', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: 'c7473044308125b98ec5df1774023b0bf51170bb', class: "z-accordion-label" }, this.label), this.hasSlottedTags && (h("span", { key: '1f991e11f91086616d7eb03ea6b4fdc8b8e6d424', class: "z-accordion-tags" }, h("slot", { key: '9d38da3a3809a5fbc5484b05f22a53fe4e448e76', name: "tag", onSlotchange: () => this.checkSlottedTags() }))), h("z-icon", { key: '248043a90d91b3fe718314f006aa2b2f32629b2c', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '815910f6f281bfe790576ffe4c179ad01a3b23ae', class: "z-accordion-content", part: "content" }, h("slot", { key: '8b7a54bbec50cc7c6034f184f08307f2697a39f3' })))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "isDisabled": ["onDisabledChange"]
     }; }
@@ -54,7 +63,8 @@ const ZAccordion$1 = /*@__PURE__*/ proxyCustomElement(class ZAccordion extends H
         "open": [1540],
         "highlight": [516],
         "variant": [513],
-        "shadow": [516]
+        "shadow": [516],
+        "hasSlottedTags": [32]
     }, undefined, {
         "isDisabled": ["onDisabledChange"]
     }]);

package/dist/components/z-accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-accordion.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,w7LAAw7L,CAAC;AAC38L,yBAAe,SAAS;;MCuBXA,YAAU;;;;;;;;oBAiBd,WAAW,CAAC,GAAG;0BAMT,KAAK;oBAMX,KAAK;yBAMA,KAAK;uBAMW,gBAAgB,CAAC,OAAO;sBAM3C,IAAI;;IASH,gBAAgB;QACxB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB;KACF;;;;;;IASO,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;YAE7B,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACjC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,gEACE,GAAG,EAAE,CAAC,GAAuB,MAAM,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACzD,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,IAAI,EAAE,IAAI,CAAC,IAAI,IAEf,gEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,IAAI,EACrC,IAAI,EAAC,SAAS,IAEb,IAAI,CAAC,IAAI,KACR,+DACE,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH,EACD,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACnD,6DAAM,KAAK,EAAC,kBAAkB,IAC5B,6DAAM,IAAI,EAAC,KAAK,GAAG,CACd,EACP,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,YAAY,GAAG,cAAc,GAC/C,CACM,EACT,CAAC,IAAI,CAAC,UAAU,KACf,4DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS,IAEd,8DAAQ,CACJ,CACP,CACO,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZAccordion"],"sources":["src/components/z-accordion/styles.css?tag=z-accordion&encapsulation=shadow","src/components/z-accordion/index.tsx"],"sourcesContent":[":host,\n:host ,\n:host ::slotted() {\n box-sizing: border-box;\n}\n\n:host {\n --z-accordion-highlight-color: transparent;\n --z-accordion-bg: var(--color-surface01);\n --z-accordion-label-color: var(--color-default-text);\n --z-accordion-disabled-label-color: var(--color-text03);\n --z-accordion-content-bg: var(--color-surface01);\n --z-accordion-content-fg: var(--color-default-text);\n --z-accordion-hover-color: var(--color-surface02);\n --z-accordion-left-padding: calc(var(--space-unit) * 2);\n --z-accordion-right-padding: var(--space-unit);\n --z-accordion-label-font-weight: var(--font-sb);\n\n display: block;\n border-top: var(--border-size-small) solid var(--color-surface03);\n border-bottom: var(--border-size-small) solid var(--color-surface03);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host([variant=\"background\"]) {\n border: var(--border-size-small) solid var(--color-surface03);\n border-radius: var(--border-radius);\n}\n\n:host([variant=\"background\"][shadow]) {\n box-shadow: var(--shadow-2);\n}\n\ndetails {\n background-color: transparent;\n}\n\nsummary {\n --summary-x-small-height: 32px;\n --summary-small-height: 36px;\n --summary-big-height: 44px;\n --summary-height: var(--summary-big-height);\n --summary-y-padding: var(--space-unit);\n\n position: relative;\n display: flex;\n min-height: var(--summary-height);\n align-items: center;\n padding: var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)\n var(--z-accordion-left-padding);\n background-color: var(--z-accordion-bg);\n column-gap: var(--space-unit);\n cursor: pointer;\n list-style: none;\n}\n\n/* remove marker on safari /\nsummary::-webkit-details-marker {\n display: none;\n}\n\n:host([size=\"x-small\"]) summary {\n --summary-height: var(--summary-x-small-height);\n}\n\n:host([size=\"small\"]) summary {\n --summary-height: var(--summary-small-height);\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) summary {\n --summary-y-padding: calc(var(--space-unit) / 2);\n}\n\n:host([variant=\"background\"]) summary {\n padding-right: calc(var(--space-unit) 2);\n\n /* border-radius of the accordion - width of the accordion's border /\n border-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([variant=\"background\"][open]) summary {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n:host([is-disabled]) summary {\n cursor: default;\n}\n\nsummary:focus:focus-visible {\n background-color: var(--z-accordion-hover-color);\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\nsummary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n width: var(--space-unit);\n height: 100%;\n content: \"\";\n}\n\n:host([highlight][variant=\"background\"]) summary::before {\n / border-radius of the accordion - width of the accordion's border /\n border-top-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight][variant=\"background\"]:not([open])) summary::before,\n:host([highlight][variant=\"background\"][open]) .z-accordion-content::before {\n / border-radius of the accordion - width of the accordion's border /\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight]) summary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n background-color: var(--z-accordion-highlight-color, transparent);\n}\n\n:host([is-disabled][highlight]) summary::before,\n:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before {\n background-color: var(--z-accordion-disabled-label-color);\n}\n\nsummary > z-icon {\n fill: var(--z-accordion-label-color);\n}\n\n:host([is-disabled]) summary > z-icon {\n fill: var(--z-accordion-disabled-label-color);\n}\n\n.z-accordion-label {\n color: var(--z-accordion-label-color);\n font-size: var(--font-size-3); / for \"small\" and \"big\" sizes /\n font-weight: var(--z-accordion-label-font-weight);\n}\n\n:host([size=\"x-small\"]) .z-accordion-label {\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n.z-accordion-tags {\n display: flex;\n align-items: center;\n column-gap: calc(var(--space-unit) / 2);\n}\n\nsummary z-icon.z-accordion-chevron {\n margin-left: auto;\n}\n\n.z-accordion-content {\n position: relative;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) 2) calc(var(--space-unit) * 2);\n background-color: var(--z-accordion-content-bg);\n color: var(--z-accordion-content-fg);\n font-size: var(--font-size-2); /* for \"small\" and \"big\" sizes /\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) .z-accordion-content {\n padding-bottom: var(--space-unit);\n}\n\n:host([size=\"x-small\"]) .z-accordion-content {\n font-size: var(--font-size-1);\n}\n\n:host([variant=\"background\"]) .z-accordion-content {\n padding-right: calc(var(--space-unit) 2);\n}\n\n:host([is-disabled]) .z-accordion-label {\n color: var(--z-accordion-disabled-label-color);\n}\n\n:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]) {\n --z-tag-bg: var(--z-accordion-disabled-label-color) !important;\n --z-tag-text-color: var(--color-text-inverse) !important;\n}\n\n@media (hover: hover) {\n summary:focus:focus-visible {\n /* prevents the focus shadow to be covered by the background of an hovered sibling accordion /\n position: relative;\n z-index: 1;\n }\n\n :host(:not([is-disabled])) summary:hover {\n background-color: var(--z-accordion-hover-color);\n }\n\n :host(:not([is-disabled])) summary:hover .z-accordion-label {\n text-decoration: underline;\n }\n}\n\n/ force \"big\" variant on touch devices /\n@media (hover: none) {\n :host([size]) summary {\n --summary-height: var(--summary-big-height);\n --summary-y-padding: var(--space-unit);\n }\n\n :host([size]) .z-accordion-label {\n font-size: var(--font-size-3);\n }\n\n :host([size]) .z-accordion-content {\n font-size: var(--font-size-2);\n }\n\n :host([size]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n --z-icon-width: 18px;\n --z-icon-height: 18px;\n }\n}\n\n/ Style for sibling accordions in a stack context /\n\nz-accordion + z-accordion {\n border-top: none;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"] {\n border-radius: 0;\n}\n\nz-accordion[variant=\"background\"]:first-of-type:not(:last-of-type) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"]:last-of-type {\n border-bottom-left-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n}\n\nz-accordion[variant=\"background\"]:first-of-type:not(:last-of-type)::part(summary) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"]::part(summary) {\n border-radius: 0;\n}\n\nz-accordion[variant=\"background\"] + z-accordion[variant=\"background\"]:last-of-type:not([open])::part(summary) {\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n","import {Component, Event, EventEmitter, Prop, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/\n Accordion component.\n \n @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.\n * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.\n * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.\n * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.\n * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.\n * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.\n * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.\n * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.\n * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.\n /\n@Component({\n tag: \"z-accordion\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAccordion {\n /\n Text label.\n /\n @Prop()\n label: string;\n\n /\n Name of the z-icon to display before the label's text.\n /\n @Prop()\n icon: string;\n\n /\n Size of the component.\n /\n @Prop({reflect: true})\n size = ControlSize.BIG;\n\n /\n Disabled state of the accordion.\n /\n @Prop({reflect: true})\n isDisabled = false;\n\n /\n The open state of the accordion.\n /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n Enable highlight band on the `summary`'s left edge.\n /\n @Prop({reflect: true})\n highlight = false;\n\n /\n Accordion variant.\n /\n @Prop({reflect: true})\n variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n /\n Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n /\n @Prop({reflect: true})\n shadow = true;\n\n /\n Event fired when the accordion is toggled.\n /\n @Event()\n toggled: EventEmitter<boolean>;\n\n @Watch(\"isDisabled\")\n protected onDisabledChange(): void {\n if (this.isDisabled) {\n this.open = false;\n }\n }\n\n private detailsElm: HTMLDetailsElement;\n\n /\n Handle `details` element toggle.\n * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n */\n private onDetailsToggle(): void {\n if (this.isDisabled) {\n this.open = false;\n this.detailsElm.open = false;\n\n return;\n }\n\n this.open = this.detailsElm.open;\n this.toggled.emit(this.open);\n }\n\n render(): HTMLDetailsElement {\n return (\n <details\n ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n onToggle={this.onDetailsToggle.bind(this)}\n open={this.open}\n >\n <summary\n tabIndex={this.isDisabled ? -1 : null}\n part=\"summary\"\n >\n {this.icon && (\n <z-icon\n class=\"z-accordion-label-icon\"\n name={this.icon}\n />\n )}\n <span class=\"z-accordion-label\">{this.label}</span>\n <span class=\"z-accordion-tags\">\n <slot name=\"tag\" />\n </span>\n <z-icon\n class=\"z-accordion-chevron\"\n name={this.open ? \"chevron-up\" : \"chevron-down\"}\n />\n </summary>\n {!this.isDisabled && (\n <div\n class=\"z-accordion-content\"\n part=\"content\"\n >\n <slot />\n </div>\n )}\n </details>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-accordion.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,kqKAAkqK,CAAC;AACrrK,yBAAe,SAAS;;MCuBXA,YAAU;;;;;;;;oBAmBd,WAAW,CAAC,GAAG;0BAMT,KAAK;oBAMX,KAAK;yBAMA,KAAK;uBAMW,gBAAgB,CAAC,OAAO;sBAM3C,IAAI;8BAGY,KAAK;;IASpB,gBAAgB;QACxB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB;KACF;;IAKO,gBAAgB;QACtB,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;KACjE;;;;;;IAOO,eAAe;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;YAE7B,OAAO;SACR;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACjC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,MAAM;QACJ,QACE,gEACE,GAAG,EAAE,CAAC,GAAuB,MAAM,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACzD,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,IAAI,EAAE,IAAI,CAAC,IAAI,IAEf,gEACE,QAAQ,EAAE,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,IAAI,EACrC,IAAI,EAAC,SAAS,IAEb,IAAI,CAAC,IAAI,KACR,+DACE,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH,EACD,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ,EAClD,IAAI,CAAC,cAAc,KAClB,6DAAM,KAAK,EAAC,kBAAkB,IAC5B,6DACE,IAAI,EAAC,KAAK,EACV,YAAY,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,GAC3C,CACG,CACR,EACD,+DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,YAAY,GAAG,cAAc,GAC/C,CACM,EACT,CAAC,IAAI,CAAC,UAAU,KACf,4DACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS,IAEd,8DAAQ,CACJ,CACP,CACO,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZAccordion"],"sources":["src/components/z-accordion/styles.css?tag=z-accordion&encapsulation=shadow","src/components/z-accordion/index.tsx"],"sourcesContent":[":host,\n:host ,\n:host ::slotted() {\n box-sizing: border-box;\n}\n\n:host {\n --z-accordion-highlight-color: transparent;\n --z-accordion-bg: var(--color-surface01);\n --z-accordion-label-color: var(--color-default-text);\n --z-accordion-disabled-label-color: var(--color-text03);\n --z-accordion-content-bg: var(--color-surface01);\n --z-accordion-content-fg: var(--color-default-text);\n --z-accordion-hover-color: var(--color-surface02);\n --z-accordion-left-padding: calc(var(--space-unit) * 2);\n --z-accordion-right-padding: var(--space-unit);\n --z-accordion-label-font-weight: var(--font-sb);\n\n display: block;\n border-top: var(--border-size-small) solid var(--color-surface03);\n border-bottom: var(--border-size-small) solid var(--color-surface03);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host([variant=\"background\"]) {\n border: var(--border-size-small) solid var(--color-surface03);\n border-radius: var(--border-radius);\n}\n\n:host([variant=\"background\"][shadow]) {\n box-shadow: var(--shadow-2);\n}\n\ndetails {\n background-color: transparent;\n}\n\nsummary {\n --summary-x-small-height: 32px;\n --summary-small-height: 36px;\n --summary-big-height: 44px;\n --summary-height: var(--summary-big-height);\n --summary-y-padding: var(--space-unit);\n\n position: relative;\n display: flex;\n min-height: var(--summary-height);\n align-items: center;\n padding: var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)\n var(--z-accordion-left-padding);\n background-color: var(--z-accordion-bg);\n column-gap: var(--space-unit);\n cursor: pointer;\n list-style: none;\n}\n\n/* remove marker on safari /\nsummary::-webkit-details-marker {\n display: none;\n}\n\n:host([size=\"x-small\"]) summary {\n --summary-height: var(--summary-x-small-height);\n}\n\n:host([size=\"small\"]) summary {\n --summary-height: var(--summary-small-height);\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) summary {\n --summary-y-padding: calc(var(--space-unit) / 2);\n}\n\n:host([variant=\"background\"]) summary {\n padding-right: calc(var(--space-unit) 2);\n\n /* border-radius of the accordion - width of the accordion's border /\n border-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([variant=\"background\"][open]) summary {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n:host([is-disabled]) summary {\n cursor: default;\n}\n\nsummary:focus:focus-visible {\n background-color: var(--z-accordion-hover-color);\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\nsummary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n width: var(--space-unit);\n height: 100%;\n content: \"\";\n}\n\n:host([highlight][variant=\"background\"]) summary::before {\n / border-radius of the accordion - width of the accordion's border /\n border-top-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight][variant=\"background\"]:not([open])) summary::before,\n:host([highlight][variant=\"background\"][open]) .z-accordion-content::before {\n / border-radius of the accordion - width of the accordion's border /\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight]) summary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n background-color: var(--z-accordion-highlight-color, transparent);\n}\n\n:host([is-disabled][highlight]) summary::before,\n:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before {\n background-color: var(--z-accordion-disabled-label-color);\n}\n\nsummary > z-icon {\n fill: var(--z-accordion-label-color);\n}\n\n:host([is-disabled]) summary > z-icon {\n fill: var(--z-accordion-disabled-label-color);\n}\n\n.z-accordion-label {\n color: var(--z-accordion-label-color);\n font-size: var(--font-size-3); / for \"small\" and \"big\" sizes /\n font-weight: var(--z-accordion-label-font-weight);\n}\n\n:host([size=\"x-small\"]) .z-accordion-label {\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n.z-accordion-tags {\n display: flex;\n align-items: center;\n column-gap: calc(var(--space-unit) / 2);\n}\n\nsummary z-icon.z-accordion-chevron {\n margin-left: auto;\n}\n\n.z-accordion-content {\n position: relative;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) 2) calc(var(--space-unit) * 2);\n background-color: var(--z-accordion-content-bg);\n color: var(--z-accordion-content-fg);\n font-size: var(--font-size-2); /* for \"small\" and \"big\" sizes /\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) .z-accordion-content {\n padding-bottom: var(--space-unit);\n}\n\n:host([size=\"x-small\"]) .z-accordion-content {\n font-size: var(--font-size-1);\n}\n\n:host([variant=\"background\"]) .z-accordion-content {\n padding-right: calc(var(--space-unit) 2);\n border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([is-disabled]) .z-accordion-label {\n color: var(--z-accordion-disabled-label-color);\n}\n\n:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]) {\n --z-tag-bg: var(--z-accordion-disabled-label-color) !important;\n --z-tag-text-color: var(--color-text-inverse) !important;\n}\n\n@media (hover: hover) {\n summary:focus:focus-visible {\n /* prevents the focus shadow to be covered by the background of an hovered sibling accordion /\n position: relative;\n z-index: 1;\n }\n\n :host(:not([is-disabled])) summary:hover {\n background-color: var(--z-accordion-hover-color);\n }\n\n :host(:not([is-disabled])) summary:hover .z-accordion-label {\n text-decoration: underline;\n }\n}\n\n/ force \"big\" variant on touch devices /\n@media (hover: none) {\n :host([size]) summary {\n --summary-height: var(--summary-big-height);\n --summary-y-padding: var(--space-unit);\n }\n\n :host([size]) .z-accordion-label {\n font-size: var(--font-size-3);\n }\n\n :host([size]) .z-accordion-content {\n font-size: var(--font-size-2);\n }\n\n :host([size]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n --z-icon-width: 18px;\n --z-icon-height: 18px;\n }\n}\n","import {Component, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/\n Accordion component.\n \n @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.\n * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.\n * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.\n * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.\n * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.\n * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.\n * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.\n * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.\n * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.\n /\n@Component({\n tag: \"z-accordion\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAccordion {\n @Element() host: HTMLZAccordionElement;\n\n /\n Text label.\n /\n @Prop()\n label: string;\n\n /\n Name of the z-icon to display before the label's text.\n /\n @Prop()\n icon: string;\n\n /\n Size of the component.\n /\n @Prop({reflect: true})\n size = ControlSize.BIG;\n\n /\n Disabled state of the accordion.\n /\n @Prop({reflect: true})\n isDisabled = false;\n\n /\n The open state of the accordion.\n /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n Enable highlight band on the `summary`'s left edge.\n /\n @Prop({reflect: true})\n highlight = false;\n\n /\n Accordion variant.\n /\n @Prop({reflect: true})\n variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n /\n Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n /\n @Prop({reflect: true})\n shadow = true;\n\n @State()\n private hasSlottedTags = false;\n\n /\n Event fired when the accordion is toggled.\n /\n @Event()\n toggled: EventEmitter<boolean>;\n\n @Watch(\"isDisabled\")\n protected onDisabledChange(): void {\n if (this.isDisabled) {\n this.open = false;\n }\n }\n\n private detailsElm: HTMLDetailsElement;\n\n /* Check if there is any content in the \"tag\" slot. /\n private checkSlottedTags(): void {\n this.hasSlottedTags = !!this.host.querySelector('[slot=\"tag\"]');\n }\n\n /\n Handle `details` element toggle.\n * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n */\n private onDetailsToggle(): void {\n if (this.isDisabled) {\n this.open = false;\n this.detailsElm.open = false;\n\n return;\n }\n\n this.open = this.detailsElm.open;\n this.toggled.emit(this.open);\n }\n\n componentWillLoad(): void {\n this.checkSlottedTags();\n }\n\n render(): HTMLDetailsElement {\n return (\n <details\n ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n onToggle={this.onDetailsToggle.bind(this)}\n open={this.open}\n >\n <summary\n tabIndex={this.isDisabled ? -1 : null}\n part=\"summary\"\n >\n {this.icon && (\n <z-icon\n class=\"z-accordion-label-icon\"\n name={this.icon}\n />\n )}\n <span class=\"z-accordion-label\">{this.label}</span>\n {this.hasSlottedTags && (\n <span class=\"z-accordion-tags\">\n <slot\n name=\"tag\"\n onSlotchange={() => this.checkSlottedTags()}\n />\n </span>\n )}\n <z-icon\n class=\"z-accordion-chevron\"\n name={this.open ? \"chevron-up\" : \"chevron-down\"}\n />\n </summary>\n {!this.isDisabled && (\n <div\n class=\"z-accordion-content\"\n part=\"content\"\n >\n <slot />\n </div>\n )}\n </details>\n );\n }\n}\n"],"version":3}

package/dist/components/z-anchor-navigation.js CHANGED Viewed

@@ -44,7 +44,7 @@ const ZAnchorNavigation$1 = /*@__PURE__*/ proxyCustomElement(class ZAnchorNaviga
         window.removeEventListener("hashchange", this.setCurrent);
     }
     render() {
-        return (h(Host, { key: '91fa327dc685a23f2f645feb80957eab8ce2a486', collapsed: this.collapsed, class: "z-scrollbar" }, h("z-button", { key: '3455aa67a11adaa0cb0f8571997a0a118ded5635', class: "toggle", size: ControlSize.SMALL, variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, this.collapsedLabel), h("nav", { key: '3e7ee00cbb6b5c3e353738c68d41c0392ce41ec0', ref: (el) => (this.nav = el) }, h("slot", { key: '35b61d7535025bd4daa6981bfbac5d249bfc59eb' }))));
+        return (h(Host, { key: 'd019c9a42fbdf7987ad2115fac3803e35e2c838a', collapsed: this.collapsed, class: "z-scrollbar" }, h("z-button", { key: 'cca133f6627d30ef523923dd288c351fe73a37d8', class: "toggle", size: ControlSize.SMALL, variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, this.collapsedLabel), h("nav", { key: 'ae497ef7b0c4a54445aadadf90c5e2e0119a2d11', ref: (el) => (this.nav = el) }, h("slot", { key: 'b0aad81924302ff9b73ac6a8fceaa07a7aefac13' }))));
     }
     get host() { return this; }
     static get style() { return ZAnchorNavigationStyle0; }

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

@@ -151,7 +151,7 @@ const ZAppHeaderDeprecated$1 = /*@__PURE__*/ proxyCustomElement(class ZAppHeader
         this.evaluateViewport();
     }
     render() {
-        return (h(Host, { key: '1c345c1bfece133ca47e12f08f3707e92a9a3650', "menu-length": this.menuLength }, this.hasHero && (h("div", { key: 'ec380161c53681ed14d817bcc85c1b5ebcc7d2b9', class: "hero-container" }, h("slot", { key: '3e3f0c1a591eb0fc24cc7ec3ebde8829920920b4', name: "hero" }, this.hero && (h("img", { key: '0ac5d15f851943796fe57a89c5161b45254f7897', alt: "", src: this.hero }))))), h("div", { key: '1bc128eff8bfee60e0fbac28a43ef241568a3421', class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { key: '982a82c94a98bc00e4fd540cf94c4c425038d9c0', class: "heading-container" }, h("div", { key: '786634064010c20967b687a8567fbb82aaf5f126', class: "heading-subtitle" }, h("slot", { key: '792f28fea8a7661420d73677f9a4cfb618886110', name: "top-subtitle" })), h("div", { key: 'eb3eafd4e36b218a617c1802c3e6a0563aba75e3', class: "heading-title" }, this.menuLength > 0 && (h("button", { key: 'f66165640eb1f3e640498f4231b02429a9833ce9', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: '15a01b76828bb7d64c889a68f5077655910d8583', name: "burger-menu" }))), h("slot", { key: '9e1038f99339df83e82a63aede899e8ff9aa3725', name: "title" }), this.renderSearchLinkButton()), h("div", { key: '72726562d475b5f4edf19b6b88a89ef9ea1518b3', class: "heading-subtitle" }, h("slot", { key: '0206b4d6da11862121b9cac5a6e87ffccd822089', name: "subtitle" }))), (this.canShowMenu || this.canShowSearchbar) && (h("div", { key: '8c09854d5db8b1af53559ee77adc18c5e9e21836', class: "menu-container" }, this.canShowMenu && (h("slot", { key: '873b577cabe6b6e37c9a00f15ae8da2cdb6dec61', name: "menu", onSlotchange: this.collectMenuElements })), this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== "desktop")))), h("z-offcanvas", { key: '8cea6d5468f2553434242881817309dbf12601b3', variant: OffCanvasVariant.OVERLAY, transitiondirection: TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, h("button", { key: '3be458375ddaa738d40cb41f93a07616952debc2', class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, h("z-icon", { key: 'c14c99a56f4083af6c334a74f613f1a44406ad23', name: "close" })), h("div", { key: 'd52312a4e74258d446564f606c0cf868d9dfac7d', class: "drawer-content", slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}` }, h("slot", { key: 'd3eebb48c21c2269e45eb686c116c22859bfab19', name: "menu", onSlotchange: this.collectMenuElements }))), this._stuck && (h("div", { key: 'c005b81f7f6567005b82c03abc66a89cf6a5d731', class: "heading-stuck" }, h("div", { key: '18ea0f8aaed6543744c829baa726e3d17fe4cc1a', class: "heading-stuck-content" }, this.menuLength > 0 && (h("button", { key: '32df9acac12f1b9f778236f36f9b4dca5f950907', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: 'c6835bbf121417630f5fcddc825258c4f07c6412', name: "burger-menu" }))), h("div", { key: 'a0f631f812478aea4ea6c33088ce8128531d4c5f', class: "heading-title" }, h("slot", { key: '206733fd6de7eed0f1333a221880e046fdf4282d', name: "stucked-title" }, this.title)), this.renderSearchLinkButton(), this.canShowSearchbar && this.currentViewport === "desktop" && this.renderSeachbar(false))))));
+        return (h(Host, { key: '25fe02e7c173bc1adeaa335baebd934f7c4bf3c2', "menu-length": this.menuLength }, this.hasHero && (h("div", { key: 'fbe86c970aa8a60b4fd2e81e760ce06fcb18b26d', class: "hero-container" }, h("slot", { key: '79746c04d0b3ae7685ee6b0a863f96125f392a84', name: "hero" }, this.hero && (h("img", { key: '700565a8349a4043b4783b3dfec512575eb464be', alt: "", src: this.hero }))))), h("div", { key: 'd103eb1d00f36e3187d3bf04289bc4f8fbec7fac', class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { key: '88eba7aa608db3f4283a3191755864b262ccf579', class: "heading-container" }, h("div", { key: '43b4b555901fbb93f4976910a8e99227dbd06e9d', class: "heading-subtitle" }, h("slot", { key: '84e3d84916956bf7f6867e6f999260bcec1dc946', name: "top-subtitle" })), h("div", { key: '5d308d910f1e28d7ce365940d3ddfa431e708ff6', class: "heading-title" }, this.menuLength > 0 && (h("button", { key: '862f94284926a7b4cb4373b3fbad853c5c9a16bc', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: '90a10f0a603f871b18345bf74e353a515b6d4363', name: "burger-menu" }))), h("slot", { key: '9e70498e1e96b169cec959ca6ec5e9b7fab1551b', name: "title" }), this.renderSearchLinkButton()), h("div", { key: '0590c5e8294bc79413407d263bec7c19078aad37', class: "heading-subtitle" }, h("slot", { key: 'fbd4c13f1985880c18c9151c0d4f62bc0b2644e2', name: "subtitle" }))), (this.canShowMenu || this.canShowSearchbar) && (h("div", { key: '8cc2760c853cead3287d590fd64d3f457186a7c7', class: "menu-container" }, this.canShowMenu && (h("slot", { key: '3e1f6491146ac3cd5e02f19441a3e3d5a8d1629d', name: "menu", onSlotchange: this.collectMenuElements })), this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== "desktop")))), h("z-offcanvas", { key: 'a977d6a6c9b3e8e834feb12235aad8be96c7aa03', variant: OffCanvasVariant.OVERLAY, transitiondirection: TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, h("button", { key: 'c5facf8597fd819423a758c6f94e33c64b2d41a7', class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, h("z-icon", { key: '85a5abd2083f7a809d49a21ae06c0d3f1ed4d3d6', name: "close" })), h("div", { key: '50d3e7ac3baa10ea9d1cb79be85cfa6af0d3a7d6', class: "drawer-content", slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}` }, h("slot", { key: '266739e07b977831229868f237e561c03d058032', name: "menu", onSlotchange: this.collectMenuElements }))), this._stuck && (h("div", { key: '959bd1fddd4e9c49890405b9b271bd27e5b4a67c', class: "heading-stuck" }, h("div", { key: '5700bc77fe1d1954e991f1bbcb930c8ad0b04ce5', class: "heading-stuck-content" }, this.menuLength > 0 && (h("button", { key: '51bf250e500094c18aef6fdcbed7d756af8ff1f3', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: 'abb77685d48e7c1e8476624199dd8b18140dca4f', name: "burger-menu" }))), h("div", { key: '69d94fe26925443e3348e8c5752bd474c0436d7c', class: "heading-title" }, h("slot", { key: 'ff00ee0b2de8bb8cd9f96dd42b20f4ecd2030828', name: "stucked-title" }, this.title)), this.renderSearchLinkButton(), this.canShowSearchbar && this.currentViewport === "desktop" && this.renderSeachbar(false))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -14,7 +14,7 @@ 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}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 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";
@@ -263,7 +263,7 @@ const ZAppHeader$1 = /*@__PURE__*/ proxyCustomElement(class ZAppHeader extends H
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: 'a0bd0524157668d1ed6132f581596e91feef9c37', "menu-length": this.menuLength }, h("div", { key: 'a91c0c19ea534e7707dff0700fc3da571c3ff440', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: 'b19a7bbbc84d0fe7a516b0bdfb191572162ec79c', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '5769e4b6a5aaef8d99133268e8dba7769cdad8ed', class: "top-subtitle" }, h("slot", { key: '9f5979f6a544049f53dd07a59c7524192aaef936', name: "top-subtitle" }))), h("div", { key: '4a3a22a01bbe11e460ef6f72b4eed08e17743013', class: "heading-title" }, h("slot", { key: '6cd7e4dbfdaddb8a2716e8168fc1bba4121c4291', name: "menu-button" }, this.renderMenuButton()), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: '7401663bd3b0cd3fe228789ca856e002a04d3581', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '685e52ce6b58cd839c34d7e5ab69c775604853e0', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '9b5d50462dcc1c2fde87c9ee7a7ba62d96b6c252', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '9965ec165c2e2f20e96a70f121856bf7382e1ecb', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        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 {

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

	@@ -1 +1 @@
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 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\">\n {((!this.enableSearch && this.isMobile) \|\| !this.isMobile) && (\n <div class=\"top-subtitle\">\n <slot name=\"top-subtitle\" />\n </div>\n )}\n <div class=\"heading-title\">\n <slot name=\"menu-button\">{this.renderMenuButton()}</slot>\n {!hasTopSubtitle && !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}
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}

package/dist/components/z-aria-alert.js CHANGED Viewed

@@ -8,7 +8,7 @@ const ZAriaAlert$1 = /*@__PURE__*/ proxyCustomElement(class ZAriaAlert extends H
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: '693653c1398e02b138174066573558fac0d35ba2', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '4dd3b545e9ae838a0fd8ce56b0c37f68a013d199' })));
+        return (h(Host, { key: '507fd85bea3bc6cdfa0915afaf57866e29cc36e3', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: 'b28a7129f907a00beb9e5aa186f2960d7d6c4d1d' })));
     }
 }, [4, "z-aria-alert", {
         "mode": [1]

package/dist/components/z-avatar.js CHANGED Viewed

@@ -31,10 +31,10 @@ const ZAvatar$1 = /*@__PURE__*/ proxyCustomElement(class ZAvatar extends HTMLEle
         }
     }
     render() {
-        return (h(Host, { key: 'c9fa1bc24b529c058fe1bfa8f8b2f60ca8feccad', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (h(Host, { key: '8ce8c6ffe56b55036f9f47146041fcb91051ad36', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
                 color: `var(--${this.textColor})`,
                 backgroundColor: `var(--${this.backgroundColor})`,
-            } }, this.text && !this.image && h("span", { key: '7815e5074a69ed166710241d778c7bf12658a5f4' }, this.text.substring(0, 2)), this.image && (h("img", { key: 'e998f6c8b5686488f23d627e13bf3f7b125917b6', src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && h("span", { key: 'b989378860518c05074dcf3cf445df062679f3c1' }, this.text.substring(0, 2)), this.image && (h("img", { key: '56a3a248fe3f88b2ed285f6a7c133b542ca21940', src: this.image, onError: () => (this.image = "") }))));
     }
     static get style() { return ZAvatarStyle0; }
 }, [1, "z-avatar", {

package/dist/components/z-book-card-app.js CHANGED Viewed

@@ -34,7 +34,7 @@ const ZBookCardApp$1 = /*@__PURE__*/ proxyCustomElement(class ZBookCardApp exten
         return null;
     }
     render() {
-        return (h("div", { key: 'a6e90497110df5b731c4b71ab7c0c377fc3c5532' }, h("a", { key: '50ba4a41e2f0bd50b78989b60e8f1a4dfe68ef2c', class: "app z-link", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick(), target: "_blank" }, this.logo && (h("img", { key: '4c743902416ff0d2822ba9f8689bcf0eceb87b44', src: this.logo, alt: "" })), h("div", { key: 'c0e84f7a7d964c7bf6c437338ed074c2e02b1112', class: "name body-4-sb" }, this.renderLaz(), this.name)), this.info && (h("z-info-reveal", { key: '722c3d99a3865573528739b9ed51b7bfd0a425d6', icon: "info", size: ControlSize.X_SMALL, position: InfoRevealPosition.TOP_RIGHT, class: "info body-5" }, h("div", { key: '14a00ee6607d044a04054fc2cdffafe8f76098a2' }, this.info))), h("a", { key: 'd145887f5110de5c654833a1b4f9bdf3a99a6fef', class: "z-link z-link-icon", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick(), target: "_blank" }, h("z-icon", { key: 'bf032d04ef2a5cfbfbe66133b3b9598df3d3a6c3', name: "chevron-right", fill: "color-primary01-icon" }))));
+        return (h("div", { key: '5ef854f5cb70ed3e3750e32e6469ace8e2773e42' }, h("a", { key: 'df49cbb9f602561cabdc8175a3b17c813c27bc64', class: "app z-link", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick(), target: "_blank" }, this.logo && (h("img", { key: 'c4075fe5cfae3b00942adfbf27c46721c8e631a7', src: this.logo, alt: "" })), h("div", { key: 'cb4385fe88fe47b4d76f30a801db8372932454fc', class: "name body-4-sb" }, this.renderLaz(), this.name)), this.info && (h("z-info-reveal", { key: '4b4d80bdcf33594ccd4855009fc81fc7cb7d86be', icon: "info", size: ControlSize.X_SMALL, position: InfoRevealPosition.TOP_RIGHT, class: "info body-5" }, h("div", { key: '89796ca522db7490e228c3857b76bf66eb0fe5ba' }, this.info))), h("a", { key: 'cc88826351021ba4f83a7cdec0df4b3e0e810168', class: "z-link z-link-icon", href: this.link, "aria-label": `vai a ${this.laz ? "laz" : ""} ${this.name}`, onClick: () => this.emitAppClick(), target: "_blank" }, h("z-icon", { key: '3eb419c96a67fe00b9f0410b8579323d3f9edf67', name: "chevron-right", fill: "color-primary01-icon" }))));
     }
     get hostElement() { return this; }
     static get style() { return ZBookCardAppStyle0 + (ZBookCardAppStyle1 + ZBookCardAppStyle2); }

package/dist/components/z-book-card-deprecated.js CHANGED Viewed

@@ -123,7 +123,7 @@ const ZBookCardDeprecated$1 = /*@__PURE__*/ proxyCustomElement(class ZBookCardDe
         return (h("div", { class: "action-container" }, h("slot", { name: "footer-cta" })));
     }
     render() {
-        return (h("article", { key: '237f8f14bccc2e44371b1a9f4cb08904802f1d2d', class: {
+        return (h("article", { key: '46b384be19cd2de4a07ca7962f4559af73f3b2ef', class: {
                 [this.variant]: true,
                 borderless: !!this.borderless,
             } }, this.renderCard()));

package/dist/components/z-breadcrumb.js CHANGED Viewed

@@ -213,10 +213,10 @@ const ZBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class ZBreadcrumb extends
         ];
     }
     render() {
-        return (h(Host, { key: 'dfdce7063e125f7f2a04be854aa0104f3b5f8c97', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '4cab944188a1a308715f46d2d8d996c69219f6f2', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: 'd1237ebe6e8f96e4b43f4197a85c0084050f076d', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '03fb62eefc39de3f78890d857ae23fb4f4a3307f', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: '1c549b867f77a75eb67a5ed35f389a98761ae70d' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: 'bccdd02377c6bb41f54baf717c987fcef541d95a' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     get hostElement() { return this; }
     static get watchers() { return {