npm - @zanichelli/albe-web-components - Versions diffs - 16.0.0-rc2 → 16.0.0 - Mend

@zanichelli/albe-web-components 16.0.0-rc2 → 16.0.0

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

package/dist/cjs/z-menu.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"z-menu.entry.cjs.js","mappings":"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","names":["h","Host"],"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}\n\n:host {\n position: relative;\n display: inline-flex;\n flex-direction: column;\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 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\nbutton.menu-label {\n cursor: pointer;\n}\n\n.menu-label:focus-within {\n z-index: 1;\n padding-right: calc(var(--space-unit) 0.5);\n padding-left: calc(var(--space-unit) * 0.5);\n margin-right: calc(var(--space-unit) * -0.5);\n margin-left: calc(var(--space-unit) * -0.5);\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}\n\n:host(:is([active], [open])) .menu-label-content,\n.menu-label:focus-within .menu-label-content {\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 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 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-5);\n font-weight: inherit;\n letter-spacing: 0.36px; /* increasing the letter spacing of the regular text helps reduce the size difference between regular and bold text /\n line-height: 1.2;\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\";\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? = false;\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 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 @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 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.dataset.text = item.textContent;\n });\n }\n\n private renderMenuLabel(): HTMLButtonElement \| HTMLDivElement {\n if (this.hasContent) {\n return (\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 >\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 );\n }\n\n return (\n <div class=\"menu-label\">\n <div class=\"menu-label-content\">\n <slot onSlotchange={this.onLabelSlotChange}></slot>\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.entry.cjs.js","mappings":"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","names":["KeyboardCode","h","Host"],"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}

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5dc4a8de.js');
-const index$1 = require('./index-e3835c94.js');
+const index = require('./index-e801ae96.js');
+const index$1 = require('./index-bab7a651.js');
 const stylesCss = ":host{position:absolute;z-index:2;top:0;left:0;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-alert{height:calc(var(--space-unit) * 6)}.relative-container{position:relative;display:grid;align-items:center;padding:0;grid-column-gap:var(--space-unit);grid-template-columns:18px auto 46px;grid-template-rows:1fr;outline:none}.relative-container::-moz-focus-inner{border:0}.alert-external-wrapper.remove-alert{border:var(--border-size-medium) solid var(--color-surface02);border-top:none}:host div.add-alert{background:var(--color-success-inverse)}:host div.remove-alert{background:var(--color-warning-inverse)}:host div>.content-text{color:var(--color-surface05);font-size:14px;letter-spacing:0.16px;line-height:20px}:host div>.content-action{height:20px;color:var(--color-primary01);cursor:pointer;font-size:12px;font-weight:var(--font-sb);letter-spacing:0.32px;line-height:20px}:host div>z-icon{justify-self:center}";
 const ZMyzCardAlertStyle0 = stylesCss;
@@ -56,7 +56,7 @@ const ZMyzCardAlert = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'ee3f657b10628aa1d8b655fbad1f7f2d55d0cfcc', class: "alert-external-wrapper " + this.retrieveClass() }, index.h("z-alert", { key: 'f90c4944719e9d9842a159727be73e7d877aca9a', type: this.getAlertType() }, index.h("div", { key: '414b27076e7e807f79987b8d1bf57724ff7aba21', class: "relative-container" }, index.h("z-icon", { key: '4a17b0046552751eb1b4f78b666038a34950f669', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), index.h("span", { key: 'dc7059e99b1cb56c47f0ce112f2dcabf0cdafb47', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (index.h("span", { key: 'fe84b58a497310f2936b14fd06808717a572feb5', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
+        return (index.h("div", { key: 'e488b304fcdd145b3ce0ba375d36a997a646eec9', class: "alert-external-wrapper " + this.retrieveClass() }, index.h("z-alert", { key: '256f5d68375a9c8c187785cfdbd6272b8cc449f9', type: this.getAlertType() }, index.h("div", { key: '9f3d7e43b28f3fc92bf1e627475af9a9f0464799', class: "relative-container" }, index.h("z-icon", { key: '6c9e26abc686e0d6020d7c6398a8575e6e8ac543', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), index.h("span", { key: 'b4b997286c4e5250c5b856f0d375ad49162c92df', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (index.h("span", { key: '18020fe9e8180577a168a25c0ba17464cedf70c0', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
                 this.handleActionButtonClick(e);
             }, onKeyPress: (e) => {
                 this.handleSpaceKeyPress(e);

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5dc4a8de.js');
-const index$1 = require('./index-e3835c94.js');
+const index = require('./index-e801ae96.js');
+const index$1 = require('./index-bab7a651.js');
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host z-myz-card{--card-overflow:visible}:host>div{position:relative;width:100%;height:522px;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out,\n    -webkit-transform 0.5s ease-out}:host>div .content{position:relative;z-index:2;width:100%;height:522px;transform-style:preserve-3d;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out,\n    -webkit-transform 0.5s ease-out}:host>div .content.flipped{margin-top:-2px;transform:rotateY(180deg)}:host>div .front,:host>div .back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden}:host>div .front{z-index:2;top:0;left:0;transform:rotateY(0deg)}:host>div .front z-button{position:absolute;z-index:3;top:calc(var(--space-unit) * 0.5);left:calc(-1 * var(--space-unit))}:host>div .back{z-index:1;top:0;left:0;display:flex;justify-content:center;padding:0 var(--space-unit);margin-left:calc(-1 * var(--space-unit));transform:rotateY(180deg)}.hide-info{display:none}";
 const ZMyzCardDictionaryStyle0 = stylesCss;
@@ -27,7 +27,7 @@ const ZMyzCardDictionary = class {
         this.cardFlipped.emit(showBack);
     }
     render() {
-        return (index.h("div", { key: 'ed889966f8549cc26bb5a74907698789dc5589db' }, index.h("z-myz-card", { key: '2f800d33d6ad0b9c0da423ae300d166c5cff1138' }, index.h("z-myz-card-header", { key: 'ac3b947d1bc44020038864cee354d25e03e35520', titolo: this.name }), index.h("div", { key: '510d58895ab181f57bf347181e9800e2905051ac', class: `content ${this.flipped ? "flipped" : ""}` }, index.h("div", { key: '5edbb595e686ab20daf7627d8853bac7ded0b400', class: "front" }, index.h("z-myz-card-body", { key: '4429043e3309372204e1327b63af4bb7070e8821' }, index.h("z-myz-card-cover", { key: '4131ba8eac6d1b4de4ebb2132b90b23c84a4e208', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), index.h("z-button", { key: '868186b2ce493dcea4927f02678da0014adde59e', class: { "hide-info": this.hideinfobtn }, variant: index$1.ButtonVariant.SECONDARY, icon: "informationsource", size: index$1.ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), index.h("div", { key: '82831b99ec4d728738523fe6cc4ad63a63d503f1', class: "back" }, index.h("slot", { key: 'e636f908bec08c14febee93e62a3b053b46e5cfb', name: "info" }))), index.h("slot", { key: 'c7fc3bc013651830a0777c1c41d7c11ea9d90041' }))));
+        return (index.h("div", { key: 'd86e3c2140c9100c3bac377380a4fff77d089153' }, index.h("z-myz-card", { key: '34a3f2a9bfe747865ad3a4dca7f0ec106b1fe567' }, index.h("z-myz-card-header", { key: 'dc172fabf38338d7fd89af67a80da6918a1c0918', titolo: this.name }), index.h("div", { key: '8d0b945f35287a60658cf37b15440f8b66c98b65', class: `content ${this.flipped ? "flipped" : ""}` }, index.h("div", { key: '7b205650b760c3fb8f7d538bbfe5d2a73e237992', class: "front" }, index.h("z-myz-card-body", { key: 'c8fe772333350bc8ef4643f04e0585b80fea7e83' }, index.h("z-myz-card-cover", { key: 'a1b65f443fdf541dee8b21fb3709362ed6eaff4f', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), index.h("z-button", { key: 'e5b8bb0a7543a5f1e3954564f4cd28c11963b0aa', class: { "hide-info": this.hideinfobtn }, variant: index$1.ButtonVariant.SECONDARY, icon: "informationsource", size: index$1.ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), index.h("div", { key: 'ce3cfb76aac872409b162b80c6659799c17ea6ed', class: "back" }, index.h("slot", { key: 'eafdc479751d3326775dd01f1ced2ac9a9df189f', name: "info" }))), index.h("slot", { key: '4e4d018a5ca6c9282985d7fb978abb738675fa52' }))));
     }
 };
 ZMyzCardDictionary.style = ZMyzCardDictionaryStyle0;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5dc4a8de.js');
+const index = require('./index-e801ae96.js');
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div>footer{height:128px;box-sizing:border-box;padding:var(--space-unit) calc(var(--space-unit) * 2) 0;border-top:var(--border-size-medium) solid var(--color-surface03);border-radius:0 0 var(--border-radius) var(--border-radius);color:var(--color-surface05);font-size:16px;line-height:24px}:host>div>footer>div.top,:host>div>footer>div.bottom{height:60px}";
 const ZMyzCardFooterSectionsStyle0 = stylesCss;
@@ -12,7 +12,7 @@ const ZMyzCardFooterSections = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'c293773e2f737912b63345f9524e03a374f0c536' }, index.h("footer", { key: '1a8148b580eef438c1a68d5a134bf3b224846946' }, index.h("div", { key: '49863a18b930dcd3edb2a049c9e77c858be1dc76', class: "top" }, index.h("slot", { key: '00bdadaa655b1018e42ed72fefd4d21b1a0529fb', name: "top" })), index.h("div", { key: '24e4dfb5e2eaac5ef6c61dd2303e9cd9e8832b68', class: "bottom" }, index.h("slot", { key: 'b8791e5c065a9ce4b4701444c137295123f99d3d', name: "bottom" })))));
+        return (index.h("div", { key: '460ccb7066c598d7712f468b8b77850190fd6088' }, index.h("footer", { key: '14789b182cd02636149dd501d8963e23bf9893ff' }, index.h("div", { key: 'f618c2e4c24c9488aa6090c6629d846c72b9868c', class: "top" }, index.h("slot", { key: '9fdbc5aeb537308c6a0a1197de2490749d8710a8', name: "top" })), index.h("div", { key: '900ff46313ca3d71e7e501f6c7d9e531ec41cdfb', class: "bottom" }, index.h("slot", { key: 'abac3671bea6c55bb0e18d6c05899e4ae9be3895', name: "bottom" })))));
     }
 };
 ZMyzCardFooterSections.style = ZMyzCardFooterSectionsStyle0;

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5dc4a8de.js');
-const index$1 = require('./index-e3835c94.js');
+const index = require('./index-e801ae96.js');
+const index$1 = require('./index-bab7a651.js');
 const stylesCss = "footer{position:relative;z-index:5;top:0;width:auto;height:calc(var(--space-unit) * 6);padding:0;border-top:var(--border-size-medium) solid var(--color-surface03);margin:0;background-color:var(--color-surface01);border-radius:0 0 var(--border-radius) var(--border-radius);color:var(--color-surface05);font-family:var(--font-family-sans);font-weight:var(--font-rg);transition:height 500ms ease-in-out,\n    top 500ms ease-in-out}footer.real,footer.trial,footer.temp{border-top:var(--border-size-medium) solid var(--blue100)}footer .bold{font-family:var(--font-family-sans);font-weight:var(--font-sb)}footer>p{overflow:hidden;height:40px;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) var(--space-unit) calc(var(--space-unit) * 2);margin:0;background-color:var(--color-surface01);font-family:var(--font-family-sans);font-size:16px;font-weight:var(--font-rg);line-height:22px;transition:all 200ms linear}footer.isopen>p{background-color:var(--gray200);font-size:14px;font-weight:var(--font-sb);transition:all 200ms linear}footer.isopen.real>p,footer.isopen.trial>p,footer.isopen.temp>p{background-color:var(--blue100)}footer .visible{display:block}footer .hidden{display:none}footer>div.content{overflow:hidden;height:60px}footer>div.content>div:not(.slot-handler){padding:var(--space-unit) calc(var(--space-unit) * 2)}footer>div.content>div>p{overflow:hidden;height:20px;padding:0;margin:0;font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap}footer>div.content>div>p.year-isbn{display:flex;flex-direction:row;justify-content:space-between;padding-top:var(--space-unit)}footer>div.content>div>p.year-isbn>span.isbn{overflow:hidden;text-overflow:ellipsis}footer.isopen>div.content>div:not(.slot-handler){height:68px}footer.isopen>div.content>div>p.authors{height:40px;text-overflow:initial;white-space:initial}footer.isopen>div.content>div>p.year-isbn{height:50px;flex-direction:column;padding-left:0}footer.isopen>div.content>div>p.year-isbn>span.isbn{display:inline-grid;padding-left:0}footer.isopen{top:-212px;height:295px;transition:height 500ms ease-in-out,\n    top 500ms ease-in-out}footer.isopen.custom-content{top:-292px}footer.isopen>div.content{height:280px;transition:height 500ms ease-in-out,\n    top 500ms ease-in-out}footer.isopen.custom-content>div.content{height:230px}.toggle{position:absolute;z-index:10;top:-24px;left:16px}.faded{opacity:0.3;pointer-events:none}footer>p.custom-content,footer .content.custom-content{display:none}footer.isopen>p.custom-content,footer.isopen .content.custom-content{display:block}div.wrapper{position:relative;height:100%}div.wrapper ::slotted([slot=\"content\"]){position:absolute;z-index:10;top:calc(var(--space-unit) * 2);display:block;width:100%;height:112px;box-sizing:border-box;padding:0 calc(var(--space-unit) * 2);border-top:var(--border-size-medium) solid transparent;background:var(--color-white)}div.wrapper.isopen ::slotted([slot=\"content\"]){top:0;bottom:0;height:128px;padding:calc(var(--space-unit) * 2);border-color:var(--blue100)}";
 const ZMyzCardFooterStyle0 = stylesCss;
@@ -64,7 +64,7 @@ const ZMyzCardFooter = class {
         return this.host.querySelector("[slot=list] > li a");
     }
     render() {
-        return (index.h("div", { key: 'e5711063557dce84367650a81a3313e4d4755ca7', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, index.h("footer", { key: '81fe8ba76037d6aabf6a34123ef7e16b9fdcf6bf', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, index.h("span", { key: 'fe8a8eb5e9668ef98052aa77ea006e36e1da4362', class: "toggle" }, index.h("slot", { key: '1b31d051074a5c49783adced5ab8a08ffce34c2c', name: "toggle" })), this.titolo && index.h("p", { key: 'fd5184ba3211dcaec0fbbada7e66c2424e8683a1', class: { "custom-content": this.customContent } }, this.titolo), index.h("div", { key: 'eb56f5377d285fa66090865f3750267827a55b30', class: { "content": true, "custom-content": this.customContent } }, index.h("div", { key: '73df88cb7871a4aeb47414cdfb2c248f4cae0454' }, index.h("p", { key: 'bcee7b1836e87540bb9ea7a0dae9b20717acb84b', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, index.h("span", { key: '1a2741b228850ea9b438e2d0d3bbe161f1c58223', title: this.getTitleAuthors() }, index.h("span", { key: '78e8afea170e944a119670a1f3ff35d9b1e68cca', "aria-description": "Autori", class: "bold" }, this.autori))), index.h("p", { key: '46339663289bca4d4c0d18f5a8a1e5c7f967a2c7', class: "year-isbn" }, index.h("span", { key: '885b4e716717a5e7faf0b2cdd0eb0a120c6b02a5', class: "isbn" }, index.h("span", { key: '8eb8fe819c2208bcd85a4ff75bcea45d126bbcfd' }, index.h("span", { key: 'adce63e9a8982d61692c899da383374914db342d', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), index.h("div", { key: 'b36ed0288ce7e14a3c8770cd097f712440d10c5b', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, index.h("slot", { key: 'f7eca7603fd10d49a68f7c41505d50ee185e206f', name: "list" })))), this.customContent && index.h("slot", { key: '4f80af2d5fe5bba71f5d1704f4816aa395effe88', name: "content" })));
+        return (index.h("div", { key: '5e52bb4e61efb15a9e45cfc35635edf162c1348b', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, index.h("footer", { key: 'e58bbf1f64147496f82422ea45e0c7769145f5d2', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, index.h("span", { key: '7733adaf9bd6739ce95b53c963c5fef169fe5617', class: "toggle" }, index.h("slot", { key: '43c3727d4206f3538f82298da583634338df147f', name: "toggle" })), this.titolo && index.h("p", { key: '8d895c1628c00fdf053cd413c93a71bd2ed7fe2e', class: { "custom-content": this.customContent } }, this.titolo), index.h("div", { key: '8bc2964e1e62e7dc2b9c4198fc3d19572702fc04', class: { "content": true, "custom-content": this.customContent } }, index.h("div", { key: '75c1a00ee5b83cc1202ff7ea8ae96fab7d24e09a' }, index.h("p", { key: 'b2a545232bba45aac1aa7615dead6354327dcbff', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, index.h("span", { key: '4869f5bb8a75bc51b3fddde7fe46a23811d061f9', title: this.getTitleAuthors() }, index.h("span", { key: '43f8c9ff3eb8a794f9be628b8d0a1d8853bc1510', "aria-description": "Autori", class: "bold" }, this.autori))), index.h("p", { key: '15ed7ba2687e6aafdf7704da66dcbcee7ec25445', class: "year-isbn" }, index.h("span", { key: 'a05d17196f49c90c025ef545586dc162444efd03', class: "isbn" }, index.h("span", { key: '6481dac818d211c724aaddf1e17cf71637099376' }, index.h("span", { key: '6d27dc2a43d5e6e3367ad77e05c76b6d096f08a1', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), index.h("div", { key: '6df905d3cedea3ed63029851103a4a4f919e8b20', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, index.h("slot", { key: 'b71e8974d82d8b45f1bd53d8d73b893924a8a84d', name: "list" })))), this.customContent && index.h("slot", { key: 'a2269175a16d7f2f2cdc48035969e6fab3d64052', name: "content" })));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5dc4a8de.js');
+const index = require('./index-e801ae96.js');
 const stylesCss = "button{display:flex;width:42px;width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 6);align-items:center;justify-content:center;padding:0;border:none;border-left:var(--border-size-medium) solid var(--color-surface03);margin:0;background:none;border-radius:0 var(--border-radius) 0 0;color:var(--color-primary01);cursor:pointer;fill:var(--color-primary01);outline:none}button:active,button:focus{color:var(--blue700);fill:var(--blue700)}button>span{display:flex;width:28px;height:28px;align-items:center;justify-content:center;border:0;border-radius:var(--border-radius)}button:hover>span{background:var(--color-primary03)}button:focus>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-focus-primary)}button:active>span{background:var(--color-surface01);border-radius:var(--border-radius);box-shadow:var(--shadow-2)}button:disabled{cursor:not-allowed}button:disabled>span{background:none;box-shadow:var(--shadow-0);pointer-events:none}button:disabled>span>z-icon{fill:var(--color-surface03)}button::-moz-focus-inner{border:0}";
 const ZMyzCardIconStyle0 = stylesCss;
@@ -15,7 +15,7 @@ const ZMyzCardIcon = class {
         this.ariaLabel = "";
     }
     render() {
-        return (index.h("button", { key: 'd07c0ca573477aa1045a68da5f4fe528243ce36f', disabled: this.isdisabled, "aria-label": this.ariaLabel }, index.h("span", { key: 'd4fbc76e9d771efc6fba0f0f311e30261c4bb070' }, index.h("z-icon", { key: '7a27b69214edf71caff54e1b0619f1b8ce7f1003', name: this.icon, width: 16, height: 16 }))));
+        return (index.h("button", { key: '204f6d7ba43b9300ce8f4fbbd7d27849e7db1c8a', disabled: this.isdisabled, "aria-label": this.ariaLabel }, index.h("span", { key: '660c3c2bd313decba37ea630f83ce74c0b2f4153' }, index.h("z-icon", { key: '22fdf366571f73909d2411a0b745184a6d39b098', name: this.icon, width: 16, height: 16 }))));
     }
 };
 ZMyzCardIcon.style = ZMyzCardIconStyle0;

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5dc4a8de.js');
-const index$1 = require('./index-e3835c94.js');
-const utils = require('./utils-1a8655c7.js');
+const index = require('./index-e801ae96.js');
+const index$1 = require('./index-bab7a651.js');
+const utils = require('./utils-6bd8c55e.js');
 require('./breakpoints-5c22092a.js');
 const stylesCss = ":host{width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:relative;display:grid;width:calc(100% + calc(var(--space-unit) * 2));height:402px;box-sizing:border-box;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--color-primary01);margin-left:calc(-1 * var(--space-unit));background:var(--color-surface01);border-radius:0;box-shadow:0 2px 4px 0 rgb(66 69 72 / 35%)}:host>div>z-icon{position:absolute;top:var(--space-unit);right:var(--space-unit);cursor:pointer;fill:var(--color-primary01)}:host>div>div.cta-wrapper{display:flex;flex-flow:column nowrap;align-self:end;justify-content:space-between}:host>div>div.content-wrapper{position:relative;overflow:hidden;align-self:stretch}:host>div>div.content-wrapper>section{box-sizing:border-box;padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface04);color:var(--color-surface05);font-size:14px;line-height:20px}:host>div>div.content-wrapper>section:last-child{border-bottom:none}:host>div>div.content-wrapper>section.info-wrapper{position:relative;overflow:hidden;box-sizing:border-box}:host>div>div.content-wrapper>section.info-wrapper.hidden::after{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg, rgb(255 0 0 / 0%), rgb(255 0 0 / 0%) 60%, white);content:\"\";pointer-events:none}:host>div>div.content-wrapper>section>span.license-heading{display:flex;justify-content:space-between}:host>div>div.content-wrapper>section>span.license-heading>span.expired{color:var(--color-secondary02);font-size:12px;font-weight:600}:host>div>div.content-wrapper>section>span.license-heading>span.expiring{color:var(--color-warning01);font-size:12px;font-weight:600}:host>div>div.content-wrapper>z-popover{position:absolute;top:0;left:calc(var(--space-unit) * 4)}";
@@ -122,7 +122,7 @@ const ZMyzCardInfo = class {
         return (index.h("section", { ref: (el) => (this.offlineLicenseWrapper = el) }, index.h("span", { class: "license-heading" }, index.h("span", null, "Licenza offline"), this.setExpirationLicenseMessage("offline")), "Scadenza il ", index.h("b", null, this.cardData.offlineLicense.expiration), index.h("br", null), "Installazioni disponibili: ", index.h("b", null, this.cardData.offlineLicense.installations)));
     }
     render() {
-        return (index.h("div", { key: '086c4df611ed65fc3929e9d607b4043a6ef33f06' }, this.renderCloseIcon(), index.h("div", { key: 'c3dbdc2e386d06269e79109fc29ae6e0b5826ad5', class: "content-wrapper", ref: (el) => (this.contentWrapper = el) }, this.renderGeneralSection(), this.renderTooltip(), this.renderOnlineLicenseSection(), this.renderOfflineLicenseSection()), index.h("div", { key: '5e79d55d2e1673de4e40d03d6e3ad385af65152f', class: "cta-wrapper" }, index.h("slot", { key: 'aa7141484bdbaf50856f31285dc2fef49f84abe1' }))));
+        return (index.h("div", { key: '1f42c0e5dee2d7dad7f4cfe4f57546091566e6a0' }, this.renderCloseIcon(), index.h("div", { key: '15bde9788efb9a4b9140ba75d0619aed9d9debfa', class: "content-wrapper", ref: (el) => (this.contentWrapper = el) }, this.renderGeneralSection(), this.renderTooltip(), this.renderOnlineLicenseSection(), this.renderOfflineLicenseSection()), index.h("div", { key: '813495ab63d355830e85557f10ae18ee3900c517', class: "cta-wrapper" }, index.h("slot", { key: '760ca67e6143c5d96bf31121b786e03f7606b4f3' }))));
     }
 };
 ZMyzCardInfo.style = ZMyzCardInfoStyle0;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5dc4a8de.js');
+const index = require('./index-e801ae96.js');
 const stylesCss = "*:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}ul{overflow:hidden;width:auto;height:auto;padding:0;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01);font-family:var(--font-family-sans);list-style:none}ul>li{padding-left:10px;text-indent:-10px}ul>li>a{display:block;padding-top:calc(var(--space-unit) * 0.5);color:var(--color-primary01);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}ul>li>a::before{padding-right:5px;content:\"•\"}ul>li>span{padding:0 calc(var(--space-unit) * 2);color:var(--color-surface04);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}";
 const ZMyzCardListStyle0 = stylesCss;
@@ -32,7 +32,7 @@ const ZMyzCardList = class {
         });
     }
     render() {
-        return index.h("ul", { key: '04fd2a50aca23fe43cb8126e7325dda58393cb7b' }, this.renderList(JSON.parse(this.listdata)));
+        return index.h("ul", { key: '874d84f31edec60ba919f37feb4ae42d399b90d6' }, this.renderList(JSON.parse(this.listdata)));
     }
 };
 ZMyzCardList.style = ZMyzCardListStyle0;

package/dist/cjs/z-myz-card_4.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5dc4a8de.js');
-const index$1 = require('./index-e3835c94.js');
+const index = require('./index-e801ae96.js');
+const index$1 = require('./index-bab7a651.js');
 const stylesCss$3 = ":host{--card-overflow:hidden}div{display:flex;overflow:var(--card-overflow);width:auto;width:256px;height:522px;box-sizing:border-box;flex-direction:column;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius)}div.real,div.trial,div.temp{border-color:var(--blue100)}div.faded{border:var(--border-size-medium) solid var(--color-surface02)}div.highlighted{box-shadow:var(--shadow-4);outline:none}div.pressed{box-shadow:var(--shadow-8);outline:none}div:focus{box-shadow:var(--shadow-focus-primary);outline:none}";
 const ZMyzCardStyle0 = stylesCss$3;
@@ -39,7 +39,7 @@ const ZMyzCardComponent = class {
         return elemClasses;
     }
     render() {
-        return (index.h("div", { key: '254e3f158fbaa9eae4c801cd491abe9227fdd1fb', class: this.retrieveClass(), tabindex: "0" }, index.h("slot", { key: '52145b4e99ae3616f767760faf97433d1e3047d8' })));
+        return (index.h("div", { key: '0513da0ab64e0db2c6f075c435ef3a9249501609', class: this.retrieveClass(), tabindex: "0" }, index.h("slot", { key: '3b208fff53e518e4e291e2aa3c0b70d939419690' })));
     }
 };
 ZMyzCardComponent.style = ZMyzCardStyle0;
@@ -52,7 +52,7 @@ const ZMyzCardBody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '6eaaf5ff0351e8844d3aa616e473712dafcff7fd' }, index.h("slot", { key: '2984020a0568593cf9dd47aac83c4890c53d7460', name: "alert" }), index.h("slot", { key: '85e70e9dcd8068d00bdb40e71acaffae88326225', name: "cover" })));
+        return (index.h("div", { key: 'dccc73da3128968555dc65848994a4f11ee6cea4' }, index.h("slot", { key: 'bc8948b5bd03b6c49db50a8aa0d46b1078ca328e', name: "alert" }), index.h("slot", { key: '747327ca24dba0f35ec49d1f85600a5eada44c9e', name: "cover" })));
     }
 };
 ZMyzCardBody.style = ZMyzCardBodyStyle0;
@@ -72,7 +72,7 @@ const ZMyzCardCover = class {
         this.img = this.defaultimg;
     }
     render() {
-        return (index.h("img", { key: 'd7131bee1289159c5f6e60d390cd6e0984ac776f', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
+        return (index.h("img", { key: 'adce1c44a87ce81718fa65d7e12cf44e02ffee8c', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
     }
 };
 ZMyzCardCover.style = ZMyzCardCoverStyle0;
@@ -108,7 +108,7 @@ const ZMyzCardHeader = class {
         };
     }
     render() {
-        return (index.h("header", { key: '5d2f8e09c654cc0b51b0adf3619e8e85dbc81ff5', class: this.retrieveClass() }, index.h("slot", { key: '884987f3e799018b57de5a6ab48a2534cbd5dec1', name: "aria-heading" }), index.h("span", { key: 'c64c93f31d58655a0e17a3141cd9baf17bcf3122', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), index.h("slot", { key: 'f28cc800f9632ed16e4a53a6753a2173a19460f4', name: "icon" })));
+        return (index.h("header", { key: '36891ab64687de7f66157a59f39daf44e7948fb7', class: this.retrieveClass() }, index.h("slot", { key: 'ddbcbc9b3c062a5c8188e4e256cd130d8c36374b', name: "aria-heading" }), index.h("span", { key: 'c5b18ba22229b5f2e3e1be4788b64ee3038d2091', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), index.h("slot", { key: 'b9ac8652bf20fb32a35f0df697ba83c2b033fabf', name: "icon" })));
     }
 };
 ZMyzCardHeader.style = ZMyzCardHeaderStyle0;

package/dist/cjs/z-myz-list-item.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5dc4a8de.js');
-const utils = require('./utils-1a8655c7.js');
-require('./index-e3835c94.js');
+const index = require('./index-e801ae96.js');
+const utils = require('./utils-6bd8c55e.js');
+require('./index-bab7a651.js');
 require('./breakpoints-5c22092a.js');
 const stylesCss = ":host li{all:unset;all:reset;width:100%;line-height:14px;list-style-type:none}:host li>span{display:flex;padding:calc(var(--space-unit) * 2) 0;color:var(--color-default-text);fill:var(--color-default-icon);font-family:var(--font-family-sans);font-size:16px;font-weight:var(--font-rg);letter-spacing:0.23px;line-height:14px}:host(.small) li>span{padding:calc(var(--space-unit) * 1.5) 0;font-size:var(--font-size-2)}:host(.x-small) li>span{padding:var(--space-unit) 0;font-size:var(--font-size-2)}:host(.small) li>span>z-icon,:host(.x-small) li>span>z-icon{--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:calc(var(--space-unit) * 0.5);padding:0}:host li>span.border{border-bottom:2px solid var(--color-surface03)}:host li span:hover,a:hover{color:var(--color-primary01);fill:var(--color-primary01)}a,a:visited,a:active{color:inherit;fill:inherit;text-decoration:none}:host li span z-icon{width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);padding:0 calc(var(--space-unit) * 1.5) 0 0;background-repeat:no-repeat;background-size:contain;color:var(--color-primary01);fill:var(--color-primary01)}";
@@ -33,7 +33,7 @@ const ZMyzListItem = class {
     }
     render() {
         const linkId = this.listitemid ? `link_${this.listitemid}` : "";
-        return (index.h("li", { key: 'de14506aedfc2f75ad3314a6491118e42c3f845b', role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, index.h("span", { key: '1fd3c77d35ba7c9d93235f1dee870fcccd8c9861', class: this.underlined && "border" }, this.icon && index.h("z-icon", { key: 'e154e814209d09377037d9df89e6c0018b6e02b3', name: this.icon }), this.link ? (index.h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (index.h("span", { innerHTML: this.text })), index.h("slot", { key: '3c3a24c8332321e062d0d3ac864ee3c92a699ace' }))));
+        return (index.h("li", { key: '94c2984279c7bc295ba60c54e205310b5d584f24', role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, index.h("span", { key: '766ae559f05ac6565f45930eea86f15cd9950324', class: this.underlined && "border" }, this.icon && index.h("z-icon", { key: '82154a54b424ae62ac1701aed06872443c879795', name: this.icon }), this.link ? (index.h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (index.h("span", { innerHTML: this.text })), index.h("slot", { key: '66674a723e927ea0be315fafd84c9d07883a4561' }))));
     }
 };
 ZMyzListItem.style = ZMyzListItemStyle0;

package/dist/cjs/z-myz-list.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5dc4a8de.js');
+const index = require('./index-e801ae96.js');
 const stylesCss = "ul{padding:0;margin:0}";
 const ZMyzListStyle0 = stylesCss;
@@ -26,7 +26,7 @@ const ZMyzList = class {
     }
     render() {
         const lastElem = this.list ? this.list.length - 1 : -1;
-        return (index.h("ul", { key: '9cf1e909a4da9d319f437c1d5fcbc799a49e668b' }, this.list &&
+        return (index.h("ul", { key: 'b49ccd7184049e42611185d36fcf9cc1f74fd13b' }, this.list &&
             this.list.map((bean, i) => (index.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/cjs/z-navigation-tabs.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5dc4a8de.js');
-const index$1 = require('./index-e3835c94.js');
+const index = require('./index-e801ae96.js');
+const index$1 = require('./index-bab7a651.js');
 const stylesCss = "z-navigation-tabs{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation=\"horizontal\"]>nav{width:100%}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation=\"vertical\"]{width:fit-content;flex-direction:column}z-navigation-tabs[orientation=\"vertical\"]>nav{height:100%;flex-direction:column;align-items:stretch}z-navigation-tabs[orientation=\"vertical\"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 4px 3px var(--blue800)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-surface02)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected=\"true\"]{color:var(--color-hover-secondary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected=\"true\"]::after{position:absolute;background-color:var(--color-hover-secondary);content:\"\"}z-navigation-tabs[orientation=\"horizontal\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation=\"horizontal\"]>nav>[aria-selected=\"true\"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>[aria-selected=\"true\"]::after{height:var(--border-size-medium)}z-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation=\"vertical\"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation=\"vertical\"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation=\"vertical\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation=\"vertical\"]>nav>[aria-selected=\"true\"]::after{top:0;right:0;width:var(--border-size-large);height:100%}";
 const ZNavigationTabsStyle0 = stylesCss;
@@ -207,10 +207,10 @@ const ZNavigationTabs = class {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (index.h(index.Host, { key: '0dfbe739542add5d05e82462f9ca115734f75ab7', class: {
+        return (index.h(index.Host, { key: '16294d384c48cb2380178445630240fcc6f085cc', class: {
                 "interactive-2": this.size === index$1.NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== index$1.NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, index.h("button", { key: 'a679c4104ef79c5245a205e634872992ad6b7702', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, index.h("z-icon", { key: '13b64410e78d66d28b9a2a870535a393b5361f06', name: this.orientation === index$1.NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), index.h("nav", { key: 'ae01aa47ea6620209017d612b3b6e1b0664efcba', 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 }, index.h("slot", { key: 'bd1f92fef8fde67a415964efd61b89d9895192a7' })), index.h("button", { key: '0b7a9b4ecf5773f576f25468a8f64118b57c4480', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, index.h("z-icon", { key: '91686040ca32ff9136c6a96ce70ed3ca20a6b753', name: this.orientation === index$1.NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, index.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 }, index.h("z-icon", { key: '21ddd942ac5c9a7cfdf53e1c31788268b7932f03', name: this.orientation === index$1.NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), index.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 }, index.h("slot", { key: '3cfbaf5ef02b8964b1b497deef2b8e95b6ef94e0' })), index.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 }, index.h("z-icon", { key: '7bc36b5cdb865c759e0bb37362a820557e079be4', name: this.orientation === index$1.NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-notification.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5dc4a8de.js');
+const index = require('./index-e801ae96.js');
 const stylesCss = ":host{--z-notification--top-offset:0;display:flex;width:100%;box-sizing:border-box;align-items:flex-start;padding:calc(var(--space-unit) * 2);border-bottom:var(--border-size-medium) solid var(--color-surface03);font-family:var(--font-family-sans);outline:none}:host[sticky]{position:sticky;top:var(--z-notification--top-offset)}:host[sticky],:host([showshadow]){box-shadow:var(--shadow-3)}:host([type=\"success\"]){background:var(--color-success-inverse)}:host([type=\"warning\"]){background:var(--color-warning-inverse)}:host([type=\"error\"]){background:var(--color-error-inverse)}.status-icon,.close-button{display:flex;height:20px;align-items:center}:host([type=\"success\"]) .status-icon{fill:var(--color-success01)}:host([type=\"warning\"]) .status-icon{fill:var(--color-warning02)}:host([type=\"error\"]) .status-icon{fill:var(--color-error01)}:host>button,.content-container>button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:flex;flex:1 auto;flex-wrap:wrap;align-items:baseline;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{max-width:800px;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:20px}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:16px}.action-button:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media only screen and (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}";
 const ZNotificationStyle0 = stylesCss;
@@ -31,7 +31,7 @@ const ZNotification = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '49e877c8628f367adc596b40d5f12d5e66f78ed0' }, this.contenticonname && (index.h("z-icon", { key: '56257c6011f6b5b17c8bbd6250ec99b8d1e41ee2', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), index.h("div", { key: 'dc56b45ea4f7d52bb193f8d3c22bb5910be9eeea', class: "content-container" }, index.h("div", { key: '2637553cf2f72a948014110e96559d15c45513fa', class: "content-text" }, index.h("slot", { key: '1e60cbb429a9620b88d7cb90df90874d3e454f48' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (index.h("button", { key: '844e0ba5cef8b13f9d91d5c09472893de5127cc4', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (index.h("button", { key: '8761fc65bd1b44b38a219e80d8f12b10a898cefe', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, index.h("z-icon", { key: '7bd949a2c0abf7431765f28542443c9110097ab3', name: "multiply-circle", width: 16, height: 16 })))));
+        return (index.h(index.Host, { key: 'bf9ead754226002371eb0669770d24c0230bcf92' }, this.contenticonname && (index.h("z-icon", { key: '322709ad12acd8a885214809012178649b172bd8', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), index.h("div", { key: 'd68ea8f5984fee4d906a05f93f9cf3ef4dae932c', class: "content-container" }, index.h("div", { key: 'd67f12dcbcf7075cbc0e111db260dce207e3411a', class: "content-text" }, index.h("slot", { key: '6e23a5b287e328657e1848dc1944b3a1ddc065be' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (index.h("button", { key: '68da7a70a5dec9113c021c915594c2e8424c21be', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (index.h("button", { key: '342853024b8a9bfce814282471d8d8e9e9f6b522', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, index.h("z-icon", { key: 'ce20a4b279bc3cb3d4b0dd7bf4c61fe9b3837556', name: "multiply-circle", width: 16, height: 16 })))));
     }
 };
 ZNotification.style = ZNotificationStyle0;

package/dist/cjs/z-otp.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5dc4a8de.js');
-const index$1 = require('./index-e3835c94.js');
+const index = require('./index-e801ae96.js');
+const index$1 = require('./index-bab7a651.js');
 const stylesCss = "input:focus{box-shadow:var(--shadow-focus-primary);outline:none !important}:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{width:calc(var(--space-unit) * 5);height:72px;box-sizing:border-box;padding:0;caret-color:transparent;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:32px;font-weight:300;text-align:center}input.error{border:1px solid;border-color:var(--color-error01);background-color:var(--color-error-inverse);border-radius:4px}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}";
 const ZOtpStyle0 = stylesCss;
@@ -24,7 +24,7 @@ const ZOtp = class {
         this.otpRef = [...Array(this.inputNum)];
     }
     render() {
-        return (index.h("div", { key: 'fbf93bab3be1631c25a91ada084e944562c75f47', class: "otp-container" }, index.h("div", { key: '9c08739270a3875e3550a35c3660be90eb192d7c', class: "digits-container" }, this.otp.map((_val, i) => (index.h("input", { class: this.status == index$1.InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
+        return (index.h("div", { key: '501979362aafae33a4266f38a5785e0e328dba1b', class: "otp-container" }, index.h("div", { key: 'ca4b4646af395228586dd55ba5cb335b6492347b', class: "digits-container" }, this.otp.map((_val, i) => (index.h("input", { class: this.status == index$1.InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
                 if (e.keyCode > 47) {
                     this.otpRef[i].value = "";
                 }
@@ -35,7 +35,7 @@ const ZOtp = class {
             }, 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) })))), index.h("z-input-message", { key: 'f1800b92331f15ab96cb7bf3c23c6d0164e2bee6', message: this.message, status: this.status })));
+            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), index.h("z-input-message", { key: 'ce018353101dac73e4dc0ec9d78918f614a85247', message: this.message, status: this.status })));
     }
 };
 ZOtp.style = ZOtpStyle0;

package/dist/cjs/z-pagination.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5dc4a8de.js');
-const index$1 = require('./index-e3835c94.js');
+const index = require('./index-e801ae96.js');
+const index$1 = require('./index-bab7a651.js');
 const stylesCss = "z-pagination{--z-pagination--page-button-width:64px;--z-pagination--pages-container-max-width:100%;display:flex;max-width:100%;flex-flow:column wrap;font-family:var(--font-family-sans);font-weight:var(--font-rg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4)}z-pagination,z-pagination *{box-sizing:border-box}z-pagination button{height:100%}z-pagination z-icon{fill:var(--color-primary01-icon)}z-pagination *:disabled z-icon{fill:var(--color-disabled03)}z-pagination .page-label{margin-right:calc(var(--space-unit) * 3);color:var(--color-default-text)}z-pagination .pagination-bar{display:flex;max-width:100%;height:48px;align-items:center}z-pagination .pagination-bar button{display:flex;align-items:center;justify-content:center;border:none;margin:0;background-color:var(--color-surface03);color:var(--color-primary01);cursor:pointer;font-family:inherit;font-weight:inherit;transition:background-color 0.15s ease-out,\n    color 0.15s ease-out,\n    border-bottom-color 0.15s ease-out,\n    font-size 0.15s ease-in-out,\n    font-weight 0.15s ease-in-out}z-pagination .pagination-bar button:focus-visible{background-color:var(--color-hover-surface);box-shadow:inset var(--shadow-focus-primary);outline:none}z-pagination .pagination-bar .pagination-button{padding:calc(var(--space-unit) * 2);font-weight:var(--font-sb);text-transform:uppercase;white-space:nowrap}z-pagination .pagination-bar .navigation-button{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5)}z-pagination .pagination-bar .pagination-button:disabled,z-pagination .pagination-bar .navigation-button:disabled{background-color:var(--color-disabled01);color:var(--color-disabled03);cursor:default;pointer-events:none}z-pagination .pagination-bar .page-button,z-pagination .pagination-bar .ellipsis-button{width:var(--z-pagination--page-button-width)}z-pagination .pages-container{position:relative;display:inline-flex;max-width:100%;height:100%;overflow-x:auto;scroll-behavior:smooth;scroll-snap-align:center;scrollbar-width:none}z-pagination .pages-container::-webkit-scrollbar{display:none}z-pagination .pages-chunk{display:flex;scroll-snap-align:center}z-pagination .pagination-bar .page-button{padding-top:var(--border-size-large) solid transparent;border-bottom:var(--border-size-large) solid transparent;font-size:var(--font-size-2);font-weight:var(--font-sb)}z-pagination .pagination-bar .page-button:focus-visible{border-bottom-color:var(--color-hover-light)}z-pagination .pagination-bar .page-button[data-current]{border-bottom-color:var(--color-primary01);font-size:var(--font-size-7)}z-pagination .go-to-page{display:flex;flex-direction:column;row-gap:var(--space-unit)}z-pagination .go-to-page .label{color:var(--color-default-text);text-transform:uppercase}z-pagination .go-to-page .inputs{display:flex;column-gap:var(--space-unit)}z-pagination .go-to-page .inputs z-input{width:calc(var(--space-unit) * 11)}z-pagination .go-to-page .inputs z-input input,z-pagination .mobile-go-to-page z-input input{padding:0 calc(var(--space-unit) * 1.5) !important;appearance:none}z-pagination .mobile-go-to-page{display:flex;height:100%;flex:1 auto;align-items:center;justify-content:center;background-color:var(--color-surface03)}z-pagination .mobile-go-to-page z-input{width:var(--z-pagination--page-button-width);margin-right:var(--space-unit)}z-pagination .mobile-go-to-page z-input input{text-align:center}z-pagination .mobile-go-to-page z-input input::-webkit-outer-spin-button,z-pagination .mobile-go-to-page z-input input::-webkit-inner-spin-button{appearance:none}z-pagination .mobile-go-to-page>span{font-size:var(--font-size-2)}@media (hover: hover){z-pagination .pagination-bar button:hover{background-color:var(--color-hover-surface)}z-pagination .pagination-bar .page-button:hover{border-bottom-color:var(--color-hover-light)}}@media (min-width: 768px){z-pagination{--z-pagination--page-button-width:88px;flex-direction:row;align-items:flex-end}z-pagination .pages-container{max-width:var(--z-pagination--pages-container-max-width)}}";
 const ZPaginationStyle0 = stylesCss;

package/dist/cjs/z-panel-elem.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5dc4a8de.js');
+const index = require('./index-e801ae96.js');
 const stylesCss = ".sc-z-panel-elem-h{width:inherit;font-family:var(--font-family sans);font-weight:var(--font-rg)}.panel-elem-container.sc-z-panel-elem{width:100%}.panel-elem-icon.sc-z-panel-elem{margin:auto calc(var(--space-unit) * 3)}.panel-elem-icon.sc-z-panel-elem img.sc-z-panel-elem{display:block;max-width:96px;height:32px;margin:auto;object-fit:contain}.panel-elem-link.sc-z-panel-elem{display:flex;align-items:center;justify-content:center;margin:var(--space-unit) auto 0;border-radius:var(--border-no-radius);font-size:12px}.panel-elem-link.sc-z-panel-elem>a.z-link.sc-z-panel-elem{padding:calc(var(--space-unit) * 0.5) 0;font-weight:var(--font-sb)}.panel-elem-desc.sc-z-panel-elem{padding-top:var(--space-unit);margin:0;letter-spacing:0.16px;text-align:center}a.sc-z-panel-elem>z-icon.sc-z-panel-elem{margin-right:var(--space-unit)}";
 const ZPanelElemStyle0 = stylesCss;
@@ -22,11 +22,11 @@ const ZPanelElem = class {
     }
     render() {
         const elemId = this.elemid ? this.elemid : "";
-        return (index.h("div", { key: 'bbae0bd29656529b2019a66668d6dfbf66b9b0a1', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (index.h("div", { key: '620411ca326a5975d3cc21549cfc51a7d7eea519', "aria-hidden": "true", class: "panel-elem-icon" }, index.h("img", { key: '79a77af32280e5f1e58f794f07c1365da1fa30a7', src: this.imgurl, alt: this.imgalt }))), index.h("div", { key: '67ad3e575caab6d93bf8d0a17de138ae59fffb35', class: "panel-elem-link" }, index.h("a", { key: 'f79f44642cbceefd484bbe63e4af6ea03d197fec', class: {
+        return (index.h("div", { key: '7364ce8b1efc2b30e792693a93f41834a65dd7c6', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (index.h("div", { key: '815580b59284ea71764fd9f18b98be4ab69ff1e5', "aria-hidden": "true", class: "panel-elem-icon" }, index.h("img", { key: 'a736866758f35a8284310a5bc81d08f166aec78c', src: this.imgurl, alt: this.imgalt }))), index.h("div", { key: '1d154781e2bf59a9a6b1c8ddff324e035095c5ec', class: "panel-elem-link" }, index.h("a", { key: '3531d557c2145fa3fb96f13c2952d4c2c6e366b8', class: {
                 "z-link": true,
                 "z-link-disabled": this.isdisabled,
                 "z-link-icon": true,
-            }, id: elemId + "link_id", href: this.url, target: this.target }, index.h("z-icon", { key: '0f112223c94273b9baa33da513c60a51dba33e7b', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (index.h("div", { key: '4ae5da7e8a2a92be4c801790a90b6907e7ffe6b3', class: "panel-elem-desc" }, index.h("slot", { key: '4c4e6872a2fe1cb443002a004b5aa1ce18a8f96f', name: this.descrSlotName })))));
+            }, id: elemId + "link_id", href: this.url, target: this.target }, index.h("z-icon", { key: 'dd6a4750589fe913eeb211025beebb3da7cfc8fd', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (index.h("div", { key: 'b2cbea114008c9f5c6a560c0e52f60ff9e6f7722', class: "panel-elem-desc" }, index.h("slot", { key: '73a350ea0ca8bc51e56a5a2879651883669a79b4', name: this.descrSlotName })))));
     }
 };
 ZPanelElem.style = ZPanelElemStyle0;

package/dist/cjs/z-popover.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5dc4a8de.js');
-const index$1 = require('./index-e3835c94.js');
+const index = require('./index-e801ae96.js');
+const index$1 = require('./index-bab7a651.js');
 const stylesCss = ":host{--z-popover-theme--surface:var(--color-surface01);--z-popover-theme--text:var(--color-default-text);--z-popover-padding:0;--z-popover-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base));position:relative;display:none;min-width:calc(var(--space-unit) * 8);min-height:calc(var(--space-unit) * 4);align-items:center;justify-content:center;padding:var(--z-popover-padding);background:var(--z-popover-theme--surface);border-radius:var(--border-radius-small);color:var(--z-popover-theme--text);fill:currentcolor;filter:var(--z-popover-shadow-filter);font-family:var(--font-family-sans);text-align:center}:host([open][current-position]),:host([open=\"true\"][current-position]){display:flex}:host([center][current-position=\"top\"]),:host([center][current-position=\"bottom\"]){transform:translateX(-50%)}:host([center][current-position=\"right\"]),:host([center][current-position=\"left\"]){transform:translateY(-50%)}:host([current-position^=\"top\"]){margin:0 0 var(--space-unit)}:host([current-position^=\"bottom\"]){margin:var(--space-unit) 0 0}:host([current-position^=\"left\"]){margin:0 var(--space-unit) 0 0}:host([current-position^=\"right\"]){margin:0 0 0 var(--space-unit)}:host([current-position])::before{--arrow-size:6px;--arrow-edge-offset:calc(100% - var(--space-unit) - (var(--arrow-size) / 2));--arrow-center-x-offset:calc(50% - (var(--arrow-size) / 2));--arrow-center-y-offset:calc(100% - (var(--arrow-size) / 2));position:absolute;display:block;width:var(--arrow-size);height:var(--arrow-size);background:var(--z-popover-theme--surface);content:\"\";transform:rotate(45deg)}:host([show-arrow=\"false\"])::before,:host(:not([show-arrow]))::before{display:none}:host([current-position^=\"top\"])::before{top:var(--arrow-center-y-offset)}:host([current-position^=\"bottom\"])::before{bottom:var(--arrow-center-y-offset)}:host([current-position=\"top\"])::before,:host([current-position=\"bottom\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before,:host([current-position=\"left\"])::before{bottom:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"top_right\"])::before,:host([current-position=\"bottom_right\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"top_left\"])::before,:host([current-position=\"bottom_left\"])::before{left:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"left_top\"])::before{top:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"right_bottom\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left_top\"])::before,:host([current-position=\"left_bottom\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"right_bottom\"])::before,:host([current-position=\"left_bottom\"])::before{bottom:var(--arrow-edge-offset)}:host([center][current-position=\"top\"])::before,:host([center][current-position=\"bottom\"])::before{right:auto;left:var(--arrow-center-x-offset)}:host([center][current-position=\"right\"])::before,:host([center][current-position=\"left\"])::before{top:var(--arrow-center-x-offset);bottom:auto}::slotted(*){overflow:auto;flex:1 auto}";
 const ZPopoverStyle0 = stylesCss;
@@ -304,7 +304,7 @@ const ZPopover = class {
         this.onOpen();
     }
     render() {
-        return index.h("slot", { key: '06ccad911be5d149ace59bb4cd239648a9eeb5da' });
+        return index.h("slot", { key: '3c34ab8733a93885e6e2a9fd8b0f3607cafca402' });
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {