@zanichelli/zanichelli-it-frontend-kit 0.0.1-rc.0

package/dist/esm/z-menu-section.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-menu-section.entry.js","sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-menu-section/styles.css?tag=z-menu-section&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-menu-section/index.js"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 0;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(*),\n* {\n  box-sizing: border-box;\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.label {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: var(--space-unit) 0;\n  border: 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  text-align: left;\n}\n\n:host(:last-child:not([open])) .label {\n  border-bottom: none;\n}\n\n:host(:is([active], [open])) .label,\n.label:focus:focus-visible,\n.label:hover {\n  border-color: var(--color-primary01);\n}\n\n.label:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host(:is([active], [open])) .label ::slotted(*),\n.label:focus:focus-visible ::slotted(*),\n.label:hover ::slotted(*) {\n  font-weight: var(--font-bd);\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Trick to prevent 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  overflow: hidden;\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\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.label ::slotted(*) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.5;\n}\n\n.label z-icon {\n  margin-left: calc(var(--space-unit) * 4);\n  fill: var(--color-default-icon);\n}\n\n.items {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  padding: calc(var(--space-unit) / 2);\n  padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items[hidden] {\n  display: none;\n}\n\n::slotted([slot=\"section\"]) {\n  display: inline-flex;\n  padding: calc(var(--space-unit) / 2);\n  margin: 0;\n  font-size: var(--font-size-1);\n  line-height: 1.333;\n  outline: none;\n}\n\n::slotted([slot=\"section\"]:last-of-type) {\n  border: none;\n}\n\n::slotted([slot=\"section\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-primary01);\n}\n\n::slotted([slot=\"section\"]:hover),\n::slotted([slot=\"section\"]:focus:focus-visible),\n::slotted([slot=\"section\"]:active),\n::slotted([slot=\"section\"][active]),\n::slotted([slot=\"section\"][data-active]) {\n  color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n","import { Host, h } from \"@stencil/core\";\nimport { KeyboardCode } from \"../../beans\";\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot section - Single entry of the menu section. Set the same slot name to different elements to put many of them. Add the `data-active` attribute to a slotted element to highlight it (`active` also works but `data-active` is preferable).\n */\nexport class ZMenuSection {\n    get focusableItem() {\n        return this.items.find(({ tabIndex }) => tabIndex === 0);\n    }\n    toggle() {\n        if (!this.hasItems) {\n            return;\n        }\n        this.open = !this.open;\n    }\n    setItemsA11yAttrs() {\n        if (!this.hasItems) {\n            return;\n        }\n        this.items.forEach((item) => {\n            item.setAttribute(\"role\", \"menuitem\");\n            item.tabIndex = -1;\n        });\n    }\n    onItemsChange() {\n        this.items = Array.from(this.host.querySelectorAll('[slot=\"section\"]'));\n        this.hasItems = this.items.length > 0;\n        this.setItemsA11yAttrs();\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    onLabelSlotChange(ev) {\n        const labelElement = ev.target.assignedElements()[0];\n        labelElement.dataset.text = labelElement === null || labelElement === void 0 ? void 0 : labelElement.textContent;\n    }\n    onLabelClick() {\n        this.toggle();\n        this.setFocus();\n    }\n    onLabelKeydown(ev) {\n        if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n            ev.preventDefault();\n            ev.stopPropagation();\n            this.toggle();\n            if (this.open) {\n                this.focustFirstItem();\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     */\n    moveFocus(receiver, current) {\n        receiver.tabIndex = 0;\n        setTimeout(() => {\n            receiver.focus();\n        }, 100);\n        if (current) {\n            current.tabIndex = -1;\n        }\n    }\n    focustFirstItem() {\n        this.moveFocus(this.items[0]);\n    }\n    /** Focus the last item. */\n    async focusLastItem() {\n        this.moveFocus(this.items[this.items.length - 1]);\n    }\n    /** Set tabindex of the label to 0, then focus it. */\n    async setFocus() {\n        this.htmlTabindex = 0;\n        setTimeout(() => {\n            this.label.focus();\n        }, 100);\n    }\n    onOpenChange() {\n        if (!this.open) {\n            this.setItemsA11yAttrs();\n            this.closed.emit();\n        }\n        else {\n            this.opened.emit();\n        }\n    }\n    onTabindexChange() {\n        if (!this.label) {\n            return;\n        }\n        this.label.tabIndex = this.htmlTabindex;\n    }\n    onItemsKeydown(ev) {\n        switch (ev.key) {\n            case KeyboardCode.ESC:\n            case KeyboardCode.ARROW_LEFT:\n                if (!this.open) {\n                    break;\n                }\n                ev.preventDefault();\n                ev.stopPropagation();\n                this.moveFocus(this.label, this.focusableItem);\n                this.open = false;\n                break;\n            case KeyboardCode.ARROW_RIGHT:\n                if (this.open) {\n                    break;\n                }\n                ev.preventDefault();\n                ev.stopPropagation();\n                this.open = true;\n                this.focustFirstItem();\n                break;\n            case KeyboardCode.ARROW_DOWN: {\n                if (!this.open) {\n                    break;\n                }\n                if (document.activeElement === this.host) {\n                    ev.preventDefault();\n                    ev.stopPropagation();\n                    this.focustFirstItem();\n                    break;\n                }\n                const currentIndex = this.items.indexOf(this.focusableItem);\n                const receiver = this.items[currentIndex + 1];\n                if (receiver) {\n                    ev.preventDefault();\n                    ev.stopPropagation();\n                    this.moveFocus(receiver, this.focusableItem);\n                }\n                else {\n                    this.htmlTabindex = 0;\n                    this.focusableItem.tabIndex = -1;\n                }\n                break;\n            }\n            case KeyboardCode.ARROW_UP: {\n                if (!this.open || document.activeElement === this.host) {\n                    break;\n                }\n                const currentIndex = this.items.indexOf(this.focusableItem);\n                const receiver = this.items[currentIndex - 1];\n                ev.preventDefault();\n                ev.stopPropagation();\n                if (receiver) {\n                    this.moveFocus(receiver, this.focusableItem);\n                }\n                else {\n                    // since there isn't a previous item to focus, give the focus to the label element\n                    this.focusableItem.tabIndex = -1;\n                    this.setFocus();\n                }\n                break;\n            }\n        }\n    }\n    constructor() {\n        this.active = undefined;\n        this.htmlTabindex = -1;\n        this.open = undefined;\n        this.hasItems = undefined;\n        this.items = undefined;\n        this.toggle = this.toggle.bind(this);\n        this.onItemsChange = this.onItemsChange.bind(this);\n        this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n        this.onLabelClick = this.onLabelClick.bind(this);\n        this.onLabelKeydown = this.onLabelKeydown.bind(this);\n        this.onItemsKeydown = this.onItemsKeydown.bind(this);\n    }\n    connectedCallback() {\n        this.onItemsChange();\n    }\n    render() {\n        return (h(Host, { key: 'b308fce3890a3094dca7d5de4f5837b47d6f2796', open: this.open }, h(\"button\", { key: 'dd6eaa241e2f26c79b7fa0e6f7e14049c20b3ed6', ref: (el) => (this.label = el), class: \"label\", \"aria-haspopup\": `${!!this.hasItems}`, \"aria-expanded\": `${!!this.open}`, role: \"menuitem\", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h(\"slot\", { key: '74f5c61fcf32df69b0b5d17ff0f06b5b62f940fa', onSlotchange: this.onLabelSlotChange }), this.hasItems && h(\"z-icon\", { key: '8338d8b57893c110475fe980320310236abb3446', name: this.open ? \"chevron-up\" : \"chevron-down\" })), h(\"div\", { key: '4df11f5eaa5226c24930527caba7f0bfa048946a', class: \"items\", role: \"menu\", hidden: !this.open }, h(\"slot\", { key: '8393b22b945ec02e32e78248090505a012529253', name: \"section\", onSlotchange: this.onItemsChange }))));\n    }\n    static get is() { return \"z-menu-section\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"active\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Active state\"\n                },\n                \"attribute\": \"active\",\n                \"reflect\": true\n            },\n            \"htmlTabindex\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Tabindex value to set on the label button.\\nUseful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZMenu).\"\n                },\n                \"attribute\": \"html-tabindex\",\n                \"reflect\": false,\n                \"defaultValue\": \"-1\"\n            },\n            \"open\": {\n                \"type\": \"boolean\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The opening state of the section.\"\n                },\n                \"attribute\": \"open\",\n                \"reflect\": false\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"hasItems\": {},\n            \"items\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"opened\",\n                \"name\": \"opened\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The section has been opened.\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"closed\",\n                \"name\": \"closed\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The section has been closed.\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get methods() {\n        return {\n            \"focusLastItem\": {\n                \"complexType\": {\n                    \"signature\": \"() => Promise<void>\",\n                    \"parameters\": [],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"Focus the last item.\",\n                    \"tags\": []\n                }\n            },\n            \"setFocus\": {\n                \"complexType\": {\n                    \"signature\": \"() => Promise<void>\",\n                    \"parameters\": [],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"Set tabindex of the label to 0, then focus it.\",\n                    \"tags\": []\n                }\n            }\n        };\n    }\n    static get elementRef() { return \"host\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"open\",\n                \"methodName\": \"onOpenChange\"\n            }, {\n                \"propName\": \"htmlTabindex\",\n                \"methodName\": \"onTabindexChange\"\n            }];\n    }\n    static get listeners() {\n        return [{\n                \"name\": \"keydown\",\n                \"method\": \"onItemsKeydown\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/esm/z-menu.entry.js

@@ -0,0 +1,317 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Cam6wBSi.js';
+import { K as KeyboardCode } from './index-B2-dCTD2.js';
+import { c as containsElement } from './utils-GdAsGfFX.js';
+import './breakpoints-Q-tWjk7P.js';
+
+const stylesCss = ":host,::slotted(*),*{box-sizing:border-box;outline:none}:host{position:relative;display:inline-flex;height:fit-content;flex-direction:column}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{position:relative;display:flex;width:100%;align-items:center;padding:0;border:0;border-bottom:var(--border-size-large) solid transparent;margin:0;background:transparent;border-radius:0;color:inherit;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-visible,div.menu-label:focus-within{box-shadow:var(--shadow-focus-primary)}:host(:is([active],[open])) .menu-label ::slotted(*),.menu-label:focus-visible ::slotted(*),div.menu-label:focus-within ::slotted(*){color:var(--color-primary01);font-weight:var(--font-bd)}:host([vertical-context]) .menu-label{padding:var(--space-unit) 0;border-width:var(--border-size-small);border-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label,.menu-label:hover,.menu-label:focus-visible,div.menu-label:focus-within{border-color:var(--color-primary01)}:host([vertical-context]:is([active],[open])) .menu-label::after,:host([vertical-context]) .menu-label:hover::after,:host([vertical-context]) .menu-label:focus-visible::after,:host([vertical-context]) div.menu-label:focus-within::after{position:absolute;bottom:calc(var(--border-size-small) * -1);left:0;width:100%;height:var(--border-size-large);background-color:var(--color-primary01);content:\"\"}:host([vertical-context]) .menu-label ::slotted(*){padding:0}.menu-label ::slotted(*){display:inline-flex;width:100%;min-width:fit-content;padding-bottom:2px;margin:0;appearance:none;color:var(--z-menu-label-color, var(--color-default-text));font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:inherit;line-height:1.5;white-space:nowrap}.menu-label z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:var(--color-default-icon)}::slotted([data-text]:not([slot]))::after{height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text]:not([slot]))::after{display:none}}::slotted([data-text]:not([slot])){display:inline-flex;flex-direction:column}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]:not([vertical-context])) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:0 calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot=\"header\"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot=\"header\"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot=\"item\"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot=\"item\"]:not(z-menu-section)){padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface03)}:host(:not([vertical-context])) .items>::slotted([slot=\"item\"]:last-child){border-bottom:0}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"]:active),.items>::slotted([slot=\"item\"][active]),.items>::slotted([slot=\"item\"][data-active]){border-color:var(--color-primary01);font-weight:var(--font-bd)}";
+
+const isZMenuSection = (el) => (el === null || el === void 0 ? void 0 : el.tagName) === "Z-MENU-SECTION";
+const ZMenu = class {
+    get focusableItem() {
+        return this.items.find((item) => (isZMenuSection(item) ? item.htmlTabindex === 0 : item.tabIndex === 0));
+    }
+    toggle() {
+        if (!this.hasContent) {
+            return;
+        }
+        this.open = !this.open;
+    }
+    /**
+     * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+     * @param ev Slotchange event
+     */
+    onLabelSlotChange(ev) {
+        const labelElement = ev.target.assignedElements()[0];
+        labelElement.dataset.text = labelElement === null || labelElement === void 0 ? void 0 : labelElement.textContent;
+        this.setLabelA11yAttrs();
+    }
+    /**
+     * Correctly set position of the floating menu in order to prevent overflow.
+     * @param live Should run the method on every refresh frame.
+     */
+    reflow(live = false) {
+        if (!this.floating) {
+            return;
+        }
+        if (this.content && this.hasContent) {
+            const { style } = this.content;
+            const { left } = this.host.getBoundingClientRect();
+            const widthPx = getComputedStyle(this.content).width;
+            const width = widthPx ? parseFloat(widthPx.replace("px", "")) : 375;
+            const safeScrollbarSpace = 30;
+            style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;
+        }
+        if (live) {
+            this.raf = requestAnimationFrame(this.reflow.bind(this, live));
+        }
+    }
+    /**
+     * Check if some content slot is set.
+     */
+    checkContent() {
+        this.hasHeader = !!this.host.querySelectorAll("[slot=header]").length;
+        this.hasContent = !!this.host.querySelectorAll("[slot=item]").length || this.hasHeader;
+    }
+    setItemTabindex(item, tabIndex) {
+        if (isZMenuSection(item)) {
+            item.htmlTabindex = tabIndex;
+        }
+        else {
+            item.tabIndex = tabIndex;
+        }
+    }
+    /**
+     * Set `menuitem` role to all menu items (ZMenuSection items already have it).
+     * Set -1 to the tabindex of the items and 0 to the first one.
+     */
+    setItemsA11yAttrs() {
+        this.items.forEach((item, index) => {
+            const tabindex = index === 0 ? 0 : -1;
+            this.setItemTabindex(item, tabindex);
+            if (!isZMenuSection(item)) {
+                item.setAttribute("role", "menuitem");
+            }
+        });
+    }
+    onItemsChange() {
+        this.checkContent();
+        this.items = Array.from(this.host.children).filter(({ slot }) => slot === "item");
+        this.setItemsA11yAttrs();
+        this.items.forEach((item) => {
+            if (!isZMenuSection(item)) {
+                item.dataset.text = item.textContent;
+            }
+        });
+    }
+    /**
+     * Move focus and adjust the tabindex value of `receiver` and `current` elements,
+     * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.
+     * If the receiver is a ZMenuSection and it's open, focus its first focusable item.
+     */
+    moveFocus(receiver, current) {
+        if (isZMenuSection(receiver)) {
+            receiver.setFocus();
+        }
+        else {
+            receiver.tabIndex = 0;
+            setTimeout(() => {
+                receiver.focus();
+            }, 100);
+        }
+        if (!current) {
+            return;
+        }
+        this.setItemTabindex(current, -1);
+    }
+    onLabelClick() {
+        this.toggle();
+        this.setFocus();
+    }
+    onLabelKeydown(ev) {
+        if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.toggle();
+            if (this.open) {
+                this.moveFocus(this.items[0]);
+            }
+            return;
+        }
+        if (!this.verticalContext) {
+            return;
+        }
+        if (ev.key === KeyboardCode.ARROW_RIGHT && !this.open) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.open = true;
+            this.moveFocus(this.items[0]);
+        }
+    }
+    /** Set tabindex of the label to 0, then focus it. */
+    async setFocus() {
+        this.htmlTabindex = 0;
+        const label = this.hasContent ? this.labelButton : this.host.firstElementChild;
+        label.focus();
+    }
+    /**
+     * Focus the last item.
+     */
+    async focusLastItem() {
+        const lastItem = this.items[this.items.length - 1];
+        if (isZMenuSection(lastItem) && lastItem.open) {
+            lastItem.focusLastItem();
+            return;
+        }
+        this.moveFocus(lastItem);
+    }
+    onOpenChanged() {
+        if (!this.open) {
+            cancelAnimationFrame(this.raf);
+            this.closed.emit();
+            this.items.forEach((item) => {
+                if (isZMenuSection(item) && item.open) {
+                    item.open = false;
+                }
+            });
+            return;
+        }
+        this.setItemsA11yAttrs();
+        this.opened.emit();
+        if (this.floating) {
+            this.reflow(true);
+        }
+    }
+    setLabelA11yAttrs() {
+        if (this.hasContent && this.labelButton) {
+            this.labelButton.tabIndex = this.htmlTabindex;
+            return;
+        }
+        const slottedLabel = this.host.firstElementChild;
+        slottedLabel.role = "menuitem";
+        slottedLabel.tabIndex = this.htmlTabindex;
+    }
+    /**
+     * Set tabindex to -1 to all siblings of the clicked item.
+     */
+    onItemClick(ev) {
+        const clickedItem = this.items.find((item) => containsElement(item, ev.target));
+        if (clickedItem) {
+            this.items.forEach((item) => {
+                if (item === clickedItem) {
+                    return;
+                }
+                if (isZMenuSection(item)) {
+                    item.htmlTabindex = -1;
+                }
+                else {
+                    item.tabIndex = -1;
+                }
+            });
+        }
+    }
+    onKeyDown(ev) {
+        var _a;
+        if (!this.hasContent) {
+            return;
+        }
+        switch (ev.key) {
+            case KeyboardCode.ESC:
+                if (!this.open) {
+                    break;
+                }
+                ev.stopPropagation();
+                ev.preventDefault();
+                this.open = false;
+                this.setFocus();
+                break;
+            case KeyboardCode.ARROW_DOWN: {
+                if (document.activeElement === this.host) {
+                    if (this.verticalContext && !this.open) {
+                        break;
+                    }
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    if (!this.open) {
+                        this.open = true;
+                    }
+                    this.moveFocus(this.items[0]);
+                    break;
+                }
+                const currentIndex = this.items.indexOf(this.focusableItem);
+                if (this.verticalContext && currentIndex === this.items.length - 1) {
+                    // navigation is going to leave this menu. restore tabindex to the label and let the parent handle it
+                    this.setItemTabindex(this.items[currentIndex], -1);
+                    this.htmlTabindex = 0;
+                    break;
+                }
+                ev.stopPropagation();
+                ev.preventDefault();
+                const receiver = this.items[currentIndex + 1];
+                // if the last item is already focused, navigate to the first one
+                this.moveFocus(receiver !== null && receiver !== void 0 ? receiver : this.items[0], this.focusableItem);
+                break;
+            }
+            case KeyboardCode.ARROW_UP: {
+                if (document.activeElement === this.host) {
+                    if (this.verticalContext) {
+                        break;
+                    }
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    // open the menu and focus the last item
+                    if (!this.open) {
+                        this.open = true;
+                    }
+                    this.moveFocus(this.items[this.items.length - 1], this.focusableItem);
+                    break;
+                }
+                ev.stopPropagation();
+                ev.preventDefault();
+                const currentIndex = this.items.indexOf(this.focusableItem);
+                if (currentIndex === 0 && this.verticalContext) {
+                    this.setItemTabindex(this.focusableItem, -1);
+                    this.setFocus();
+                    break;
+                }
+                const receiver = (_a = this.items[currentIndex - 1]) !== null && _a !== void 0 ? _a : this.items[this.items.length - 1];
+                // if the receiver is a ZMenuSection and it's open, focus its last item
+                if (isZMenuSection(receiver) && receiver.open) {
+                    this.setItemTabindex(this.focusableItem, -1);
+                    receiver.focusLastItem();
+                    break;
+                }
+                this.moveFocus(receiver, this.focusableItem);
+                break;
+            }
+            case KeyboardCode.ARROW_LEFT:
+                if (!this.open || !this.verticalContext) {
+                    break;
+                }
+                // close the menu and focus the label
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.open = false;
+                this.setFocus();
+        }
+    }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.opened = createEvent(this, "opened", 7);
+        this.closed = createEvent(this, "closed", 7);
+        this.items = [];
+        this.active = undefined;
+        this.floating = true;
+        this.open = false;
+        this.verticalContext = false;
+        this.htmlTabindex = -1;
+        this.hasHeader = undefined;
+        this.hasContent = undefined;
+        this.toggle = this.toggle.bind(this);
+        this.checkContent = this.checkContent.bind(this);
+        this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
+        this.onLabelClick = this.onLabelClick.bind(this);
+        this.onItemsChange = this.onItemsChange.bind(this);
+        this.onLabelKeydown = this.onLabelKeydown.bind(this);
+    }
+    componentWillLoad() {
+        this.setLabelA11yAttrs();
+        this.onItemsChange();
+    }
+    render() {
+        if (!this.hasContent) {
+            return (h("div", { class: "menu-label" }, h("slot", { onSlotchange: this.onLabelSlotChange })));
+        }
+        return (h(Host, null, h("button", { ref: (el) => (this.labelButton = el), class: "menu-label", "aria-expanded": `${!!this.open}`, "aria-haspopup": `${this.hasContent}`, "aria-label": this.open ? "Chiudi menù" : "Apri menù", role: "menuitem", tabIndex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { onSlotchange: this.onLabelSlotChange }), h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" })), h("div", { class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { class: "header" }, h("slot", { name: "header", onSlotchange: this.checkContent }))), h("div", { class: "items", role: "menu" }, h("slot", { name: "item", onSlotchange: this.onItemsChange })))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "open": ["onOpenChanged"],
+        "htmlTabindex": ["setLabelA11yAttrs"]
+    }; }
+};
+ZMenu.style = stylesCss;
+
+export { ZMenu as z_menu };
+//# sourceMappingURL=z-menu.entry.js.map
+
+//# sourceMappingURL=z-menu.entry.js.map

package/dist/esm/z-menu.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-menu.entry.js","sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-menu/styles.css?tag=z-menu&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/z-menu/index.js"],"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  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 0;\n  border: 0;\n  border-bottom: var(--border-size-large) solid transparent;\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  color: inherit;\n  text-align: left;\n}\n\nbutton.menu-label {\n  cursor: pointer;\n}\n\n.menu-label:focus-visible,\ndiv.menu-label:focus-within {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host(:is([active], [open])) .menu-label ::slotted(*),\n.menu-label:focus-visible ::slotted(*),\ndiv.menu-label:focus-within ::slotted(*) {\n  color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n\n:host([vertical-context]) .menu-label {\n  padding: var(--space-unit) 0;\n  border-width: var(--border-size-small);\n  border-color: var(--color-surface03);\n}\n\n:host(:is([active], [open])) .menu-label,\n.menu-label:hover,\n.menu-label:focus-visible,\ndiv.menu-label:focus-within {\n  border-color: var(--color-primary01);\n}\n\n:host([vertical-context]:is([active], [open])) .menu-label::after,\n:host([vertical-context]) .menu-label:hover::after,\n:host([vertical-context]) .menu-label:focus-visible::after,\n:host([vertical-context]) div.menu-label:focus-within::after {\n  position: absolute;\n  bottom: calc(var(--border-size-small) * -1);\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n  background-color: var(--color-primary01);\n  content: \"\";\n}\n\n:host([vertical-context]) .menu-label ::slotted(*) {\n  padding: 0;\n}\n\n.menu-label ::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  white-space: nowrap;\n}\n\n.menu-label z-icon {\n  margin-left: calc(var(--space-unit) * 1.5);\n  fill: var(--color-default-icon);\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.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\"]:last-child) {\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.items > ::slotted([slot=\"item\"][active]),\n.items > ::slotted([slot=\"item\"][data-active]) {\n  border-color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n","import { Host, h } from \"@stencil/core\";\nimport { KeyboardCode } from \"../../beans\";\nimport { containsElement } from \"../../utils/utils\";\nconst isZMenuSection = (el) => (el === null || el === void 0 ? void 0 : el.tagName) === \"Z-MENU-SECTION\";\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 `data-active` HTML attribute on the element to highlight it (`active` also works but `data-active` is preferable). Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n */\nexport class ZMenu {\n    get focusableItem() {\n        return this.items.find((item) => (isZMenuSection(item) ? item.htmlTabindex === 0 : item.tabIndex === 0));\n    }\n    toggle() {\n        if (!this.hasContent) {\n            return;\n        }\n        this.open = !this.open;\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    onLabelSlotChange(ev) {\n        const labelElement = ev.target.assignedElements()[0];\n        labelElement.dataset.text = labelElement === null || labelElement === void 0 ? void 0 : labelElement.textContent;\n        this.setLabelA11yAttrs();\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    reflow(live = false) {\n        if (!this.floating) {\n            return;\n        }\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     * Check if some content slot is set.\n     */\n    checkContent() {\n        this.hasHeader = !!this.host.querySelectorAll(\"[slot=header]\").length;\n        this.hasContent = !!this.host.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n    }\n    setItemTabindex(item, tabIndex) {\n        if (isZMenuSection(item)) {\n            item.htmlTabindex = tabIndex;\n        }\n        else {\n            item.tabIndex = tabIndex;\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    setItemsA11yAttrs() {\n        this.items.forEach((item, index) => {\n            const tabindex = index === 0 ? 0 : -1;\n            this.setItemTabindex(item, tabindex);\n            if (!isZMenuSection(item)) {\n                item.setAttribute(\"role\", \"menuitem\");\n            }\n        });\n    }\n    onItemsChange() {\n        this.checkContent();\n        this.items = Array.from(this.host.children).filter(({ slot }) => slot === \"item\");\n        this.setItemsA11yAttrs();\n        this.items.forEach((item) => {\n            if (!isZMenuSection(item)) {\n                item.dataset.text = item.textContent;\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    moveFocus(receiver, current) {\n        if (isZMenuSection(receiver)) {\n            receiver.setFocus();\n        }\n        else {\n            receiver.tabIndex = 0;\n            setTimeout(() => {\n                receiver.focus();\n            }, 100);\n        }\n        if (!current) {\n            return;\n        }\n        this.setItemTabindex(current, -1);\n    }\n    onLabelClick() {\n        this.toggle();\n        this.setFocus();\n    }\n    onLabelKeydown(ev) {\n        if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n            ev.preventDefault();\n            ev.stopPropagation();\n            this.toggle();\n            if (this.open) {\n                this.moveFocus(this.items[0]);\n            }\n            return;\n        }\n        if (!this.verticalContext) {\n            return;\n        }\n        if (ev.key === KeyboardCode.ARROW_RIGHT && !this.open) {\n            ev.preventDefault();\n            ev.stopPropagation();\n            this.open = true;\n            this.moveFocus(this.items[0]);\n        }\n    }\n    /** Set tabindex of the label to 0, then focus it. */\n    async setFocus() {\n        this.htmlTabindex = 0;\n        const label = this.hasContent ? this.labelButton : this.host.firstElementChild;\n        label.focus();\n    }\n    /**\n     * Focus the last item.\n     */\n    async focusLastItem() {\n        const lastItem = this.items[this.items.length - 1];\n        if (isZMenuSection(lastItem) && lastItem.open) {\n            lastItem.focusLastItem();\n            return;\n        }\n        this.moveFocus(lastItem);\n    }\n    onOpenChanged() {\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            return;\n        }\n        this.setItemsA11yAttrs();\n        this.opened.emit();\n        if (this.floating) {\n            this.reflow(true);\n        }\n    }\n    setLabelA11yAttrs() {\n        if (this.hasContent && this.labelButton) {\n            this.labelButton.tabIndex = this.htmlTabindex;\n            return;\n        }\n        const slottedLabel = this.host.firstElementChild;\n        slottedLabel.role = \"menuitem\";\n        slottedLabel.tabIndex = this.htmlTabindex;\n    }\n    /**\n     * Set tabindex to -1 to all siblings of the clicked item.\n     */\n    onItemClick(ev) {\n        const clickedItem = this.items.find((item) => containsElement(item, ev.target));\n        if (clickedItem) {\n            this.items.forEach((item) => {\n                if (item === clickedItem) {\n                    return;\n                }\n                if (isZMenuSection(item)) {\n                    item.htmlTabindex = -1;\n                }\n                else {\n                    item.tabIndex = -1;\n                }\n            });\n        }\n    }\n    onKeyDown(ev) {\n        var _a;\n        if (!this.hasContent) {\n            return;\n        }\n        switch (ev.key) {\n            case KeyboardCode.ESC:\n                if (!this.open) {\n                    break;\n                }\n                ev.stopPropagation();\n                ev.preventDefault();\n                this.open = false;\n                this.setFocus();\n                break;\n            case KeyboardCode.ARROW_DOWN: {\n                if (document.activeElement === this.host) {\n                    if (this.verticalContext && !this.open) {\n                        break;\n                    }\n                    ev.stopPropagation();\n                    ev.preventDefault();\n                    if (!this.open) {\n                        this.open = true;\n                    }\n                    this.moveFocus(this.items[0]);\n                    break;\n                }\n                const currentIndex = this.items.indexOf(this.focusableItem);\n                if (this.verticalContext && currentIndex === this.items.length - 1) {\n                    // navigation is going to leave this menu. restore tabindex to the label and let the parent handle it\n                    this.setItemTabindex(this.items[currentIndex], -1);\n                    this.htmlTabindex = 0;\n                    break;\n                }\n                ev.stopPropagation();\n                ev.preventDefault();\n                const receiver = this.items[currentIndex + 1];\n                // if the last item is already focused, navigate to the first one\n                this.moveFocus(receiver !== null && receiver !== void 0 ? receiver : this.items[0], this.focusableItem);\n                break;\n            }\n            case KeyboardCode.ARROW_UP: {\n                if (document.activeElement === this.host) {\n                    if (this.verticalContext) {\n                        break;\n                    }\n                    ev.stopPropagation();\n                    ev.preventDefault();\n                    // open the menu and focus the last item\n                    if (!this.open) {\n                        this.open = true;\n                    }\n                    this.moveFocus(this.items[this.items.length - 1], this.focusableItem);\n                    break;\n                }\n                ev.stopPropagation();\n                ev.preventDefault();\n                const currentIndex = this.items.indexOf(this.focusableItem);\n                if (currentIndex === 0 && this.verticalContext) {\n                    this.setItemTabindex(this.focusableItem, -1);\n                    this.setFocus();\n                    break;\n                }\n                const receiver = (_a = this.items[currentIndex - 1]) !== null && _a !== void 0 ? _a : this.items[this.items.length - 1];\n                // if the receiver is a ZMenuSection and it's open, focus its last item\n                if (isZMenuSection(receiver) && receiver.open) {\n                    this.setItemTabindex(this.focusableItem, -1);\n                    receiver.focusLastItem();\n                    break;\n                }\n                this.moveFocus(receiver, this.focusableItem);\n                break;\n            }\n            case KeyboardCode.ARROW_LEFT:\n                if (!this.open || !this.verticalContext) {\n                    break;\n                }\n                // close the menu and focus the label\n                ev.preventDefault();\n                ev.stopPropagation();\n                this.open = false;\n                this.setFocus();\n        }\n    }\n    constructor() {\n        this.items = [];\n        this.active = undefined;\n        this.floating = true;\n        this.open = false;\n        this.verticalContext = false;\n        this.htmlTabindex = -1;\n        this.hasHeader = undefined;\n        this.hasContent = undefined;\n        this.toggle = this.toggle.bind(this);\n        this.checkContent = this.checkContent.bind(this);\n        this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n        this.onLabelClick = this.onLabelClick.bind(this);\n        this.onItemsChange = this.onItemsChange.bind(this);\n        this.onLabelKeydown = this.onLabelKeydown.bind(this);\n    }\n    componentWillLoad() {\n        this.setLabelA11yAttrs();\n        this.onItemsChange();\n    }\n    render() {\n        if (!this.hasContent) {\n            return (h(\"div\", { class: \"menu-label\" }, h(\"slot\", { onSlotchange: this.onLabelSlotChange })));\n        }\n        return (h(Host, null, h(\"button\", { ref: (el) => (this.labelButton = el), class: \"menu-label\", \"aria-expanded\": `${!!this.open}`, \"aria-haspopup\": `${this.hasContent}`, \"aria-label\": this.open ? \"Chiudi menù\" : \"Apri menù\", role: \"menuitem\", tabIndex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h(\"slot\", { onSlotchange: this.onLabelSlotChange }), h(\"z-icon\", { name: this.open ? \"chevron-up\" : \"chevron-down\" })), h(\"div\", { class: \"content\", ref: (el) => (this.content = el) }, this.hasHeader && (h(\"header\", { class: \"header\" }, h(\"slot\", { name: \"header\", onSlotchange: this.checkContent }))), h(\"div\", { class: \"items\", role: \"menu\" }, h(\"slot\", { name: \"item\", onSlotchange: this.onItemsChange })))));\n    }\n    static get is() { return \"z-menu\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"active\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Flag to set the active status of the menu.\"\n                },\n                \"attribute\": \"active\",\n                \"reflect\": true\n            },\n            \"floating\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Flag to set the display mode of the list.\\nIf true, the list will be absolutely positioned under the menu label,\\nstacked beneath it otherwise.\"\n                },\n                \"attribute\": \"floating\",\n                \"reflect\": true,\n                \"defaultValue\": \"true\"\n            },\n            \"open\": {\n                \"type\": \"boolean\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The opening state of the menu.\"\n                },\n                \"attribute\": \"open\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"verticalContext\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Tells the component that it's placed in a vertical context with other `ZMenu`s (usually in the ZAppHeader's offcanvas).\\nA small border is placed under it as a separator from other elements.\"\n                },\n                \"attribute\": \"vertical-context\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"htmlTabindex\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Tabindex value to set on the menu label.\\nUseful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZAppHeader).\"\n                },\n                \"attribute\": \"html-tabindex\",\n                \"reflect\": false,\n                \"defaultValue\": \"-1\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"hasHeader\": {},\n            \"hasContent\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"opened\",\n                \"name\": \"opened\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The menu has been opened.\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"closed\",\n                \"name\": \"closed\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The menu has been closed.\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get methods() {\n        return {\n            \"setFocus\": {\n                \"complexType\": {\n                    \"signature\": \"() => Promise<void>\",\n                    \"parameters\": [],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        },\n                        \"HTMLElement\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::HTMLElement\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"Set tabindex of the label to 0, then focus it.\",\n                    \"tags\": []\n                }\n            },\n            \"focusLastItem\": {\n                \"complexType\": {\n                    \"signature\": \"() => Promise<void>\",\n                    \"parameters\": [],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"Focus the last item.\",\n                    \"tags\": []\n                }\n            }\n        };\n    }\n    static get elementRef() { return \"host\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"open\",\n                \"methodName\": \"onOpenChanged\"\n            }, {\n                \"propName\": \"htmlTabindex\",\n                \"methodName\": \"setLabelA11yAttrs\"\n            }];\n    }\n    static get listeners() {\n        return [{\n                \"name\": \"click\",\n                \"method\": \"onItemClick\",\n                \"target\": \"document\",\n                \"capture\": false,\n                \"passive\": false\n            }, {\n                \"name\": \"keydown\",\n                \"method\": \"onKeyDown\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/esm/z-myz-card-alert.entry.js

@@ -0,0 +1,66 @@
+import { r as registerInstance, c as createEvent, h } from './index-Cam6wBSi.js';
+import { m as AlertType } from './index-B2-dCTD2.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-background);border-top:none}:host div.add-alert{background:var(--color-inverse-success)}:host div.remove-alert{background:var(--color-inverse-warning)}: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 ZMyzCardAlert = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.undoAction = createEvent(this, "undoAction", 7);
+        this.iconname = undefined;
+        this.contenttext = undefined;
+        this.actiontext = undefined;
+        this.type = undefined;
+    }
+    emitUndoAction() {
+        this.undoAction.emit({ actionType: this.type });
+    }
+    handleSpaceKeyPress(e) {
+        if (e.keyCode == 32 || e.keyCode == 13) {
+            e.preventDefault();
+            this.emitUndoAction();
+        }
+    }
+    handleActionButtonClick(e) {
+        e.preventDefault();
+        this.emitUndoAction();
+    }
+    retrieveClass() {
+        let className = "";
+        switch (this.type) {
+            case "add":
+                className = "add-alert";
+                break;
+            case "remove":
+                className = "remove-alert";
+                break;
+            default:
+                className = "";
+                break;
+        }
+        return className;
+    }
+    getAlertType() {
+        switch (this.type) {
+            case "add":
+                return AlertType.SUCCESS;
+            case "remove":
+                return AlertType.WARNING;
+            default:
+                return null;
+        }
+    }
+    render() {
+        return (h("div", { key: '0a19998aa8afdf605445ca6fff06226dda90bebd', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: '580f27b42700aaaab04425d3c8bc60e3ecbdbc8e', type: this.getAlertType() }, h("div", { key: '6e8c1366ddd95e0a3ffd3048bf5915d1ca5991c8', class: "relative-container" }, h("z-icon", { key: 'e50f2727f14417662f9296dc52b69ab3bb7abefc', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: '4973c8f1184ff49f1c6267e7fff3d97aec1d871f', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { key: '758357b1a5f29db6fe2c20216059ef3f086f4f15', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
+                this.handleActionButtonClick(e);
+            }, onKeyPress: (e) => {
+                this.handleSpaceKeyPress(e);
+            } }, this.actiontext))))));
+    }
+};
+ZMyzCardAlert.style = stylesCss;
+
+export { ZMyzCardAlert as z_myz_card_alert };
+//# sourceMappingURL=z-myz-card-alert.entry.js.map
+
+//# sourceMappingURL=z-myz-card-alert.entry.js.map

package/dist/esm/z-myz-card-alert.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-myz-card-alert.entry.js","sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/snowflakes/myz/card/z-myz-card-alert/styles.css?tag=z-myz-card-alert&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/snowflakes/myz/card/z-myz-card-alert/index.js"],"sourcesContent":[":host {\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  left: 0;\n  width: 100%;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > z-alert {\n  height: calc(var(--space-unit) * 6);\n}\n\n.relative-container {\n  position: relative;\n  display: grid;\n  align-items: center;\n  padding: 0;\n  grid-column-gap: var(--space-unit);\n  grid-template-columns: 18px auto 46px;\n  grid-template-rows: 1fr;\n  outline: none;\n}\n\n.relative-container::-moz-focus-inner {\n  border: 0;\n}\n\n.alert-external-wrapper.remove-alert {\n  border: var(--border-size-medium) solid var(--color-background);\n  border-top: none;\n}\n\n:host div.add-alert {\n  background: var(--color-inverse-success);\n}\n\n:host div.remove-alert {\n  background: var(--color-inverse-warning);\n}\n\n:host div > .content-text {\n  color: var(--color-surface05);\n  font-size: 14px;\n  letter-spacing: 0.16px;\n  line-height: 20px;\n}\n\n:host div > .content-action {\n  height: 20px;\n  color: var(--color-primary01);\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 20px;\n}\n\n:host div > z-icon {\n  justify-self: center;\n}\n","import { h } from \"@stencil/core\";\nimport { AlertType } from \"../../../../beans\";\nexport class ZMyzCardAlert {\n    constructor() {\n        this.iconname = undefined;\n        this.contenttext = undefined;\n        this.actiontext = undefined;\n        this.type = undefined;\n    }\n    emitUndoAction() {\n        this.undoAction.emit({ actionType: this.type });\n    }\n    handleSpaceKeyPress(e) {\n        if (e.keyCode == 32 || e.keyCode == 13) {\n            e.preventDefault();\n            this.emitUndoAction();\n        }\n    }\n    handleActionButtonClick(e) {\n        e.preventDefault();\n        this.emitUndoAction();\n    }\n    retrieveClass() {\n        let className = \"\";\n        switch (this.type) {\n            case \"add\":\n                className = \"add-alert\";\n                break;\n            case \"remove\":\n                className = \"remove-alert\";\n                break;\n            default:\n                className = \"\";\n                break;\n        }\n        return className;\n    }\n    getAlertType() {\n        switch (this.type) {\n            case \"add\":\n                return AlertType.SUCCESS;\n            case \"remove\":\n                return AlertType.WARNING;\n            default:\n                return null;\n        }\n    }\n    render() {\n        return (h(\"div\", { key: '0a19998aa8afdf605445ca6fff06226dda90bebd', class: \"alert-external-wrapper \" + this.retrieveClass() }, h(\"z-alert\", { key: '580f27b42700aaaab04425d3c8bc60e3ecbdbc8e', type: this.getAlertType() }, h(\"div\", { key: '6e8c1366ddd95e0a3ffd3048bf5915d1ca5991c8', class: \"relative-container\" }, h(\"z-icon\", { key: 'e50f2727f14417662f9296dc52b69ab3bb7abefc', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h(\"span\", { key: '4973c8f1184ff49f1c6267e7fff3d97aec1d871f', class: \"content-text\" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h(\"span\", { key: '758357b1a5f29db6fe2c20216059ef3f086f4f15', role: \"button\", tabindex: \"0\", class: \"content-action\", onClick: (e) => {\n                this.handleActionButtonClick(e);\n            }, onKeyPress: (e) => {\n                this.handleSpaceKeyPress(e);\n            } }, this.actiontext))))));\n    }\n    static get is() { return \"z-myz-card-alert\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"iconname\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"icon name\"\n                },\n                \"attribute\": \"iconname\",\n                \"reflect\": false\n            },\n            \"contenttext\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"content text\"\n                },\n                \"attribute\": \"contenttext\",\n                \"reflect\": false\n            },\n            \"actiontext\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"action button text\"\n                },\n                \"attribute\": \"actiontext\",\n                \"reflect\": false\n            },\n            \"type\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"alert variant type\"\n                },\n                \"attribute\": \"type\",\n                \"reflect\": false\n            }\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"undoAction\",\n                \"name\": \"undoAction\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"undo action click/keyboard event, returns actionType\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n}\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,w7BAAw7B;;MCE77B,aAAa,GAAA,MAAA;AACtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AACI,QAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;AACzB,QAAA,IAAI,CAAC,WAAW,GAAG,SAAS;AAC5B,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS;AAC3B,QAAA,IAAI,CAAC,IAAI,GAAG,SAAS;AACxB;IACD,cAAc,GAAA;AACV,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;AAEnD,IAAA,mBAAmB,CAAC,CAAC,EAAA;AACjB,QAAA,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,EAAE;YACpC,CAAC,CAAC,cAAc,EAAE;YAClB,IAAI,CAAC,cAAc,EAAE;;;AAG7B,IAAA,uBAAuB,CAAC,CAAC,EAAA;QACrB,CAAC,CAAC,cAAc,EAAE;QAClB,IAAI,CAAC,cAAc,EAAE;;IAEzB,aAAa,GAAA;QACT,IAAI,SAAS,GAAG,EAAE;AAClB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACb,YAAA,KAAK,KAAK;gBACN,SAAS,GAAG,WAAW;gBACvB;AACJ,YAAA,KAAK,QAAQ;gBACT,SAAS,GAAG,cAAc;gBAC1B;AACJ,YAAA;gBACI,SAAS,GAAG,EAAE;gBACd;;AAER,QAAA,OAAO,SAAS;;IAEpB,YAAY,GAAA;AACR,QAAA,QAAQ,IAAI,CAAC,IAAI;AACb,YAAA,KAAK,KAAK;gBACN,OAAO,SAAS,CAAC,OAAO;AAC5B,YAAA,KAAK,QAAQ;gBACT,OAAO,SAAS,CAAC,OAAO;AAC5B,YAAA;AACI,gBAAA,OAAO,IAAI;;;IAGvB,MAAM,GAAA;AACF,QAAA,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC,aAAa,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,CAAC,CAAC,KAAI;AAC9tB,gBAAA,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC;AACnC,aAAC,EAAE,UAAU,EAAE,CAAC,CAAC,KAAI;AACjB,gBAAA,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC;aAC9B,EAAE,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;","x_google_ignoreList":[0,1]}

package/dist/esm/z-myz-card-dictionary.entry.js

@@ -0,0 +1,33 @@
+import { r as registerInstance, c as createEvent, h } from './index-Cam6wBSi.js';
+import { n as ButtonSize, B as ButtonVariant } from './index-B2-dCTD2.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 ZMyzCardDictionary = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cardFlipped = createEvent(this, "cardFlipped", 7);
+        this.name = undefined;
+        this.cover = undefined;
+        this.disabled = false;
+        this.flipped = false;
+        this.flipbuttonlabel = "INFO";
+        this.hideinfobtn = false;
+    }
+    handleFlipCard(e) {
+        this.flipCard(e.detail);
+    }
+    flipCard(showBack = true) {
+        this.flipped = showBack;
+        this.cardFlipped.emit(showBack);
+    }
+    render() {
+        return (h("div", { key: 'ad61aba485ff07b6887c21e377d6290db3aef346' }, h("z-myz-card", { key: '2e56928077dd16aab521328b3e97e1ec43ef790e' }, h("z-myz-card-header", { key: '51a8db93d985cd985ddf474b77bfa6a808e7b234', titolo: this.name }), h("div", { key: 'c7d27041211bdbe02ff47cc0b2ae044a60cf7b25', class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { key: '574d6a0c6e682a588ec6d008a4b5d8fa68d145c8', class: "front" }, h("z-myz-card-body", { key: '5bbcf71f86ce10d1fee29f73a4468bccfd6f1f71' }, h("z-myz-card-cover", { key: '3f2de502f052593fc9ab2914c23ab33ff34c9f57', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { key: '7e34990fb7d304761e160e8536c141851d0db661', 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: '50707395dd1da4630b039d855199269038e26b80', class: "back" }, h("slot", { key: '706088d854a9bb10a8f8a3fb9ef5852e869dd51a', name: "info" }))), h("slot", { key: '3917bc8881f8b0d2c038fb5c61107c2ca7fd27c3' }))));
+    }
+};
+ZMyzCardDictionary.style = stylesCss;
+
+export { ZMyzCardDictionary as z_myz_card_dictionary };
+//# sourceMappingURL=z-myz-card-dictionary.entry.js.map
+
+//# sourceMappingURL=z-myz-card-dictionary.entry.js.map

package/dist/esm/z-myz-card-dictionary.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-myz-card-dictionary.entry.js","sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/snowflakes/myz/card/z-myz-card-dictionary/styles.css?tag=z-myz-card-dictionary&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/snowflakes/myz/card/z-myz-card-dictionary/index.js"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host z-myz-card {\n  --card-overflow: visible;\n}\n\n:host > div {\n  position: relative;\n  width: 100%;\n  height: 522px;\n  transition: -webkit-transform 0.5s ease-out;\n  transition: transform 0.5s ease-out;\n  transition:\n    transform 0.5s ease-out,\n    -webkit-transform 0.5s ease-out;\n}\n\n:host > div .content {\n  position: relative;\n  z-index: 2;\n  width: 100%;\n  height: 522px;\n  transform-style: preserve-3d;\n  transition: -webkit-transform 0.5s ease-out;\n  transition: transform 0.5s ease-out;\n  transition:\n    transform 0.5s ease-out,\n    -webkit-transform 0.5s ease-out;\n}\n\n:host > div .content.flipped {\n  margin-top: -2px;\n  transform: rotateY(180deg);\n}\n\n:host > div .front,\n:host > div .back {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  backface-visibility: hidden;\n}\n\n:host > div .front {\n  z-index: 2;\n  top: 0;\n  left: 0;\n  transform: rotateY(0deg);\n}\n\n:host > div .front z-button {\n  position: absolute;\n  z-index: 3;\n  top: calc(var(--space-unit) * 0.5);\n  left: calc(-1 * var(--space-unit));\n}\n\n:host > div .back {\n  z-index: 1;\n  top: 0;\n  left: 0;\n  display: flex;\n  justify-content: center;\n  padding: 0 var(--space-unit);\n  margin-left: calc(-1 * var(--space-unit));\n  transform: rotateY(180deg);\n}\n\n.hide-info {\n  display: none;\n}\n","import { h } from \"@stencil/core\";\nimport { ButtonSize, ButtonVariant } from \"../../../../beans\";\n/**\n * @slot  - generic card slot\n * @slot info - flipped card info\n */\nexport class ZMyzCardDictionary {\n    constructor() {\n        this.name = undefined;\n        this.cover = undefined;\n        this.disabled = false;\n        this.flipped = false;\n        this.flipbuttonlabel = \"INFO\";\n        this.hideinfobtn = false;\n    }\n    handleFlipCard(e) {\n        this.flipCard(e.detail);\n    }\n    flipCard(showBack = true) {\n        this.flipped = showBack;\n        this.cardFlipped.emit(showBack);\n    }\n    render() {\n        return (h(\"div\", { key: 'ad61aba485ff07b6887c21e377d6290db3aef346' }, h(\"z-myz-card\", { key: '2e56928077dd16aab521328b3e97e1ec43ef790e' }, h(\"z-myz-card-header\", { key: '51a8db93d985cd985ddf474b77bfa6a808e7b234', titolo: this.name }), h(\"div\", { key: 'c7d27041211bdbe02ff47cc0b2ae044a60cf7b25', class: `content ${this.flipped ? \"flipped\" : \"\"}` }, h(\"div\", { key: '574d6a0c6e682a588ec6d008a4b5d8fa68d145c8', class: \"front\" }, h(\"z-myz-card-body\", { key: '5bbcf71f86ce10d1fee29f73a4468bccfd6f1f71' }, h(\"z-myz-card-cover\", { key: '3f2de502f052593fc9ab2914c23ab33ff34c9f57', slot: \"cover\", titolo: this.name, img: this.cover, faded: this.disabled })), h(\"z-button\", { key: '7e34990fb7d304761e160e8536c141851d0db661', 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: '50707395dd1da4630b039d855199269038e26b80', class: \"back\" }, h(\"slot\", { key: '706088d854a9bb10a8f8a3fb9ef5852e869dd51a', name: \"info\" }))), h(\"slot\", { key: '3917bc8881f8b0d2c038fb5c61107c2ca7fd27c3' }))));\n    }\n    static get is() { return \"z-myz-card-dictionary\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"name\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"card title\"\n                },\n                \"attribute\": \"name\",\n                \"reflect\": false\n            },\n            \"cover\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"card cover\"\n                },\n                \"attribute\": \"cover\",\n                \"reflect\": false\n            },\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"card is disabled\"\n                },\n                \"attribute\": \"disabled\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"flipped\": {\n                \"type\": \"boolean\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"card is flipped\"\n                },\n                \"attribute\": \"flipped\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"flipbuttonlabel\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"flip button label\"\n                },\n                \"attribute\": \"flipbuttonlabel\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"INFO\\\"\"\n            },\n            \"hideinfobtn\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"hide info button\"\n                },\n                \"attribute\": \"hideinfobtn\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"cardFlipped\",\n                \"name\": \"cardFlipped\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"when card is flipped\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get listeners() {\n        return [{\n                \"name\": \"flipCard\",\n                \"method\": \"handleFlipCard\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,wmCAAwmC;;MCM7mC,kBAAkB,GAAA,MAAA;AAC3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AACI,QAAA,IAAI,CAAC,IAAI,GAAG,SAAS;AACrB,QAAA,IAAI,CAAC,KAAK,GAAG,SAAS;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACrB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,QAAA,IAAI,CAAC,eAAe,GAAG,MAAM;AAC7B,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AAC3B;AACD,IAAA,cAAc,CAAC,CAAC,EAAA;AACZ,QAAA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;;IAE3B,QAAQ,CAAC,QAAQ,GAAG,IAAI,EAAA;AACpB,QAAA,IAAI,CAAC,OAAO,GAAG,QAAQ;AACvB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAEnC,MAAM,GAAA;QACF,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,EAAE,CAAC,CAAC,YAAY,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,EAAE,CAAC,CAAC,mBAAmB,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,CAAA,CAAE,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,iBAAiB,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,EAAE,CAAC,CAAC,kBAAkB,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,aAAa,CAAC,SAAS,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAE,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,CAAC,CAAC;;;;;;;","x_google_ignoreList":[0,1]}