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

package/dist/components/z-menu.js

@@ -1,353 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { g as KeyboardCode } from './index2.js';
-import { a as containsElement } from './utils.js';
-import { d as defineCustomElement$2 } from './index10.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 ZMenuStyle0 = stylesCss;
-
-const isZMenuSection = (el) => (el === null || el === void 0 ? void 0 : el.tagName) === "Z-MENU-SECTION";
-const ZMenu$1 = /*@__PURE__*/ proxyCustomElement(class ZMenu extends HTMLElement {
-    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() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        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 this; }
-    static get watchers() { return {
-        "open": ["onOpenChanged"],
-        "htmlTabindex": ["setLabelA11yAttrs"]
-    }; }
-    static get style() { return ZMenuStyle0; }
-}, [1, "z-menu", {
-        "active": [516],
-        "floating": [516],
-        "open": [1540],
-        "verticalContext": [516, "vertical-context"],
-        "htmlTabindex": [1026, "html-tabindex"],
-        "hasHeader": [32],
-        "hasContent": [32],
-        "setFocus": [64],
-        "focusLastItem": [64]
-    }, [[4, "click", "onItemClick"], [0, "keydown", "onKeyDown"]], {
-        "open": ["onOpenChanged"],
-        "htmlTabindex": ["setLabelA11yAttrs"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-menu", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-menu":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZMenu$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZMenu = ZMenu$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZMenu, defineCustomElement };
-
-//# sourceMappingURL=z-menu.js.map
+import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as s,Host as o,transformTag as n}from"@stencil/core/internal/client";import{g as a}from"./index2.js";import{a as l}from"./utils.js";import{d as h}from"./index3.js";const r=t=>"Z-MENU-SECTION"===(null==t?void 0:t.tagName),c=t(class extends e{get focusableItem(){return this.items.find((t=>r(t)?0===t.htmlTabindex:0===t.tabIndex))}toggle(){this.hasContent&&(this.open=!this.open)}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=null==e?void 0:e.textContent,this.setLabelA11yAttrs()}reflow(t=!1){if(this.floating){if(this.content&&this.hasContent){const{style:t}=this.content,{left:e}=this.host.getBoundingClientRect(),i=getComputedStyle(this.content).width,s=i?parseFloat(i.replace("px","")):375;t.left=Math.min(window.innerWidth-e-s-30,0)+"px"}t&&(this.raf=requestAnimationFrame(this.reflow.bind(this,t)))}}checkContent(){this.hasHeader=!!this.host.querySelectorAll("[slot=header]").length,this.hasContent=!!this.host.querySelectorAll("[slot=item]").length||this.hasHeader}setItemTabindex(t,e){r(t)?t.htmlTabindex=e:t.tabIndex=e}setItemsA11yAttrs(){this.items.forEach(((t,e)=>{this.setItemTabindex(t,0===e?0:-1),r(t)||t.setAttribute("role","menuitem")}))}onItemsChange(){this.checkContent(),this.items=Array.from(this.host.children).filter((({slot:t})=>"item"===t)),this.setItemsA11yAttrs(),this.items.forEach((t=>{r(t)||(t.dataset.text=t.textContent)}))}moveFocus(t,e){r(t)?t.setFocus():(t.tabIndex=0,setTimeout((()=>{t.focus()}),100)),e&&this.setItemTabindex(e,-1)}onLabelClick(){this.toggle(),this.setFocus()}onLabelKeydown(t){if(t.key===a.ENTER||t.key===a.SPACE)return t.preventDefault(),t.stopPropagation(),this.toggle(),void(this.open&&this.moveFocus(this.items[0]));this.verticalContext&&(t.key!==a.ARROW_RIGHT||this.open||(t.preventDefault(),t.stopPropagation(),this.open=!0,this.moveFocus(this.items[0])))}async setFocus(){this.htmlTabindex=0,(this.hasContent?this.labelButton:this.host.firstElementChild).focus()}async focusLastItem(){const t=this.items[this.items.length-1];r(t)&&t.open?t.focusLastItem():this.moveFocus(t)}onOpenChanged(){if(!this.open)return cancelAnimationFrame(this.raf),this.closed.emit(),void this.items.forEach((t=>{r(t)&&t.open&&(t.open=!1)}));this.setItemsA11yAttrs(),this.opened.emit(),this.floating&&this.reflow(!0)}setLabelA11yAttrs(){if(this.hasContent&&this.labelButton)return void(this.labelButton.tabIndex=this.htmlTabindex);const t=this.host.firstElementChild;t.role="menuitem",t.tabIndex=this.htmlTabindex}onItemClick(t){const e=this.items.find((e=>l(e,t.target)));e&&this.items.forEach((t=>{t!==e&&(r(t)?t.htmlTabindex=-1:t.tabIndex=-1)}))}onKeyDown(t){var e;if(this.hasContent)switch(t.key){case a.ESC:if(!this.open)break;t.stopPropagation(),t.preventDefault(),this.open=!1,this.setFocus();break;case a.ARROW_DOWN:{if(document.activeElement===this.host){if(this.verticalContext&&!this.open)break;t.stopPropagation(),t.preventDefault(),this.open||(this.open=!0),this.moveFocus(this.items[0]);break}const e=this.items.indexOf(this.focusableItem);if(this.verticalContext&&e===this.items.length-1){this.setItemTabindex(this.items[e],-1),this.htmlTabindex=0;break}t.stopPropagation(),t.preventDefault();const i=this.items[e+1];this.moveFocus(null!=i?i:this.items[0],this.focusableItem);break}case a.ARROW_UP:{if(document.activeElement===this.host){if(this.verticalContext)break;t.stopPropagation(),t.preventDefault(),this.open||(this.open=!0),this.moveFocus(this.items[this.items.length-1],this.focusableItem);break}t.stopPropagation(),t.preventDefault();const i=this.items.indexOf(this.focusableItem);if(0===i&&this.verticalContext){this.setItemTabindex(this.focusableItem,-1),this.setFocus();break}const s=null!==(e=this.items[i-1])&&void 0!==e?e:this.items[this.items.length-1];if(r(s)&&s.open){this.setItemTabindex(this.focusableItem,-1),s.focusLastItem();break}this.moveFocus(s,this.focusableItem);break}case a.ARROW_LEFT:if(!this.open||!this.verticalContext)break;t.preventDefault(),t.stopPropagation(),this.open=!1,this.setFocus()}}constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.opened=i(this,"opened",7),this.closed=i(this,"closed",7),this.floating=!0,this.open=!1,this.verticalContext=!1,this.htmlTabindex=-1,this.items=[],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(){return this.hasContent?s(o,null,s("button",{ref:t=>this.labelButton=t,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},s("slot",{onSlotchange:this.onLabelSlotChange}),s("z-icon",{name:this.open?"chevron-up":"chevron-down"})),s("div",{class:"content",ref:t=>this.content=t},this.hasHeader&&s("header",{class:"header"},s("slot",{name:"header",onSlotchange:this.checkContent})),s("div",{class:"items",role:"menu"},s("slot",{name:"item",onSlotchange:this.onItemsChange})))):s("div",{class:"menu-label"},s("slot",{onSlotchange:this.onLabelSlotChange}))}get host(){return this}static get watchers(){return{open:[{onOpenChanged:0}],htmlTabindex:[{setLabelA11yAttrs:0}]}}static get style(){return':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)}'}},[257,"z-menu",{active:[516],floating:[516],open:[1540],verticalContext:[516,"vertical-context"],htmlTabindex:[1026,"html-tabindex"],hasHeader:[32],hasContent:[32],setFocus:[64],focusLastItem:[64]},[[4,"click","onItemClick"],[0,"keydown","onKeyDown"]],{open:[{onOpenChanged:0}],htmlTabindex:[{setLabelA11yAttrs:0}]}]),d=c,m=function(){"undefined"!=typeof customElements&&["z-menu","z-icon"].forEach((t=>{switch(t){case"z-menu":customElements.get(n(t))||customElements.define(n(t),c);break;case"z-icon":customElements.get(n(t))||h()}}))};export{d as ZMenu,m as defineCustomElement}

package/dist/components/z-modal.js

@@ -1,8 +1 @@
-import { Z as ZModal$1, d as defineCustomElement$1 } from './index17.js';
-
-const ZModal = ZModal$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZModal, defineCustomElement };
-
-//# sourceMappingURL=z-modal.js.map
+import{Z as o,d as s}from"./index21.js";const r=o,t=s;export{r as ZModal,t as defineCustomElement}

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

@@ -1,101 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { o as AlertType } from './index2.js';
-import { d as defineCustomElement$3 } from './index3.js';
-import { d as defineCustomElement$2 } from './index10.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 ZMyzCardAlertStyle0 = stylesCss;
-
-const ZMyzCardAlert$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardAlert extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        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: 'cfc5ba625b1f657d2717a2ac5aae0ad070ad4177', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: 'c74a674717764ac11f4e71dcaa034ba950c0a1f8', type: this.getAlertType() }, h("div", { key: 'e289a588eee12751d10964bd9244251d0fef88b4', class: "relative-container" }, h("z-icon", { key: 'afe5a16bd61de53fdb2ac55e722c3d64ecf22bdf', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: 'e7b11a13ba83bcd214b11e0e8bb89ef7976b356c', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { key: 'cb5e55bbfb7afdbd2a19b7b612b2412b1a35fa80', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
-                this.handleActionButtonClick(e);
-            }, onKeyPress: (e) => {
-                this.handleSpaceKeyPress(e);
-            } }, this.actiontext))))));
-    }
-    static get style() { return ZMyzCardAlertStyle0; }
-}, [1, "z-myz-card-alert", {
-        "iconname": [1],
-        "contenttext": [1],
-        "actiontext": [1],
-        "type": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-myz-card-alert", "z-alert", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-myz-card-alert":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZMyzCardAlert$1);
-            }
-            break;
-        case "z-alert":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZMyzCardAlert = ZMyzCardAlert$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZMyzCardAlert, defineCustomElement };
-
-//# sourceMappingURL=z-myz-card-alert.js.map
+import{proxyCustomElement as e,HTMLElement as t,createEvent as r,h as a,transformTag as i}from"@stencil/core/internal/client";import{o as n}from"./index2.js";import{d as o}from"./index4.js";import{d as s}from"./index3.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.undoAction=r(this,"undoAction",7)}emitUndoAction(){this.undoAction.emit({actionType:this.type})}handleSpaceKeyPress(e){32!=e.keyCode&&13!=e.keyCode||(e.preventDefault(),this.emitUndoAction())}handleActionButtonClick(e){e.preventDefault(),this.emitUndoAction()}retrieveClass(){let e="";switch(this.type){case"add":e="add-alert";break;case"remove":e="remove-alert";break;default:e=""}return e}getAlertType(){switch(this.type){case"add":return n.SUCCESS;case"remove":return n.WARNING;default:return null}}render(){return a("div",{key:"82e172d48b0ba69182d6a52a845d0e416904e572",class:"alert-external-wrapper "+this.retrieveClass()},a("z-alert",{key:"29082fe82598f41a1907d28ccbbf10df441f8cb1",type:this.getAlertType()},a("div",{key:"4164795668632ce3d8b63354109a4724b93d9e1a",class:"relative-container"},a("z-icon",{key:"8fe40b4f9c68e2e1a4e8acc26a95cb0641c917f4",name:this.iconname,width:18,height:18,class:this.retrieveClass()}),a("span",{key:"92dbd73988db48a5d4219d45953889787863d9ad",class:"content-text"},this.contenttext),this.actiontext&&!!this.actiontext.trim().length&&a("span",{key:"32882b967d8dc5971d39d000ffa007c7e6b27f6e",role:"button",tabindex:"0",class:"content-action",onClick:e=>{this.handleActionButtonClick(e)},onKeyPress:e=>{this.handleSpaceKeyPress(e)}},this.actiontext))))}static get style(){return":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}"}},[1,"z-myz-card-alert",{iconname:[1],contenttext:[1],actiontext:[1],type:[1]}]),l=c,d=function(){"undefined"!=typeof customElements&&["z-myz-card-alert","z-alert","z-icon"].forEach((e=>{switch(e){case"z-myz-card-alert":customElements.get(i(e))||customElements.define(i(e),c);break;case"z-alert":customElements.get(i(e))||o();break;case"z-icon":customElements.get(i(e))||s()}}))};export{l as ZMyzCardAlert,d as defineCustomElement}

package/dist/components/z-myz-card-body.js

@@ -1,8 +1 @@
-import { Z as ZMyzCardBody$1, d as defineCustomElement$1 } from './index19.js';
-
-const ZMyzCardBody = ZMyzCardBody$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZMyzCardBody, defineCustomElement };
-
-//# sourceMappingURL=z-myz-card-body.js.map
+import{Z as o,d as s}from"./index23.js";const r=o,t=s;export{r as ZMyzCardBody,t as defineCustomElement}

package/dist/components/z-myz-card-cover.js

@@ -1,8 +1 @@
-import { Z as ZMyzCardCover$1, d as defineCustomElement$1 } from './index20.js';
-
-const ZMyzCardCover = ZMyzCardCover$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZMyzCardCover, defineCustomElement };
-
-//# sourceMappingURL=z-myz-card-cover.js.map
+import{Z as o,d as s}from"./index24.js";const r=o,t=s;export{r as ZMyzCardCover,t as defineCustomElement}

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

@@ -1,94 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { B as ButtonVariant, d as ButtonSize } from './index2.js';
-import { d as defineCustomElement$7 } from './index5.js';
-import { d as defineCustomElement$6 } from './index10.js';
-import { d as defineCustomElement$5 } from './index18.js';
-import { d as defineCustomElement$4 } from './index19.js';
-import { d as defineCustomElement$3 } from './index20.js';
-import { d as defineCustomElement$2 } from './index21.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;
-
-const ZMyzCardDictionary$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardDictionary extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        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: 'e6ec0b5054975547584bbee8759d987b72134d29' }, h("z-myz-card", { key: 'b074508d5e487ab311aab750a9595c65d0bb182f' }, h("z-myz-card-header", { key: 'eace632cf520eac6a109790acb47d08f03f7f88c', titolo: this.name }), h("div", { key: '9fc66378a96351d6251e0d700c3f93046343cb64', class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { key: '9a90a3b496bdb8dbbe53820536f41f91aca5fe8f', class: "front" }, h("z-myz-card-body", { key: 'b1a8aee7f1b172fb8070e06b5d929c9c726c870e' }, h("z-myz-card-cover", { key: '8e51755d66e3d0b1081f34cfbbcff860b325ac52', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { key: '9ebd9fcb0bf970b3ae9250048809a5427d7f7586', 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: '03cc1ad4636d1cf4d36ef062f9f66d07a2960d38', class: "back" }, h("slot", { key: '2b766a05250d41a648cb07e072707a16fa45c484', name: "info" }))), h("slot", { key: '288e7018302b221aa6244b01fc5f4b8140297078' }))));
-    }
-    static get style() { return ZMyzCardDictionaryStyle0; }
-}, [1, "z-myz-card-dictionary", {
-        "name": [1],
-        "cover": [1],
-        "disabled": [4],
-        "flipped": [1028],
-        "flipbuttonlabel": [1],
-        "hideinfobtn": [4]
-    }, [[0, "flipCard", "handleFlipCard"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-myz-card-dictionary", "z-button", "z-icon", "z-myz-card", "z-myz-card-body", "z-myz-card-cover", "z-myz-card-header"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-myz-card-dictionary":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZMyzCardDictionary$1);
-            }
-            break;
-        case "z-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "z-myz-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "z-myz-card-body":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "z-myz-card-cover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "z-myz-card-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZMyzCardDictionary = ZMyzCardDictionary$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZMyzCardDictionary, defineCustomElement };
-
-//# sourceMappingURL=z-myz-card-dictionary.js.map
+import{proxyCustomElement as e,HTMLElement as t,createEvent as a,h as s,transformTag as i}from"@stencil/core/internal/client";import{d as o,B as d}from"./index2.js";import{d as r}from"./index5.js";import{d as n}from"./index3.js";import{d as c}from"./index22.js";import{d as f}from"./index23.js";import{d as m}from"./index24.js";import{d as l}from"./index25.js";const b=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.cardFlipped=a(this,"cardFlipped",7),this.disabled=!1,this.flipped=!1,this.flipbuttonlabel="INFO",this.hideinfobtn=!1}handleFlipCard(e){this.flipCard(e.detail)}flipCard(e=!0){this.flipped=e,this.cardFlipped.emit(e)}render(){return s("div",{key:"60de4d7147f69c030e9da4d23888db5c7113a326"},s("z-myz-card",{key:"e570e992fe0b53c5eb29eb93656641221774c088"},s("z-myz-card-header",{key:"96b775f5d46d83937b9c1dec8e4713f480267f06",titolo:this.name}),s("div",{key:"a312bb379f5a6cbeba6450dd2ad766789f9e8d52",class:"content "+(this.flipped?"flipped":"")},s("div",{key:"76d42b6ff3f61fe9a8fe66bddb99c05c5e490b56",class:"front"},s("z-myz-card-body",{key:"7009b12a765d3b1fa0080de90d6b4c060721c164"},s("z-myz-card-cover",{key:"6eee93ed02af8745eaa55392e6dc6846c53bd1fa",slot:"cover",titolo:this.name,img:this.cover,faded:this.disabled})),s("z-button",{key:"a2af4a8800763389c129df827274ce8449406a6a",class:{"hide-info":this.hideinfobtn},variant:d.SECONDARY,icon:"informationsource",size:o.X_SMALL,onClick:()=>this.flipCard(!0),disabled:this.flipped},this.flipbuttonlabel)),s("div",{key:"b2ba007a530273d1bb04fa952af6d61e32b0e3f3",class:"back"},s("slot",{key:"72287c64ce43c9980ee6a1d0ad139e998e90a51a",name:"info"}))),s("slot",{key:"ab88bd78b8c88f9fdad8d86df861d2c44eedcb0c"})))}static get style(){return":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,     -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,     -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}"}},[257,"z-myz-card-dictionary",{name:[1],cover:[1],disabled:[4],flipped:[1028],flipbuttonlabel:[1],hideinfobtn:[4]},[[0,"flipCard","handleFlipCard"]]]),h=b,p=function(){"undefined"!=typeof customElements&&["z-myz-card-dictionary","z-button","z-icon","z-myz-card","z-myz-card-body","z-myz-card-cover","z-myz-card-header"].forEach((e=>{switch(e){case"z-myz-card-dictionary":customElements.get(i(e))||customElements.define(i(e),b);break;case"z-button":customElements.get(i(e))||r();break;case"z-icon":customElements.get(i(e))||n();break;case"z-myz-card":customElements.get(i(e))||c();break;case"z-myz-card-body":customElements.get(i(e))||f();break;case"z-myz-card-cover":customElements.get(i(e))||m();break;case"z-myz-card-header":customElements.get(i(e))||l()}}))};export{h as ZMyzCardDictionary,p as defineCustomElement}