npm - @zanichelli/albe-web-components - Versions diffs - 16.3.0 → 16.3.1-rc1 - Mend

@zanichelli/albe-web-components 16.3.0 → 16.3.1-rc1

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

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

	@@ -1 +1 @@
1	- {"file":"z-menu.js","mappings":"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","names":["ZMenu"],"sources":["src/components/z-menu/styles.css?tag=z-menu&encapsulation=shadow","src/components/z-menu/index.tsx"],"sourcesContent":[":host,\n::slotted(),\n {\n box-sizing: border-box;\n outline: none;\n}\n\n:host {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n flex-shrink: 0;\n\n --z-menu-label-color: var(--color-default-text);\n}\n\n::slotted(a) {\n text-decoration: none;\n}\n\n::slotted() {\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n.menu-label {\n width: 100%;\n padding: 0;\n border: 0;\n margin: 0;\n background: transparent;\n border-radius: 0;\n color: inherit;\n outline: none;\n text-align: left;\n}\n\n.menu-wrapper {\n display: flex;\n align-items: center;\n}\n\n.menu-wrapper:focus-visible,\n.menu-label-content:focus-visible,\nbutton:focus-visible {\n outline: none;\n}\n\nbutton.menu-label {\n cursor: pointer;\n}\n\n.menu-label:focus-within {\n z-index: 1;\n box-shadow: var(--shadow-focus-primary);\n}\n\n.menu-label .menu-label-content {\n position: relative;\n display: flex;\n height: 30px;\n align-items: center;\n}\n\n:host(:is([active], [open])) .menu-label-content,\n.menu-label:focus-within .menu-label-content {\n color: var(--color-primary01);\n font-weight: var(--font-bd);\n}\n\n:host(:is([active], [open])) .menu-label-content ::slotted(),\n.menu-label:focus-within .menu-label-content ::slotted(),\n.menu-label:focus-within .menu-label-content z-icon {\n color: var(--color-primary01);\n letter-spacing: normal;\n}\n\n:host .menu-label .menu-label-content ::slotted(:not([slot]):focus:focus-visible) {\n box-shadow: none !important;\n}\n\n/* border /\n:host(:is([active], [open], [vertical-context])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n content: \"\";\n pointer-events: none;\n}\n\n:host([vertical-context]) .menu-label-content::after {\n height: var(--border-size-small);\n background-color: var(--color-surface03);\n}\n\n:host(:is([active], [open])) .menu-label .menu-label-content::after,\n.menu-label .menu-label-content:hover::after,\n.menu-label:focus-within .menu-label-content::after {\n height: var(--border-size-large);\n background-color: var(--color-secondary01);\n}\n\n/ Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. /\n::slotted([data-text])::after {\n height: 0;\n content: attr(data-text);\n content: attr(data-text) / \"\";\n font-weight: var(--font-bd);\n letter-spacing: normal;\n pointer-events: none;\n user-select: none;\n visibility: hidden;\n}\n\n@media speech {\n ::slotted([data-text])::after {\n display: none;\n }\n}\n\n::slotted([data-text]) {\n display: inline-flex;\n flex-direction: column;\n}\n\n.menu-label .menu-label-content ::slotted() {\n display: inline-flex;\n width: 100%;\n min-width: fit-content;\n margin: 0;\n appearance: none;\n color: var(--z-menu-label-color);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-3);\n font-weight: inherit;\n outline: none;\n}\n\n.menu-label .menu-label-content ::slotted(),\n.menu-label .menu-label-content z-icon {\n padding: var(--space-unit) 0;\n}\n\n.menu-label .menu-label-content z-icon {\n margin-left: calc(var(--space-unit) 1.5);\n fill: currentcolor;\n}\n\n.content {\n background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n display: none;\n}\n\n:host([floating]) .content {\n position: absolute;\n top: 100%;\n left: 0;\n width: 375px;\n min-width: 100%;\n max-width: 100vw;\n padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2);\n box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n width: 100%;\n}\n\n.header {\n display: flex;\n align-items: center;\n padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n width: calc(var(--space-unit) * 11.25);\n height: auto;\n object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n margin: auto 0;\n margin-left: calc(var(--space-unit) * 2.5);\n font-size: var(--font-size-3);\n font-weight: var(--font-sb);\n line-height: 1.5;\n}\n\n.items {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n width: 100%;\n margin: 0;\n font-size: var(--font-size-3);\n line-height: 1.25;\n outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n border-bottom: var(--border-size-small) solid var(--color-surface05);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active) {\n border-color: var(--color-secondary01);\n font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\n\n/*\n @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n /\n@Component({\n tag: \"z-menu\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMenu {\n @Element() hostElement: HTMLZMenuElement;\n\n /* Flag to set the active status of the menu. /\n @Prop({reflect: true})\n active?: boolean;\n\n /\n Flag to set the display mode of the list.\n * If true, the list will be absolutely positioned under the menu label,\n * stacked beneath it otherwise.\n /\n @Prop({reflect: true})\n floating? = true;\n\n /* The opening state of the menu. /\n @Prop({mutable: true, reflect: true})\n open = false;\n\n /\n Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).\n * A small border is placed under it as a separator from other elements.\n /\n @Prop({reflect: true})\n verticalContext = false;\n\n @State()\n hasHeader: boolean;\n\n @State()\n hasContent: boolean;\n\n private content: HTMLElement;\n\n /* Animation frame request id. /\n private raf: number;\n\n /* The menu has been opened. /\n @Event()\n opened: EventEmitter;\n\n /* The menu has been closed. /\n @Event()\n closed: EventEmitter;\n\n private currentIndex = -1;\n\n private currentCanvasOpenStatus = false;\n\n private firstElMenu: HTMLMenuElement;\n\n private lastElMenu: HTMLMenuElement;\n\n private toggle(): void {\n if (!this.hasContent) {\n return;\n }\n\n this.open = !this.open;\n this.open ? this.opened.emit() : this.closed.emit();\n }\n\n /* Close the floating list when a click is performed outside of this Element. /\n @Listen(\"click\", {target: \"document\"})\n handleClick(ev: MouseEvent): void {\n if (!this.floating \|\| !this.open \|\| this.hostElement.contains(ev.target as Element)) {\n return;\n }\n\n this.reflow();\n this.open = false;\n this.closed.emit();\n }\n\n @Listen(\"canvasOpenStatusChanged\", {target: \"document\"})\n canvasOpenStatusChanged(e: CustomEvent): void {\n this.currentCanvasOpenStatus = e.detail;\n }\n\n @Listen(\"keydown\")\n handleKeyDown(e: KeyboardEvent): void {\n if (e.code === KeyboardCode.ENTER) {\n return;\n }\n\n if (this.open && !this.currentCanvasOpenStatus) {\n this.handleNavigationSideArrow(e);\n }\n\n this.handleArrowsNav(e);\n }\n\n private handleNavigationSideArrow(e: KeyboardEvent): void {\n if (e.code !== KeyboardCode.ARROW_RIGHT && e.code !== KeyboardCode.ARROW_LEFT) {\n return;\n }\n\n if (e.code === KeyboardCode.ARROW_RIGHT) {\n const nextElement = this.hostElement.nextElementSibling;\n\n if (!nextElement) {\n const firstMenuItem = this.firstElMenu.shadowRoot.querySelector(\".menu-label\") as HTMLElement;\n firstMenuItem.focus();\n this.open = false;\n }\n\n if (nextElement && nextElement.tagName === \"Z-MENU\") {\n const menuButton = nextElement.shadowRoot.querySelector(\".menu-label\") as HTMLElement;\n menuButton.focus();\n\n if (nextElement.children.length > 1) {\n nextElement.setAttribute(\"open\", \"true\");\n }\n this.open = false;\n }\n } else if (e.code === KeyboardCode.ARROW_LEFT) {\n const prevElement = this.hostElement.previousElementSibling;\n if (prevElement.tagName !== \"Z-MENU\") {\n const lastElMenuItem = this.lastElMenu.shadowRoot.querySelector(\".menu-label\") as HTMLElement;\n lastElMenuItem.focus();\n this.open = false;\n }\n if (prevElement && prevElement.tagName === \"Z-MENU\") {\n const menuButton = prevElement.shadowRoot.querySelector(\".menu-label\") as HTMLElement;\n menuButton.focus();\n if (prevElement.children.length > 1) {\n prevElement.setAttribute(\"open\", \"true\");\n }\n this.open = false;\n }\n }\n }\n\n private handleArrowsNav(e: KeyboardEvent): void {\n const menuItems = Array.from(this.hostElement.querySelectorAll(\"[slot='item']\")) as HTMLElement[];\n const newMenuItems = menuItems.map((el) => {\n if (el.tagName === \"Z-MENU-SECTION\") {\n return el.shadowRoot.querySelector(\"button\");\n }\n\n return el;\n });\n\n if (this.open) {\n e.preventDefault();\n e.stopPropagation();\n\n if (e.code === KeyboardCode.ARROW_DOWN \|\| e.code === KeyboardCode.ARROW_UP) {\n let nextFocusableItem: HTMLElement;\n // INFO: reset focus on all menu items\n newMenuItems.forEach((item: HTMLElement) => item.setAttribute(\"tabindex\", \"-1\"));\n\n if (e.code === KeyboardCode.ARROW_DOWN) {\n nextFocusableItem = this.getNextItem(newMenuItems, 1);\n } else if (e.code === KeyboardCode.ARROW_UP) {\n nextFocusableItem = this.getNextItem(newMenuItems, -1);\n }\n\n if (nextFocusableItem) {\n nextFocusableItem.setAttribute(\"tabindex\", \"0\");\n nextFocusableItem.focus();\n }\n } else if (e.code === KeyboardCode.ESC) {\n this.focusToParentAndCloseMenu();\n } else if (e.shiftKey && e.code === KeyboardCode.TAB) {\n this.focusToParentAndCloseMenu();\n }\n }\n }\n\n private getNextItem(menuItems: HTMLElement[], direction: number): HTMLElement {\n if (this.currentIndex === -1) {\n this.currentIndex = direction === 1 ? 0 : menuItems.length - 1;\n\n return menuItems[this.currentIndex];\n }\n\n this.currentIndex = (this.currentIndex + direction + menuItems.length) % menuItems.length;\n\n return menuItems[this.currentIndex];\n }\n\n private focusToParentAndCloseMenu(): void {\n const menuButton = this.hostElement.shadowRoot.querySelector(\".menu-label\") as HTMLElement;\n menuButton.focus();\n this.currentIndex = -1;\n this.open = false;\n }\n\n @Watch(\"open\")\n onOpenChanged(): void {\n if (this.open) {\n this.reflow(true);\n } else {\n cancelAnimationFrame(this.raf);\n }\n }\n\n constructor() {\n this.toggle = this.toggle.bind(this);\n this.checkContent = this.checkContent.bind(this);\n this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n this.onItemsChange = this.onItemsChange.bind(this);\n }\n\n componentWillLoad(): void {\n const menuItems = Array.from(this.hostElement.parentElement.querySelectorAll('[slot=\"menu\"]'));\n this.firstElMenu = menuItems[0] as HTMLMenuElement;\n this.lastElMenu = menuItems[menuItems.length - 1] as HTMLMenuElement;\n\n this.checkContent();\n }\n\n /\n Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n * @param ev Slotchange event\n /\n private onLabelSlotChange(ev: Event): void {\n const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n labelElement.dataset.text = labelElement?.textContent;\n }\n\n /\n Correctly set position of the floating menu in order to prevent overflow.\n * @param live Should run the method on every refresh frame.\n /\n private reflow(live = false): void {\n if (this.content) {\n const {style} = this.content;\n const {left} = this.hostElement.getBoundingClientRect();\n const widthPx = getComputedStyle(this.content).width;\n const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n const safeScrollbarSpace = 30;\n style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n }\n if (live) {\n this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n }\n }\n\n /\n Check if some content slot is set.\n /\n private checkContent(): void {\n this.hasHeader = !!this.hostElement.querySelectorAll(\"[slot=header]\").length;\n this.hasContent = !!this.hostElement.querySelectorAll(\"[slot=item]\").length \|\| this.hasHeader;\n }\n\n /\n Set `menuitem` role to all menu items.\n * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).\n */\n private onItemsChange(): void {\n this.checkContent();\n const items = this.hostElement.querySelectorAll<HTMLElement>(\"[slot=item]\");\n items.forEach((item) => {\n item.setAttribute(\"role\", \"menuitem\");\n item.setAttribute(\"tabindex\", \"-1\");\n item.dataset.text = item.textContent;\n });\n }\n\n private focusFirstItemOnKeyUp(): void {\n const firstElement = this.hostElement.querySelectorAll(\"[slot='item']\")[0] as HTMLElement;\n if (firstElement) {\n firstElement.focus();\n this.currentIndex = 0;\n }\n }\n\n private renderMenuLabel(): HTMLButtonElement \| HTMLDivElement {\n if (this.hasContent) {\n return (\n <div class=\"menu-wrapper\">\n <button\n class=\"menu-label\"\n aria-expanded={this.open ? \"true\" : \"false\"}\n aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n onClick={this.toggle}\n onKeyUp={this.focusFirstItemOnKeyUp.bind(this)}\n >\n <div class=\"menu-label-content\">\n <slot onSlotchange={this.onLabelSlotChange}></slot>\n <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n </div>\n </button>\n </div>\n );\n }\n\n return (\n <div class=\"menu-wrapper\">\n <div class=\"menu-label\">\n <div class=\"menu-label-content\">\n <slot onSlotchange={this.onLabelSlotChange}></slot>\n </div>\n </div>\n </div>\n );\n }\n\n render(): HTMLZMenuElement {\n return (\n <Host>\n {this.renderMenuLabel()}\n\n {this.hasContent && (\n <div\n class=\"content\"\n ref={(el) => (this.content = el)}\n >\n {this.hasHeader && (\n <header class=\"header\">\n <slot\n name=\"header\"\n onSlotchange={this.checkContent}\n ></slot>\n </header>\n )}\n\n <div\n class=\"items\"\n role=\"menu\"\n >\n <slot\n name=\"item\"\n onSlotchange={this.onItemsChange}\n ></slot>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-menu.js","mappings":"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","names":["ZMenu"],"sources":["src/components/z-menu/styles.css?tag=z-menu&encapsulation=shadow","src/components/z-menu/index.tsx"],"sourcesContent":[":host,\n::slotted(),\n {\n box-sizing: border-box;\n outline: none;\n}\n\n:host {\n --z-menu-label-color: ;\n\n position: relative;\n display: inline-flex;\n height: fit-content;\n flex-direction: column;\n}\n\n::slotted(a) {\n text-decoration: none;\n}\n\n::slotted() {\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n.menu-label {\n position: relative;\n width: 100%;\n padding: 0;\n border: 0;\n margin: 0;\n background: transparent;\n border-radius: 0;\n color: inherit;\n text-align: left;\n}\n\n.menu-wrapper {\n display: flex;\n align-items: center;\n}\n\nbutton.menu-label {\n cursor: pointer;\n}\n\n.menu-label:focus-within {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.menu-label .menu-label-content {\n position: relative;\n display: flex;\n align-items: center;\n border-bottom: var(--border-size-large) solid transparent;\n}\n\n:host(:is([active], [open])) .menu-label-content,\n.menu-label:focus-within .menu-label-content {\n color: var(--color-primary01);\n font-weight: var(--font-bd);\n}\n\n:host(:is([active], [open])) .menu-label-content ::slotted(),\n.menu-label:focus-within .menu-label-content ::slotted(),\n.menu-label:focus-within .menu-label-content z-icon {\n color: var(--color-primary01);\n letter-spacing: normal;\n}\n\n:host([vertical-context]) .menu-label-content {\n padding: var(--space-unit) 0;\n border-width: var(--border-size-small);\n border-color: var(--color-surface03);\n}\n\n:host([vertical-context]) .menu-label-content ::slotted() {\n padding: 0;\n}\n\n:host(:is([active], [open])) .menu-label .menu-label-content,\n.menu-label .menu-label-content:hover,\n.menu-label:focus-within .menu-label-content {\n border-color: var(--color-secondary01);\n}\n\n:host([vertical-context]:is([active], [open])) .menu-label .menu-label-content::after,\n:host([vertical-context]) .menu-label:hover::after,\n:host([vertical-context]) .menu-label:focus-within .menu-label-content::after {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: var(--border-size-large);\n background-color: var(--color-secondary01);\n content: \"\";\n}\n\n/* Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. /\n::slotted([data-text]:not([slot]))::after {\n height: 0;\n content: attr(data-text);\n content: attr(data-text) / \"\";\n font-weight: var(--font-bd);\n letter-spacing: normal;\n pointer-events: none;\n user-select: none;\n visibility: hidden;\n}\n\n@media speech {\n ::slotted([data-text]:not([slot]))::after {\n display: none;\n }\n}\n\n::slotted([data-text]:not([slot])) {\n display: inline-flex;\n flex-direction: column;\n}\n\n.menu-label .menu-label-content ::slotted() {\n display: inline-flex;\n width: 100%;\n min-width: fit-content;\n padding-bottom: 2px;\n margin: 0;\n appearance: none;\n color: var(--z-menu-label-color, var(--color-default-text));\n font-family: var(--font-family-sans);\n font-size: var(--font-size-3);\n font-weight: inherit;\n line-height: 1.5;\n}\n\n.menu-label .menu-label-content z-icon {\n margin-left: calc(var(--space-unit) * 1.5);\n fill: currentcolor;\n}\n\n.content {\n background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n display: none;\n}\n\n:host([floating]:not([vertical-context])) .content {\n position: absolute;\n top: 100%;\n left: 0;\n width: 375px;\n min-width: 100%;\n max-width: 100vw;\n padding: 0 calc(var(--space-unit) * 2);\n box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n width: 100%;\n}\n\n.header {\n display: flex;\n align-items: center;\n padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n width: calc(var(--space-unit) * 11.25);\n height: auto;\n object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n margin: auto 0;\n margin-left: calc(var(--space-unit) * 2.5);\n font-size: var(--font-size-3);\n font-weight: var(--font-sb);\n line-height: 1.5;\n}\n\n.items {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n width: 100%;\n margin: 0;\n font-size: var(--font-size-3);\n line-height: 1.5;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n padding: var(--space-unit) 0;\n border-bottom: var(--border-size-small) solid var(--color-surface03);\n}\n\n:host(:not([vertical-context])) .items > ::slotted([slot=\"item\"]:not(z-menu-section):last-of-type) {\n border-bottom: 0;\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active) {\n border-color: var(--color-secondary01);\n font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\n\nconst isZMenuSection = (el: HTMLElement \| HTMLZMenuSectionElement): el is HTMLZMenuSectionElement =>\n el?.tagName === \"Z-MENU-SECTION\";\n\n/*\n @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Set the `active` HTML attribute on the element to highlight it. Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n /\n@Component({\n tag: \"z-menu\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMenu {\n @Element() host: HTMLZMenuElement;\n\n /* Flag to set the active status of the menu. /\n @Prop({reflect: true})\n active?: boolean;\n\n /\n Flag to set the display mode of the list.\n * If true, the list will be absolutely positioned under the menu label,\n * stacked beneath it otherwise.\n /\n @Prop({reflect: true})\n floating? = true;\n\n /* The opening state of the menu. /\n @Prop({mutable: true, reflect: true})\n open = false;\n\n /\n Tells the component that it's placed in a vertical context with other `ZMenu`s (usually in the ZAppHeader's offcanvas).\n * A small border is placed under it as a separator from other elements.\n /\n @Prop({reflect: true})\n verticalContext = false;\n\n /\n Tabindex value to set on the menu label.\n * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZAppHeader).\n /\n @Prop()\n htmlTabindex = -1;\n\n @State()\n hasHeader: boolean;\n\n @State()\n hasContent: boolean;\n\n /* The menu has been opened. /\n @Event()\n opened: EventEmitter;\n\n /* The menu has been closed. /\n @Event()\n closed: EventEmitter;\n\n private labelButton: HTMLButtonElement;\n\n private content: HTMLElement;\n\n private items: (HTMLElement \| HTMLZMenuSectionElement)[];\n\n /* Animation frame request id. /\n private raf: number;\n\n private get focusableItem(): HTMLZMenuSectionElement \| HTMLElement \| null {\n return this.items.find((item) => (isZMenuSection(item) ? item.htmlTabindex === 0 : item.tabIndex === 0));\n }\n\n private toggle(): void {\n if (!this.hasContent) {\n return;\n }\n\n this.open = !this.open;\n }\n\n /\n Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n * @param ev Slotchange event\n /\n private onLabelSlotChange(ev: Event): void {\n const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n labelElement.dataset.text = labelElement?.textContent;\n this.setLabelA11yAttrs();\n }\n\n /\n Correctly set position of the floating menu in order to prevent overflow.\n * @param live Should run the method on every refresh frame.\n /\n private reflow(live = false): void {\n if (this.content && this.hasContent) {\n const {style} = this.content;\n const {left} = this.host.getBoundingClientRect();\n const widthPx = getComputedStyle(this.content).width;\n const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n const safeScrollbarSpace = 30;\n style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n }\n if (live) {\n this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n }\n }\n\n /\n Check if some content slot is set.\n /\n private checkContent(): void {\n this.hasHeader = !!this.host.querySelectorAll(\"[slot=header]\").length;\n this.hasContent = !!this.host.querySelectorAll(\"[slot=item]\").length \|\| this.hasHeader;\n }\n\n /\n Set `menuitem` role to all menu items (ZMenuSection items already have it).\n * Set -1 to the tabindex of the items and 0 to the first one.\n /\n private setItemsA11yAttrs(): void {\n this.items.forEach((item, index) => {\n const tabindex = index === 0 ? 0 : -1;\n if (isZMenuSection(item)) {\n item.htmlTabindex = tabindex;\n } else {\n item.setAttribute(\"role\", \"menuitem\");\n item.tabIndex = tabindex;\n }\n });\n }\n\n private onItemsChange(): void {\n this.checkContent();\n this.items = Array.from(this.host.children).filter(({slot}) => slot === \"item\") as HTMLElement[];\n this.setItemsA11yAttrs();\n this.items.forEach((item) => {\n if (!isZMenuSection(item)) {\n item.dataset.text = item.textContent;\n }\n });\n }\n\n /\n Move focus and adjust the tabindex value of `receiver` and `current` elements,\n * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.\n * If the receiver is a ZMenuSection and it's open, focus its first focusable item.\n /\n private moveFocus(\n receiver: HTMLElement \| HTMLZMenuSectionElement,\n current?: HTMLElement \| HTMLZMenuSectionElement\n ): void {\n if (isZMenuSection(receiver)) {\n receiver.setFocus();\n } else {\n receiver.tabIndex = 0;\n setTimeout(() => {\n receiver.focus();\n }, 100);\n }\n if (!current) {\n return;\n }\n\n if (isZMenuSection(current)) {\n current.htmlTabindex = -1;\n } else {\n current.tabIndex = -1;\n }\n }\n\n private onLabelKeydown(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.ENTER \|\| ev.key === KeyboardCode.SPACE) {\n ev.preventDefault();\n ev.stopPropagation();\n this.toggle();\n }\n\n if (!this.verticalContext) {\n return;\n }\n\n if (ev.key === KeyboardCode.ARROW_RIGHT && !this.open) {\n ev.preventDefault();\n ev.stopPropagation();\n this.open = true;\n\n return;\n }\n\n if (ev.key === KeyboardCode.ARROW_LEFT && this.open) {\n ev.preventDefault();\n ev.stopPropagation();\n this.open = false;\n }\n }\n\n /* Set tabindex of the label to 0, then focus it. /\n @Method()\n async setFocus(): Promise<void> {\n this.htmlTabindex = 0;\n const label = this.hasContent ? this.labelButton : (this.host.firstElementChild as HTMLElement);\n label.focus();\n }\n\n /* Focus the last item. */\n @Method()\n async focusLastItem(): Promise<void> {\n this.htmlTabindex = 0;\n this.moveFocus(this.items[this.items.length - 1]);\n }\n\n @Watch(\"open\")\n onOpenChanged(): void {\n this.setItemsA11yAttrs();\n if (!this.open) {\n cancelAnimationFrame(this.raf);\n this.closed.emit();\n this.items.forEach((item) => {\n if (isZMenuSection(item) && item.open) {\n item.open = false;\n }\n });\n\n return;\n }\n\n this.opened.emit();\n if (this.floating) {\n this.reflow(true);\n }\n }\n\n @Watch(\"htmlTabindex\")\n setLabelA11yAttrs(): void {\n if (this.hasContent && !this.labelButton) {\n return;\n }\n\n if (this.hasContent) {\n this.labelButton.tabIndex = this.htmlTabindex;\n\n return;\n }\n\n const slottedLabel = this.host.firstElementChild as HTMLElement;\n slottedLabel.role = \"menuitem\";\n slottedLabel.tabIndex = this.htmlTabindex;\n }\n\n @Listen(\"keydown\")\n onKeyDown(ev: KeyboardEvent): void {\n if (!this.hasContent) {\n return;\n }\n\n switch (ev.key) {\n case KeyboardCode.ESC:\n ev.stopPropagation();\n ev.preventDefault();\n this.open = false;\n this.setFocus();\n break;\n case KeyboardCode.ARROW_DOWN: {\n if (this.verticalContext && document.activeElement === this.host && !this.open) {\n break;\n }\n\n if (document.activeElement === this.host) {\n if (!this.open) {\n this.open = true;\n }\n ev.stopPropagation();\n ev.preventDefault();\n this.moveFocus(this.items[0]);\n break;\n }\n\n const currentIndex = this.items.indexOf(this.focusableItem);\n const receiver = this.items[currentIndex + 1];\n if (this.verticalContext && !receiver) {\n break;\n }\n\n ev.stopPropagation();\n ev.preventDefault();\n // if the last item is already focused, navigate to the first one\n this.moveFocus(receiver ?? this.items[0], this.focusableItem);\n break;\n }\n case KeyboardCode.ARROW_UP: {\n if (this.verticalContext && document.activeElement === this.host) {\n break;\n }\n\n if (document.activeElement === this.host) {\n // open the menu and focus the last item\n if (!this.open) {\n this.open = true;\n }\n ev.stopPropagation();\n ev.preventDefault();\n this.moveFocus(this.items[this.items.length - 1], this.focusableItem);\n break;\n }\n\n ev.stopPropagation();\n ev.preventDefault();\n const currentIndex = this.items.indexOf(this.focusableItem);\n const receiver = this.items[currentIndex - 1];\n if (!receiver && this.verticalContext) {\n this.setFocus();\n break;\n }\n\n if (isZMenuSection(receiver) && receiver.open) {\n isZMenuSection(this.focusableItem)\n ? (this.focusableItem.htmlTabindex = -1)\n : (this.focusableItem.tabIndex = -1);\n receiver.focusLastItem();\n break;\n }\n\n // if the first item is already focused, navigate to the last one\n this.moveFocus(receiver ?? this.items[this.items.length - 1], this.focusableItem);\n break;\n }\n }\n }\n\n constructor() {\n this.toggle = this.toggle.bind(this);\n this.checkContent = this.checkContent.bind(this);\n this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n this.onItemsChange = this.onItemsChange.bind(this);\n this.onLabelKeydown = this.onLabelKeydown.bind(this);\n }\n\n connectedCallback(): void {\n this.onItemsChange();\n this.setLabelA11yAttrs();\n }\n\n render(): HTMLDivElement \| HTMLZMenuElement {\n if (!this.hasContent) {\n return (\n <div class=\"menu-wrapper\">\n <div class=\"menu-label\">\n <div class=\"menu-label-content\">\n <slot onSlotchange={this.onLabelSlotChange} />\n </div>\n </div>\n </div>\n );\n }\n\n return (\n <Host>\n <div class=\"menu-wrapper\">\n <button\n ref={(el) => (this.labelButton = el)}\n class=\"menu-label\"\n aria-expanded={`${!!this.open}`}\n aria-haspopup={`${this.hasContent}`}\n aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n role=\"menuitem\"\n tabindex={this.htmlTabindex}\n onClick={this.toggle}\n onKeyDown={this.onLabelKeydown}\n >\n <div class=\"menu-label-content\">\n <slot onSlotchange={this.onLabelSlotChange} />\n <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n </div>\n </button>\n </div>\n\n <div\n class=\"content\"\n ref={(el) => (this.content = el)}\n >\n {this.hasHeader && (\n <header class=\"header\">\n <slot\n name=\"header\"\n onSlotchange={this.checkContent}\n />\n </header>\n )}\n\n <div\n class=\"items\"\n role=\"menu\"\n >\n <slot\n name=\"item\"\n onSlotchange={this.onItemsChange}\n />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/z-myz-card-alert.js CHANGED Viewed

@@ -56,7 +56,7 @@ const ZMyzCardAlert$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardAlert ext
         }
     }
     render() {
-        return (h("div", { key: 'e488b304fcdd145b3ce0ba375d36a997a646eec9', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: '256f5d68375a9c8c187785cfdbd6272b8cc449f9', type: this.getAlertType() }, h("div", { key: '9f3d7e43b28f3fc92bf1e627475af9a9f0464799', class: "relative-container" }, h("z-icon", { key: '6c9e26abc686e0d6020d7c6398a8575e6e8ac543', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: 'b4b997286c4e5250c5b856f0d375ad49162c92df', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { key: '18020fe9e8180577a168a25c0ba17464cedf70c0', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
+        return (h("div", { key: '4887349f74dcbeb07e6c8785481f717a4892238c', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: '64b1aab8757cbeb05ca5e52ca000058d5341770a', type: this.getAlertType() }, h("div", { key: 'a8004837dc3f11c1b156736171dd2b738ea4cede', class: "relative-container" }, h("z-icon", { key: '5784ab77dd50bbc1c38d65fd7f6109846a83a06c', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: '089042e66c5388d887d7d428ffbd49124a31c6dd', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { key: '1ffc68e30d2038b49ce31f35b8b08778f16841da', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
                 this.handleActionButtonClick(e);
             }, onKeyPress: (e) => {
                 this.handleSpaceKeyPress(e);

package/dist/components/z-myz-card-dictionary.js CHANGED Viewed

@@ -31,7 +31,7 @@ const ZMyzCardDictionary$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardDict
         this.cardFlipped.emit(showBack);
     }
     render() {
-        return (h("div", { key: 'd86e3c2140c9100c3bac377380a4fff77d089153' }, h("z-myz-card", { key: '34a3f2a9bfe747865ad3a4dca7f0ec106b1fe567' }, h("z-myz-card-header", { key: 'dc172fabf38338d7fd89af67a80da6918a1c0918', titolo: this.name }), h("div", { key: '8d0b945f35287a60658cf37b15440f8b66c98b65', class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { key: '7b205650b760c3fb8f7d538bbfe5d2a73e237992', class: "front" }, h("z-myz-card-body", { key: 'c8fe772333350bc8ef4643f04e0585b80fea7e83' }, h("z-myz-card-cover", { key: 'a1b65f443fdf541dee8b21fb3709362ed6eaff4f', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { key: 'e5b8bb0a7543a5f1e3954564f4cd28c11963b0aa', class: { "hide-info": this.hideinfobtn }, variant: ButtonVariant.SECONDARY, icon: "informationsource", size: ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), h("div", { key: 'ce3cfb76aac872409b162b80c6659799c17ea6ed', class: "back" }, h("slot", { key: 'eafdc479751d3326775dd01f1ced2ac9a9df189f', name: "info" }))), h("slot", { key: '4e4d018a5ca6c9282985d7fb978abb738675fa52' }))));
+        return (h("div", { key: 'f7c5b89a84036db946702fc8990564d3fcbf7cfb' }, h("z-myz-card", { key: 'd7972b3c72daff0a4167ef83e20a47593092ac10' }, h("z-myz-card-header", { key: '355e3a181cfccbcfda8eaeb57fbb1a345121f21a', titolo: this.name }), h("div", { key: '250d86cfd9f076fc6a361d7be559d9d63dd7d908', class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { key: 'ff6975119b9bf212ee499d2bef026c4d9b87a5ce', class: "front" }, h("z-myz-card-body", { key: '40a8fea2e369b69f8e71d26d3e6a36e96981c0c4' }, h("z-myz-card-cover", { key: '2d99c3bc655c8b40177401f6ff4a8502a23c30dc', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { key: 'd49203bc96cd283cabe29e0e5c37c8a0928dea4e', class: { "hide-info": this.hideinfobtn }, variant: ButtonVariant.SECONDARY, icon: "informationsource", size: ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), h("div", { key: '0c547edaf0d97c2d983350446fe5a5fab8c764d5', class: "back" }, h("slot", { key: 'af3acf86431069cff1e7aff7b7011e903b5d10a2', name: "info" }))), h("slot", { key: '660c2827003495015ca697cfae2b0b185436f9a9' }))));
     }
     static get style() { return ZMyzCardDictionaryStyle0; }
 }, [1, "z-myz-card-dictionary", {

package/dist/components/z-myz-card-footer-sections.js CHANGED Viewed

@@ -10,7 +10,7 @@ const ZMyzCardFooterSections$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCard
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: '460ccb7066c598d7712f468b8b77850190fd6088' }, h("footer", { key: '14789b182cd02636149dd501d8963e23bf9893ff' }, h("div", { key: 'f618c2e4c24c9488aa6090c6629d846c72b9868c', class: "top" }, h("slot", { key: '9fdbc5aeb537308c6a0a1197de2490749d8710a8', name: "top" })), h("div", { key: '900ff46313ca3d71e7e501f6c7d9e531ec41cdfb', class: "bottom" }, h("slot", { key: 'abac3671bea6c55bb0e18d6c05899e4ae9be3895', name: "bottom" })))));
+        return (h("div", { key: '360208c758c0173bd270a796f5537c12ca3a6025' }, h("footer", { key: '2cc4273bc39b575eb1c2adbb8c32f261efbc6eaa' }, h("div", { key: 'd8f3dccf2e3db8245281ba76b8643f147b0fe6e0', class: "top" }, h("slot", { key: '8552908078ded7a827b7c6c3fa53c73ae3a2f64d', name: "top" })), h("div", { key: 'd416449033db5c2b5d1e5d5db24067a71e10d9bc', class: "bottom" }, h("slot", { key: 'a3404835e90df89465f0e6317d4f71f879a6cff0', name: "bottom" })))));
     }
     static get style() { return ZMyzCardFooterSectionsStyle0; }
 }, [1, "z-myz-card-footer-sections"]);

package/dist/components/z-myz-card-footer.js CHANGED Viewed

@@ -62,7 +62,7 @@ const ZMyzCardFooter$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardFooter e
         return this.host.querySelector("[slot=list] > li a");
     }
     render() {
-        return (h("div", { key: '5e52bb4e61efb15a9e45cfc35635edf162c1348b', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { key: 'e58bbf1f64147496f82422ea45e0c7769145f5d2', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { key: '7733adaf9bd6739ce95b53c963c5fef169fe5617', class: "toggle" }, h("slot", { key: '43c3727d4206f3538f82298da583634338df147f', name: "toggle" })), this.titolo && h("p", { key: '8d895c1628c00fdf053cd413c93a71bd2ed7fe2e', class: { "custom-content": this.customContent } }, this.titolo), h("div", { key: '8bc2964e1e62e7dc2b9c4198fc3d19572702fc04', class: { "content": true, "custom-content": this.customContent } }, h("div", { key: '75c1a00ee5b83cc1202ff7ea8ae96fab7d24e09a' }, h("p", { key: 'b2a545232bba45aac1aa7615dead6354327dcbff', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { key: '4869f5bb8a75bc51b3fddde7fe46a23811d061f9', title: this.getTitleAuthors() }, h("span", { key: '43f8c9ff3eb8a794f9be628b8d0a1d8853bc1510', "aria-description": "Autori", class: "bold" }, this.autori))), h("p", { key: '15ed7ba2687e6aafdf7704da66dcbcee7ec25445', class: "year-isbn" }, h("span", { key: 'a05d17196f49c90c025ef545586dc162444efd03', class: "isbn" }, h("span", { key: '6481dac818d211c724aaddf1e17cf71637099376' }, h("span", { key: '6d27dc2a43d5e6e3367ad77e05c76b6d096f08a1', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), h("div", { key: '6df905d3cedea3ed63029851103a4a4f919e8b20', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { key: 'b71e8974d82d8b45f1bd53d8d73b893924a8a84d', name: "list" })))), this.customContent && h("slot", { key: 'a2269175a16d7f2f2cdc48035969e6fab3d64052', name: "content" })));
+        return (h("div", { key: '95471e9b224ae123dbee86149a8ad1bb2d8cbaaf', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { key: 'b9df9be334a121be3c84f40ac31dc00359e42b85', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { key: '48f1b9befd8700ce2b1fd503e146e0f4890b642e', class: "toggle" }, h("slot", { key: '780b4ebc07c7571dc1e5a29bfd42fe913b16e1c4', name: "toggle" })), this.titolo && h("p", { key: '8b7491fc25b5242d5227de74e49b2bfa4ed1b94d', class: { "custom-content": this.customContent } }, this.titolo), h("div", { key: '3d2ffb755ab4bc961f690dce39e69a64bbd1b386', class: { "content": true, "custom-content": this.customContent } }, h("div", { key: 'e19edaab5eccfba65a5f7cf43a1955200a33e590' }, h("p", { key: '134507d968cf847976e1a3fa57c0a2ad5d8c448a', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { key: '0def6b25daa09188958accdfa2e4f96cd52e6ab0', title: this.getTitleAuthors() }, h("span", { key: '32c27603fd64494fe660d7b4cb31687bb8efc974', "aria-description": "Autori", class: "bold" }, this.autori))), h("p", { key: 'd4f81349f5e4cb36711fca0ebb42aafe8843efca', class: "year-isbn" }, h("span", { key: 'd6a1ff032454ece5bb485bcf3462d24a3005396e', class: "isbn" }, h("span", { key: '860b6c3c876d1e02015f86b93fd9cad1eac7f0ba' }, h("span", { key: '3f3656a7b6bba750d1e7522bad1f2a875aff9b52', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), h("div", { key: '4af2ea2d2684984f328bea6cf50d13524036772c', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { key: '89d9b0d155e93a03c557ebdccc77d256145a4558', name: "list" })))), this.customContent && h("slot", { key: '9a1aa30dd1df23d4ab8c6d5138d731f17cdf2ff6', name: "content" })));
     }
     get host() { return this; }
     static get style() { return ZMyzCardFooterStyle0; }

package/dist/components/z-myz-card-icon.js CHANGED Viewed

@@ -14,7 +14,7 @@ const ZMyzCardIcon$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardIcon exten
         this.ariaLabel = "";
     }
     render() {
-        return (h("button", { key: '204f6d7ba43b9300ce8f4fbbd7d27849e7db1c8a', disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", { key: '660c3c2bd313decba37ea630f83ce74c0b2f4153' }, h("z-icon", { key: '22fdf366571f73909d2411a0b745184a6d39b098', name: this.icon, width: 16, height: 16 }))));
+        return (h("button", { key: 'dce263721e9c0483d2715776decad8392c9d083f', disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", { key: 'cd20d6f9c83b394cd651bcf8b92626daa04e9c16' }, h("z-icon", { key: 'ecdad1d4dc3b39826f0a4cb51e3cb0b97fe5f3f0', name: this.icon, width: 16, height: 16 }))));
     }
     static get style() { return ZMyzCardIconStyle0; }
 }, [1, "z-myz-card-icon", {

package/dist/components/z-myz-card-info.js CHANGED Viewed

@@ -121,7 +121,7 @@ const ZMyzCardInfo$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardInfo exten
         return (h("section", { ref: (el) => (this.offlineLicenseWrapper = el) }, h("span", { class: "license-heading" }, h("span", null, "Licenza offline"), this.setExpirationLicenseMessage("offline")), "Scadenza il ", h("b", null, this.cardData.offlineLicense.expiration), h("br", null), "Installazioni disponibili: ", h("b", null, this.cardData.offlineLicense.installations)));
     }
     render() {
-        return (h("div", { key: '1f42c0e5dee2d7dad7f4cfe4f57546091566e6a0' }, this.renderCloseIcon(), h("div", { key: '15bde9788efb9a4b9140ba75d0619aed9d9debfa', class: "content-wrapper", ref: (el) => (this.contentWrapper = el) }, this.renderGeneralSection(), this.renderTooltip(), this.renderOnlineLicenseSection(), this.renderOfflineLicenseSection()), h("div", { key: '813495ab63d355830e85557f10ae18ee3900c517', class: "cta-wrapper" }, h("slot", { key: '760ca67e6143c5d96bf31121b786e03f7606b4f3' }))));
+        return (h("div", { key: 'caf12cdfa9cea6d882b85dfb809e55036449bf19' }, this.renderCloseIcon(), h("div", { key: '7b01593abc3b658a08faad90c18f040284006ecd', class: "content-wrapper", ref: (el) => (this.contentWrapper = el) }, this.renderGeneralSection(), this.renderTooltip(), this.renderOnlineLicenseSection(), this.renderOfflineLicenseSection()), h("div", { key: 'def1beafdcd5c7a42fea42fa70976a7eeca1dbad', class: "cta-wrapper" }, h("slot", { key: '514e3cab754ccffe63c867b1fa2b41e0de27b3ea' }))));
     }
     static get style() { return ZMyzCardInfoStyle0; }
 }, [1, "z-myz-card-info", {

package/dist/components/z-myz-card-list.js CHANGED Viewed

@@ -30,7 +30,7 @@ const ZMyzCardList$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardList exten
         });
     }
     render() {
-        return h("ul", { key: '874d84f31edec60ba919f37feb4ae42d399b90d6' }, this.renderList(JSON.parse(this.listdata)));
+        return h("ul", { key: '4b0208d11f8bf0bce26d4f2613546485c603c4df' }, this.renderList(JSON.parse(this.listdata)));
     }
     static get style() { return ZMyzCardListStyle0; }
 }, [1, "z-myz-card-list", {

package/dist/components/z-myz-list.js CHANGED Viewed

@@ -26,7 +26,7 @@ const ZMyzList$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzList extends HTMLE
     }
     render() {
         const lastElem = this.list ? this.list.length - 1 : -1;
-        return (h("ul", { key: 'b49ccd7184049e42611185d36fcf9cc1f74fd13b' }, this.list &&
+        return (h("ul", { key: '5cb2ef9c27694d786b4163e2ee6a006b3cbc8f72' }, this.list &&
             this.list.map((bean, i) => (h("z-myz-list-item", { listitemid: bean.listitemid, text: bean.text, link: bean.link, linktarget: bean.linktarget, icon: bean.icon, underlined: lastElem != i })))));
     }
     static get watchers() { return {

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

@@ -205,10 +205,10 @@ const ZNavigationTabs$1 = /*@__PURE__*/ proxyCustomElement(class ZNavigationTabs
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '16294d384c48cb2380178445630240fcc6f085cc', class: {
+        return (h(Host, { key: '2a1e447595ea6f38d6cf40bbc75b0b9e9939b4b3', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: '98eae832700569a7f2539aa51cee7c07ac2f3815', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '21ddd942ac5c9a7cfdf53e1c31788268b7932f03', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'd2582f956ec466d672bdf43494f96d1b2ee73485', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '3cfbaf5ef02b8964b1b497deef2b8e95b6ef94e0' })), h("button", { key: '6cc204b98252d19cdd79bdf2f9f1824c2f69d559', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '7bc36b5cdb865c759e0bb37362a820557e079be4', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: '3d8b9ffb751ca03a542c0432b8a8059edb7417e4', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: 'ce3e471080e08141c45c914121b10ee2e4a871bf', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '5ce29deac2a4c2732e12aa55697ec960ebe3f20c', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '5c14b9cb5f57738bc93a42aa1a0df87351da40ce' })), h("button", { key: '38e6b7b2082299e20419460882d0064a1c7a4be7', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: 'ce82c1adab657b0f851dc3d73fd0fea36cd0b232', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -30,7 +30,7 @@ const ZNotification$1 = /*@__PURE__*/ proxyCustomElement(class ZNotification ext
     }
     render() {
         var _a;
-        return (h(Host, { key: 'bf9ead754226002371eb0669770d24c0230bcf92' }, this.contenticonname && (h("z-icon", { key: '322709ad12acd8a885214809012178649b172bd8', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: 'd68ea8f5984fee4d906a05f93f9cf3ef4dae932c', class: "content-container" }, h("div", { key: 'd67f12dcbcf7075cbc0e111db260dce207e3411a', class: "content-text" }, h("slot", { key: '6e23a5b287e328657e1848dc1944b3a1ddc065be' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '68da7a70a5dec9113c021c915594c2e8424c21be', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '342853024b8a9bfce814282471d8d8e9e9f6b522', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'ce20a4b279bc3cb3d4b0dd7bf4c61fe9b3837556', name: "multiply-circle", width: 16, height: 16 })))));
+        return (h(Host, { key: '275c4d98f56fb388d1bb3373664f5ba52b22a613' }, this.contenticonname && (h("z-icon", { key: '6f947ada02ec82736df5c099285e8ad84bbd07ed', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '71fcf67cb01c84e0bef856dab960e4a04b472d7a', class: "content-container" }, h("div", { key: 'c590fccba3708952d3c71c8f274f7b5305f85583', class: "content-text" }, h("slot", { key: '104ae4ef5a77cb371f0b4d928a4804b71c33e23a' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: 'e43f9e7499e027131e76839cc21c9cc5ec332355', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: 'afc2acfa687d499bff6720423fa86afd335560ef', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'f03fafa58bdc583c34552e9f5d4114608ad82de1', name: "multiply-circle", width: 16, height: 16 })))));
     }
     static get style() { return ZNotificationStyle0; }
 }, [1, "z-notification", {

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

@@ -24,7 +24,7 @@ const ZOtp$1 = /*@__PURE__*/ proxyCustomElement(class ZOtp extends HTMLElement {
         this.otpRef = [...Array(this.inputNum)];
     }
     render() {
-        return (h("div", { key: '501979362aafae33a4266f38a5785e0e328dba1b', class: "otp-container" }, h("div", { key: 'ca4b4646af395228586dd55ba5cb335b6492347b', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
+        return (h("div", { key: '1d894b5748303b0c8608f99266b207697cc98659', class: "otp-container" }, h("div", { key: '77a5be776089ea3d7988f63e56e6f6702116ffcc', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
                 if (e.keyCode > 47) {
                     this.otpRef[i].value = "";
                 }
@@ -35,7 +35,7 @@ const ZOtp$1 = /*@__PURE__*/ proxyCustomElement(class ZOtp extends HTMLElement {
             }, onInput: (e) => {
                 this.otp[i] = e.target.value;
                 this.emitInputChange(this.otp.join(""));
-            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: 'ce018353101dac73e4dc0ec9d78918f614a85247', message: this.message, status: this.status })));
+            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: '862bef74e3e88e3caf212c5617db73820dae3af5', message: this.message, status: this.status })));
     }
     static get style() { return ZOtpStyle0; }
 }, [1, "z-otp", {

package/dist/components/z-panel-elem.js CHANGED Viewed

@@ -20,11 +20,11 @@ const ZPanelElem$1 = /*@__PURE__*/ proxyCustomElement(class ZPanelElem extends H
     }
     render() {
         const elemId = this.elemid ? this.elemid : "";
-        return (h("div", { key: '7364ce8b1efc2b30e792693a93f41834a65dd7c6', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '815580b59284ea71764fd9f18b98be4ab69ff1e5', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: 'a736866758f35a8284310a5bc81d08f166aec78c', src: this.imgurl, alt: this.imgalt }))), h("div", { key: '1d154781e2bf59a9a6b1c8ddff324e035095c5ec', class: "panel-elem-link" }, h("a", { key: '3531d557c2145fa3fb96f13c2952d4c2c6e366b8', class: {
+        return (h("div", { key: 'f134c054a061905d6a32e4ecc999591308e78fcf', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '7740f9f046cf767c21eac8c44863e7293076550d', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: 'ee429dc9e4fe25b694ae31ebb75bc73219ae827c', src: this.imgurl, alt: this.imgalt }))), h("div", { key: 'ba903181574ff5ff92d9ec01910587ba4362aeee', class: "panel-elem-link" }, h("a", { key: 'edf0aec448a0fbceae6da0c2e19c12611c68bd3f', class: {
                 "z-link": true,
                 "z-link-disabled": this.isdisabled,
                 "z-link-icon": true,
-            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: 'dd6a4750589fe913eeb211025beebb3da7cfc8fd', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: 'b2cbea114008c9f5c6a560c0e52f60ff9e6f7722', class: "panel-elem-desc" }, h("slot", { key: '73a350ea0ca8bc51e56a5a2879651883669a79b4', name: this.descrSlotName })))));
+            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: '3b2dea4d2c546787aefd9157fb0b988c038f3cba', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: 'addef8764e493c2385d44b36a815c46b2e001e64', class: "panel-elem-desc" }, h("slot", { key: 'e2cb555ca78f835793274e7671cb3876560138bf', name: this.descrSlotName })))));
     }
     static get style() { return ZPanelElemStyle0; }
 }, [6, "z-panel-elem", {

package/dist/components/z-section-title.js CHANGED Viewed

@@ -17,7 +17,7 @@ const ZSectionTitle$1 = /*@__PURE__*/ proxyCustomElement(class ZSectionTitle ext
         this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
     }
     render() {
-        return (h(Host, { key: '5718215a4b4b42735d8045c3de73998189f38bf7' }, h("slot", { key: '99e51ba27a27a3100ae7fc88df7537624f8682bb', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: 'd62ca69ea2ecdbb75ef8c034ca6beffc6041ede0', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: 'cb8a5a51554a90e8749d664f3d6d19af67e5afeb', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: 'bdf9d80c19154f8f89947d277f6a7234986b605e', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+        return (h(Host, { key: '15127467ec57c592822cc1d146f19716fb9bf15b' }, h("slot", { key: 'e240b4d2c2a26687b87e3b54044bb663e5fdab4b', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: 'b80bcb9779af5325cc6d2cc57babd89e71856be3', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: '843fe164ad735fd60834f011988b4c9995250a2c', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: 'ba37a4bd53fa715e765dcfe58ccc2a5c1d77051d', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
     }
     get host() { return this; }
     static get style() { return ZSectionTitleStyle0; }

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { e as ControlSize, g as KeyboardCode, l as ListDividerType, i as ListSize } from './index2.js';
-import { r as randomId, b as boolean, a as getElementTree, h as handleKeyboardSubmit, d as getClickedElement } from './utils.js';
+import { r as randomId, b as boolean, d as getElementTree, h as handleKeyboardSubmit, e as getClickedElement } from './utils.js';
 import { d as defineCustomElement$9 } from './index6.js';
 import { d as defineCustomElement$8 } from './index9.js';
 import { d as defineCustomElement$7 } from './index10.js';
@@ -330,7 +330,7 @@ const ZSelect$1 = /*@__PURE__*/ proxyCustomElement(class ZSelect extends HTMLEle
         return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size }));
     }
     render() {
-        return (h("div", { key: '16a8b264460cb21cd19258694e04f7c58ca5bc26', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: '9b123725a6aa033aca4ada3ef6970764e11acf6a', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/z-skip-to-content.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { T as ThemeVariant } from './index2.js';
-import { a as getElementTree, h as handleKeyboardSubmit } from './utils.js';
+import { d as getElementTree, h as handleKeyboardSubmit } from './utils.js';
 const stylesCss = ".sc-z-skip-to-content-h{position:absolute;left:-100%;height:60px;box-sizing:border-box;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);background-color:#24f4ff;font-family:var(--font-family-sans);font-weight:var(--font-rg);text-align:center}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{display:inline-flex;height:100%;align-items:center}.skip-to-content-visible.sc-z-skip-to-content-h,.sc-z-skip-to-content-h:focus{position:static;display:block}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-invisible.sc-z-skip-to-content{overflow:hidden;width:0;height:0}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-visible.sc-z-skip-to-content{width:initial;height:initial}.dark.sc-z-skip-to-content-h{background-color:var(--color-surface05);color:var(--color-surface01)}.light.sc-z-skip-to-content-h{border:var(--border-size-medium) solid var(--color-surface05);background-color:var(--color-surface01);color:var(--color-default-text)}@media (min-width: 768px){.sc-z-skip-to-content-h{text-align:start}}@media (min-width: 1152px){.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{padding:0 calc(var(--space-unit) * 3);border-right:var(--border-size-small) solid var(--color-surface05)}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content>a.z-link.link-invisible.sc-z-skip-to-content{overflow:initial;width:initial;height:initial}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:first-child{padding-left:0}.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child,.dark.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child,.light.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content:last-child{padding-right:0;border-right:none}.dark.sc-z-skip-to-content-h>.link-container.sc-z-skip-to-content{border-right:var(--border-size-small) solid var(--color-surface01)}}";
 const ZSkipToContentStyle0 = stylesCss;
@@ -48,7 +48,7 @@ const ZSkipToContent$1 = /*@__PURE__*/ proxyCustomElement(class ZSkipToContent e
         this.visible = false;
     }
     render() {
-        return (h(Host, { key: '06ee6c9f26ddc014c08c34bb81ddd990aa7c0282', class: {
+        return (h(Host, { key: '3d483b15edd6bf673a8b93a65016a558ce8f1648', class: {
                 [this.variant]: true,
                 "skip-to-content-visible": this.visible,
             } }, this.links.map((link, i) => {

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { p as Device } from './index2.js';
-import { e as convertJson, g as getDevice, h as handleKeyboardSubmit } from './utils.js';
+import { f as convertJson, g as getDevice, h as handleKeyboardSubmit } from './utils.js';
 import { d as defineCustomElement$2 } from './index9.js';
 const stylesCss = ":host{display:block;width:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{display:flex;width:inherit;flex-direction:column}main{position:relative;overflow:hidden;width:100%}main z-icon.scroll{position:absolute;z-index:10;top:50%;width:auto;margin:0 var(--space-unit);cursor:pointer;fill:var(--color-primary01);transition:0.6s ease}main .scroll.disabled{opacity:0.5;pointer-events:none}main .scroll.right{right:0}#slides{display:flex;flex-wrap:wrap;line-height:0px;overflow-y:hidden;transition:all 300ms}footer{display:grid;width:100%;height:56px;align-items:center;border-top:var(--border-size-medium) solid var(--color-surface02);grid-template:2 / 2;grid-template-areas:\"center center\" \"left right\"}footer>div{width:100%;align-items:center}footer .footer-center{grid-area:center}footer .footer-left{grid-area:left}footer .footer-right{grid-area:right}footer .bullet-container{display:flex;min-height:60px;align-items:center;justify-content:center;margin:0 auto}footer .bullet-container .bullet{width:8px;height:8px;margin:var(--space-unit) 2px;background-color:var(--gray200);border-radius:50%;pointer-events:none}footer .bullet-container .bullet.selected{background-color:var(--gray400)}main z-icon:focus,footer .bullet-container .bullet:focus{border-radius:50%;box-shadow:var(--shadow-focus-primary);outline:none !important}@media only screen and (min-width: 768px){footer{height:76px;border-top:var(--border-size-medium) solid var(--color-surface02);grid-template:1 / 1fr 2fr 1fr;grid-template-areas:\"left center right\"}footer .bullet-container .bullet{width:10px;height:10px;margin:var(--space-unit) 3px}}@media only screen and (min-width: 1025px){main z-icon.scroll{margin:0 10px}footer .bullet-container .bullet{width:16px;height:16px;margin:var(--space-unit) calc(var(--space-unit) * 0.5);cursor:pointer;pointer-events:auto}}";

package/dist/components/z-stepper-item.js CHANGED Viewed

@@ -23,7 +23,7 @@ const ZStepperItem$1 = /*@__PURE__*/ proxyCustomElement(class ZStepperItem exten
         return Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex);
     }
     render() {
-        return (h(Host, { key: '0994d3d3a8e89f1a93f17cb71baff1c1581bf7e4', role: "listitem" }, h("button", Object.assign({ key: '14becf7e97de2bd909f61cc3aa09b64b45f7ab30', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: '69f3cd00d2eeaafa65037d939218b2665d34b62b', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: '8d2ed47daa09ae26562bac42d262ba7c4c5320a4' }, h("slot", { key: '48004d92935fa78bd48df08a9eb3db11662a171b' })))));
+        return (h(Host, { key: 'c7c2e206c978ee691e94b18b0a16e55022390b59', role: "listitem" }, h("button", Object.assign({ key: '4f0f98a8d8e03c97d9e1c7d2440a01c2c490b295', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: 'd6630e5a219779138dce9b04ca812c97ac4a1ecb', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: '948c7baae4dfc60a90b366cb6e76db3133182ddd' }, h("slot", { key: '9eb55b00ce32f7e15142bb3f0ed0a1dc548445b7' })))));
     }
     static get style() { return ZStepperItemStyle0; }
 }, [1, "z-stepper-item", {

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

@@ -10,7 +10,7 @@ const ZStepper$1 = /*@__PURE__*/ proxyCustomElement(class ZStepper extends HTMLE
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '5fbfa9cc1b0e6f672f054427828d56560059c160', role: "list" }, h("slot", { key: 'd2c5abd53c5c9e8569696aafb6101b7878e1a10c' })));
+        return (h(Host, { key: '125c47235cf0b4e8e7ad2884399b3bfc74c6ce54', role: "list" }, h("slot", { key: '32c44da99f4a88d757b52bf65c328d506f0538c9' })));
     }
     static get style() { return ZStepperStyle0; }
 }, [1, "z-stepper"]);

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

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import './index2.js';
+import './breakpoints.js';
 import './iconset.js';
-const stylesCss = ":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}.table{min-width:max-content}";
+const stylesCss = ":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}";
 const ZTableStyle0 = stylesCss;
 const ZTable$1 = /*@__PURE__*/ proxyCustomElement(class ZTable extends HTMLElement {
@@ -36,7 +37,7 @@ const ZTable$1 = /*@__PURE__*/ proxyCustomElement(class ZTable extends HTMLEleme
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '2d8e50a74ff7ccf3c6dc4f5324a512177ad52f45', expandable: this.expandable }, h("div", { key: '5e1d9d44dc90ac06683bf5306f7eecadffe807fe', class: "table", role: "table" }, h("slot", { key: '12a615e336a4ad50390a2ab0b12b2d20b3503f06' }))));
+        return (h(Host, { key: '6fa1464a9d96267c0a1a45078a7b19e15930b2be', expandable: this.expandable }, h("div", { key: '9436f4627cab2b6c474bbfc803b64514cd152fb3', class: "table", role: "table" }, h("slot", { key: 'b9cf927ccd915cf55f4bb2e5a8943ceff347f9f7' }))));
     }
     get host() { return this; }
     static get style() { return ZTableStyle0; }

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

	@@ -1 +1 @@
1	- {"file":"z-table.js","mappings":"~~;;;;~~AAAA,MAAM,SAAS,GAAG,~~2VAA2V~~,CAAC;~~AAC9W~~,qBAAe,SAAS;;MCeXA,QAAM;;;;;wBAON,KAAK;0BAMH,KAAK;;IAEV,gBAAgB;QACtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;KAC7E;;;;IAOD,iBAAiB;QACf,IAAI,CAAC,0BAA0B,GAAG,IAAI,gBAAgB,CAAC;YACrD,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB,CAAC,CAAC;QACH,IAAI,CAAC,0BAA0B,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;YACjD,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,YAAY,CAAC;YAC/B,iBAAiB,EAAE,KAAK;SACzB,CAAC,CAAC;KACJ;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,0BAA0B,0CAAE,UAAU,EAAE,CAAC;KAC/C;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU,IAC/B,4DACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,IAEZ,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZTable"],"sources":["src/components/table/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/table/z-table/index.tsx"],"sourcesContent":[":host {\n --z-table--cells-padding: calc(var(--space-unit) * 2);\n\n position: relative;\n display: block;\n overflow: auto;\n max-width: 100%;\n box-sizing: border-box;\n background-color: var(--color-surface01);\n}\n\n:host([expandable]) {\n --z-table--expand-button-size: 40px;\n}\n\n:host([bordered]) {\n --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n~~\n.table {\n min-width: max-content;\n}\n~~","import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport \"../z-tbody/index\";\nimport \"../z-tfoot/index\";\nimport \"../z-thead/index\";\nimport \"../z-tr/index\";\n\n/*\n ZTable component.\n * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).\n * @cssprop --z-table--cells-padding - Padding of the cells.\n /\n@Component({\n tag: \"z-table\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTable {\n @Element() host: HTMLZTableElement;\n\n /\n Whether the table cells should show a border between them.\n /\n @Prop({reflect: true})\n bordered = false;\n\n /\n Whether the table contains some expandable rows.\n /\n @State()\n expandable = false;\n\n private updateExpandable(): void {\n this.expandable = this.host.querySelectorAll(\"z-tr[expandable]\").length > 0;\n }\n\n private expandableMutationObserver: MutationObserver;\n\n /\n Setup the table creating a mutation observer for the expandable attribute.\n */\n componentWillLoad(): void {\n this.expandableMutationObserver = new MutationObserver(() => {\n this.updateExpandable();\n });\n this.expandableMutationObserver.observe(this.host, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: [\"expandable\"],\n attributeOldValue: false,\n });\n }\n\n disconnectedCallback(): void {\n this.expandableMutationObserver?.disconnect();\n }\n\n render(): HTMLZTableElement {\n return (\n <Host expandable={this.expandable}>\n <div\n class=\"table\"\n role=\"table\"\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-table.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,8TAA8T,CAAC;AACjV,qBAAe,SAAS;;MCeXA,QAAM;;;;;wBAON,KAAK;0BAMH,KAAK;;IAEV,gBAAgB;QACtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;KAC7E;;;;IAOD,iBAAiB;QACf,IAAI,CAAC,0BAA0B,GAAG,IAAI,gBAAgB,CAAC;YACrD,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB,CAAC,CAAC;QACH,IAAI,CAAC,0BAA0B,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;YACjD,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,YAAY,CAAC;YAC/B,iBAAiB,EAAE,KAAK;SACzB,CAAC,CAAC;KACJ;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,0BAA0B,0CAAE,UAAU,EAAE,CAAC;KAC/C;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU,IAC/B,4DACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,IAEZ,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZTable"],"sources":["src/components/table/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/table/z-table/index.tsx"],"sourcesContent":[":host {\n --z-table--cells-padding: calc(var(--space-unit) * 2);\n\n position: relative;\n display: block;\n overflow: auto;\n max-width: 100%;\n box-sizing: border-box;\n background-color: var(--color-surface01);\n}\n\n:host([expandable]) {\n --z-table--expand-button-size: 40px;\n}\n\n:host([bordered]) {\n --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n","import {Component, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport \"../z-tbody/index\";\nimport \"../z-tfoot/index\";\nimport \"../z-thead/index\";\nimport \"../z-tr/index\";\n\n/*\n ZTable component.\n * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).\n * @cssprop --z-table--cells-padding - Padding of the cells.\n /\n@Component({\n tag: \"z-table\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTable {\n @Element() host: HTMLZTableElement;\n\n /\n Whether the table cells should show a border between them.\n /\n @Prop({reflect: true})\n bordered = false;\n\n /\n Whether the table contains some expandable rows.\n /\n @State()\n expandable = false;\n\n private updateExpandable(): void {\n this.expandable = this.host.querySelectorAll(\"z-tr[expandable]\").length > 0;\n }\n\n private expandableMutationObserver: MutationObserver;\n\n /\n Setup the table creating a mutation observer for the expandable attribute.\n */\n componentWillLoad(): void {\n this.expandableMutationObserver = new MutationObserver(() => {\n this.updateExpandable();\n });\n this.expandableMutationObserver.observe(this.host, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: [\"expandable\"],\n attributeOldValue: false,\n });\n }\n\n disconnectedCallback(): void {\n this.expandableMutationObserver?.disconnect();\n }\n\n render(): HTMLZTableElement {\n return (\n <Host expandable={this.expandable}>\n <div\n class=\"table\"\n role=\"table\"\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -10,7 +10,7 @@ const ZTbody$1 = /*@__PURE__*/ proxyCustomElement(class ZTbody extends HTMLEleme
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'f3e13d724ae83c0117eafa2bd141a1b9319f0331', role: "rowgroup" }, h("slot", { key: 'f84d2b79230cb6b8305c0b01f4a48f8811634421' })));
+        return (h(Host, { key: '8520398deeb7fec7d7aee91d87e39775f93355c6', role: "rowgroup" }, h("slot", { key: 'a73aff9d76af07fa46c373e362ac102349c844ed' })));
     }
     static get style() { return ZTbodyStyle0; }
 }, [1, "z-tbody"]);

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

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './index4.js';
 import { d as defineCustomElement$3 } from './index9.js';
 import { d as defineCustomElement$2 } from './index22.js';
-const stylesCss = ":host{position:relative;display:flex;min-width:128px;box-sizing:border-box;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([show-menu])::after{display:inline-block;height:100%;margin-right:calc(var(--space-unit) * 4);background:transparent;content:\"\";user-select:none}.cell--menu-container{position:absolute;z-index:1;top:var(--space-unit);right:var(--space-unit)}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu=\"hover\"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu=\"hover\"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}";
+const stylesCss = ":host{position:relative;display:flex;max-width:100%;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{box-sizing:border-box}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:flex;width:100%;height:100%;align-items:center}:host([show-menu]) .cell--content{column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{z-index:1;opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu=\"hover\"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu=\"hover\"]:hover) .cell--menu-container{z-index:1;opacity:1;pointer-events:all}}";
 const ZTdStyle0 = stylesCss;
 const ZTd$1 = /*@__PURE__*/ proxyCustomElement(class ZTd extends HTMLElement {
@@ -36,7 +36,7 @@ const ZTd$1 = /*@__PURE__*/ proxyCustomElement(class ZTd extends HTMLElement {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '36a62d2c751b3b889c7f69280418e95ff02192d5', role: "cell", "menu-open": this.isMenuOpen }, h("slot", { key: '6d593df3a5d84033f5ec055a00dc972d113ac4cb' }), this.showMenu && (h("div", { key: '77fbfdd8dc31fcfb6694461c8c0ed430323c3926', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'caf153b8ba5861b3dc7eabf966cdfdd9d3b197da', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: 'd89b8e0e5b8e622a6e9a08640bff28d64ff0eb07', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '339066d4dd0d6d57ac2358e6a8105aa690b2ca06', name: "contextual-menu" }))))));
+        return (h(Host, { key: '36a62d2c751b3b889c7f69280418e95ff02192d5', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: 'd9cdf988ecedb17c06b7081919a77122b5d28660', class: "cell--content" }, h("slot", { key: 'f5627d2fea6d851092356ba32932f7ccc1031398' }), this.showMenu && (h("div", { key: 'f58a7b0a33b62aeca07a2fa21958a714345b6dac', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '6b96fb5d5f7108f29a010f93e68f4e9e1b249ab1', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: 'a73b3a6c8b3aff6c689f14c2b90bc4a2626cff3b', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '9444ad52d7660466cb784e565306fd72922d5426', name: "contextual-menu" })))))));
     }
     get host() { return this; }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"z-td.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,~~gjCAAgjC~~,CAAC;~~AACnkC~~,kBAAe,SAAS;;MCWXA,KAAG;;;;;;;sBAaL,KAAK;wBAQkB,IAAI;+BAMA,eAAe,CAAC,IAAI;0BAM3C,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;KAC5C;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU,IAE1B,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,qCAAqC,IAC9C,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C,EACF,kEACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe,IAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,~~CACI~~,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZTd"],"sources":["src/components/table/cells/z-td/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/*\n ZTd component.\n * @slot - ZTd content.\n /\n@Component({\n tag: \"z-td\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTd {\n @Element() host: HTMLZTdElement;\n\n /\n Number of columns that the cell should span.\n /\n @Prop()\n colspan: number;\n\n /\n Whether the cell should stick.\n /\n @Prop({reflect: true})\n sticky = false;\n\n /\n Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n /\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /\n Set the popover position, the default is \"auto\".\n /\n @Prop()\n popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n /\n Store the open state of the menu.\n /\n @State()\n isMenuOpen = false;\n\n private menuTrigger: HTMLZButtonElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /\n Emitted when the value of the `colspan` changes.\n */\n @Event({\n bubbles: true,\n cancelable: false,\n })\n colspanChange: EventEmitter<number>;\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n\n this.colspanChange.emit(this.colspan \|\| 1);\n }\n\n private onMenuButtonClick(ev: MouseEvent): void {\n ev.stopPropagation();\n this.popoverEl.open = !this.popoverEl.open;\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZTdElement {\n return (\n <Host\n role=\"cell\"\n menu-open={this.isMenuOpen}\n >\n <slot></slot>\n {this.showMenu && (\n <div class=\"cell--menu-container prevent-expand\">\n <z-button\n variant={ButtonVariant.TERTIARY}\n icon=\"contextual-menu\"\n size={ControlSize.X_SMALL}\n ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n onClick={this.onMenuButtonClick.bind(this)}\n />\n <z-popover\n class=\"cell-popover\"\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.menuTrigger as HTMLElement}\n onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n position={this.popoverPosition}\n >\n <slot name=\"contextual-menu\"></slot>\n </z-popover>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-td.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,2hCAA2hC,CAAC;AAC9iC,kBAAe,SAAS;;MCWXA,KAAG;;;;;;;sBAaL,KAAK;wBAQkB,IAAI;+BAMA,eAAe,CAAC,IAAI;0BAM3C,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;KAC5C;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU,IAE1B,4DAAK,KAAK,EAAC,eAAe,IACxB,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,qCAAqC,IAC9C,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C,EACF,kEACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,IAAI,CAAC,eAAe,IAE9B,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZTd"],"sources":["src/components/table/cells/z-td/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/*\n ZTd component.\n * @slot - ZTd content.\n /\n@Component({\n tag: \"z-td\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTd {\n @Element() host: HTMLZTdElement;\n\n /\n Number of columns that the cell should span.\n /\n @Prop()\n colspan: number;\n\n /\n Whether the cell should stick.\n /\n @Prop({reflect: true})\n sticky = false;\n\n /\n Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n /\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /\n Set the popover position, the default is \"auto\".\n /\n @Prop()\n popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n /\n Store the open state of the menu.\n /\n @State()\n isMenuOpen = false;\n\n private menuTrigger: HTMLZButtonElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /\n Emitted when the value of the `colspan` changes.\n */\n @Event({\n bubbles: true,\n cancelable: false,\n })\n colspanChange: EventEmitter<number>;\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n\n this.colspanChange.emit(this.colspan \|\| 1);\n }\n\n private onMenuButtonClick(ev: MouseEvent): void {\n ev.stopPropagation();\n this.popoverEl.open = !this.popoverEl.open;\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZTdElement {\n return (\n <Host\n role=\"cell\"\n menu-open={this.isMenuOpen}\n >\n <div class=\"cell--content\">\n <slot></slot>\n {this.showMenu && (\n <div class=\"cell--menu-container prevent-expand\">\n <z-button\n variant={ButtonVariant.TERTIARY}\n icon=\"contextual-menu\"\n size={ControlSize.X_SMALL}\n ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n onClick={this.onMenuButtonClick.bind(this)}\n />\n <z-popover\n class=\"cell-popover\"\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.menuTrigger as HTMLElement}\n onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n position={this.popoverPosition}\n >\n <slot name=\"contextual-menu\"></slot>\n </z-popover>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -11,7 +11,7 @@ const ZTfoot$1 = /*@__PURE__*/ proxyCustomElement(class ZTfoot extends HTMLEleme
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: 'b872f68fd9e643528d02adb7bd76f8377a59fcdc', role: "rowgroup" }, h("slot", { key: '6ebdc491ee2459d415a53fb96e5f27405704a99f' })));
+        return (h(Host, { key: 'ad89fa705c3e70275166d5146ab915a286feedfe', role: "rowgroup" }, h("slot", { key: 'cb66c0a5c01972c54100efade79a91241baadc9a' })));
     }
     static get style() { return ZTfootStyle0; }
 }, [1, "z-tfoot", {

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

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './index4.js';
 import { d as defineCustomElement$3 } from './index9.js';
 import { d as defineCustomElement$2 } from './index22.js';
-const stylesCss = ":host{position:relative;display:flex;min-width:128px;box-sizing:border-box;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([show-menu])::after{display:inline-block;height:100%;margin-right:calc(var(--space-unit) * 4);background:transparent;content:\"\";user-select:none}.cell--menu-container{position:absolute;z-index:1;top:var(--space-unit);right:var(--space-unit)}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu=\"hover\"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu=\"hover\"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}:host{background-color:var(--color-surface02);font-weight:var(--font-sb)}:host([sortable]){cursor:pointer}.z-th--sort-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin-top:auto;background-color:transparent;cursor:pointer}.z-th--sort-button:focus{box-shadow:var(--shadow-focus-primary);outline:none}";
+const stylesCss = ":host{position:relative;display:flex;max-width:100%;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{box-sizing:border-box}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:flex;width:100%;height:100%;align-items:center}:host([show-menu]) .cell--content{column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{z-index:1;opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu=\"hover\"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu=\"hover\"]:hover) .cell--menu-container{z-index:1;opacity:1;pointer-events:all}}:host{z-index:1;padding:0;background-color:var(--color-surface02);font-weight:var(--font-sb)}.cell--content{padding:calc(var(--space-unit) * 2)}:host([show-sorting]) .cell--content{column-gap:var(--space-unit)}.z-th--sort-button{padding:0;border:none;background-color:transparent;cursor:pointer;outline:none}@media (min-width: 768px) and (hover: hover){:host([show-sorting=\"hover\"]) .z-th--sort-button{opacity:0;pointer-events:none}:host([show-sorting=\"hover\"]:hover) .z-th--sort-button,:host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible,:host([show-sorting=\"always\"]) .z-th--sort-button{opacity:1;pointer-events:all}}:host([show-sorting=\"hover\"]:hover) .z-th--sort-button::after,:host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible::after,:host([show-sorting=\"always\"]) .z-th--sort-button::after{position:absolute;top:6px;left:6px;width:calc(100% - 12px);height:calc(100% - 10px);background-color:transparent;content:\"\"}.z-th--sort-button:focus:focus-visible::after,.z-th--sort-button--active::after{box-shadow:var(--shadow-focus-primary)}";
 const ZThStyle0 = stylesCss;
 const ZTh$1 = /*@__PURE__*/ proxyCustomElement(class ZTh extends HTMLElement {
@@ -15,10 +15,12 @@ const ZTh$1 = /*@__PURE__*/ proxyCustomElement(class ZTh extends HTMLElement {
         this.sort = createEvent(this, "sort", 7);
         this.colspan = undefined;
         this.showMenu = null;
+        this.showSorting = null;
         this.sticky = false;
         this.sortDirection = undefined;
         this.popoverPosition = PopoverPosition.AUTO;
         this.isMenuOpen = false;
+        this.isSortingActive = false;
     }
     /**
      * Get the value to set to the `aria-sort` attribute based on the current sort direction.
@@ -31,16 +33,17 @@ const ZTh$1 = /*@__PURE__*/ proxyCustomElement(class ZTh extends HTMLElement {
     }
     /**
      * Handle the click on the sort button.
+     * This method will also handle the z-index logic.
      * @fires sort
      */
     handleSort() {
         if (!this.sortDirection) {
+            this.isSortingActive = false;
             return;
         }
         this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;
-        this.sort.emit({
-            sortDirection: this.sortDirection,
-        });
+        this.isSortingActive = true;
+        this.sort.emit({ sortDirection: this.sortDirection });
     }
     updateColspan() {
         if (this.colspan) {
@@ -54,7 +57,10 @@ const ZTh$1 = /*@__PURE__*/ proxyCustomElement(class ZTh extends HTMLElement {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '222509e3075cd7a6668301f8b54cebd3af7bd843', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection }, h("slot", { key: '728dffd6851b3b9f6647a136c0d84d0da10c894b' }), this.sortDirection && (h("button", { key: 'a75b468b0057f404fdfcafd77cf63f10999f274a', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '9d4ac199ba40228afd8b4ac087effde4ae37f55b', name: this.sortDirection === SortDirection.ASC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '4769a6dfa1e6222448b1d409746dbe1f6420cc5d', class: "cell--menu-container" }, h("z-button", { key: '90951859a7fdcaddec8769e95d8a65de5c7e5ff7', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: '3066d766feab4b810d41b78a5f3801cbffa5688d', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '9bf90081ba6d5c82cdd9c69f0dd536bda756b8af', name: "contextual-menu" }))))));
+        return (h(Host, { key: '857c07ccf4b5852fadc24cf8e841285c62f6510d', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'aa16c497962365ce91fe97161fa4efbc13010280', class: "cell--content" }, h("slot", { key: '78ede301744ec00611c4ded135d8bc69fa6e1caf' }), this.showSorting && (h("button", { key: 'c5578d4029981256383e114cbf6b909e4d7d6960', class: {
+                "z-th--sort-button": true,
+                "z-th--sort-button--active": this.isSortingActive,
+            }, type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: 'd120d4b16086dd45cc218f02d1a098c7f60aff45', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '730770a6fd13fe34cc20bfe5e85e55d801374c54', class: "cell--menu-container" }, h("z-button", { key: '695d20baf42216dca156e842108e71af89b042dd', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: '381fae18767cd54cf88d05acd468d58b84988e59', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '570614fdf3d0e5ef44efc7040d8472a4244ed409', name: "contextual-menu" })))))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -64,10 +70,12 @@ const ZTh$1 = /*@__PURE__*/ proxyCustomElement(class ZTh extends HTMLElement {
 }, [1, "z-th", {
         "colspan": [2],
         "showMenu": [513, "show-menu"],
+        "showSorting": [513, "show-sorting"],
         "sticky": [516],
         "sortDirection": [1025, "sort-direction"],
         "popoverPosition": [1, "popover-position"],
-        "isMenuOpen": [32]
+        "isMenuOpen": [32],
+        "isSortingActive": [32]
     }, undefined, {
         "colspan": ["updateColspan"]
     }]);