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

package/dist/components/z-menu-deprecated.js

@@ -1,144 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './index10.js';
-
-const stylesCss = ":host,::slotted(*),*{box-sizing:border-box}:host{position:relative;display:inline-flex;flex-direction:column;--z-menu-label-color:var(--color-default-text)}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{padding:0;border:0;margin:0;background:transparent;border-radius:0;color:inherit;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;padding-right:calc(var(--space-unit) * 0.5);padding-left:calc(var(--space-unit) * 0.5);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);box-shadow:var(--shadow-focus-primary)}.menu-label .menu-label-content{position:relative;display:flex;align-items:center}:host(:is([active],[open])) .menu-label-content,.menu-label:focus-within .menu-label-content{font-weight:var(--font-bd)}:host(:is([active],[open])) .menu-label-content ::slotted(*),.menu-label:focus-within .menu-label-content ::slotted(*){letter-spacing:normal}:host .menu-label .menu-label-content ::slotted(*:not([slot]):focus:focus-visible){box-shadow:none !important}:host(:is([active],[open],[vertical-context])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{position:absolute;bottom:0;left:0;width:100%;content:\"\";pointer-events:none}:host([vertical-context]) .menu-label-content::after{height:var(--border-size-small);background-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{height:var(--border-size-large);background-color:var(--color-primary01)}::slotted([data-text])::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])::after{display:none}}::slotted([data-text]){display:inline-flex;flex-direction:column}.menu-label .menu-label-content ::slotted(*){display:inline-flex;width:100%;margin:0;appearance:none;color:var(--z-menu-label-color);font-family:var(--font-family-sans);font-size:var(--font-size-5);font-weight:inherit;letter-spacing:0.36px;line-height:1.2;outline:none}.menu-label .menu-label-content ::slotted(*),.menu-label .menu-label-content z-icon{padding:var(--space-unit) 0}.menu-label .menu-label-content z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:currentcolor}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:var(--space-unit) var(--space-unit) 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.25;outline:none}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot=\"item\"]:not(z-menu-section)){padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--color-surface05)}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"]:active){border-color:var(--color-primary01);font-weight:var(--font-bd)}";
-const ZMenuDeprecatedStyle0 = stylesCss;
-
-const ZMenuDeprecated$1 = /*@__PURE__*/ proxyCustomElement(class ZMenuDeprecated extends HTMLElement {
-    toggle() {
-        if (!this.hasContent) {
-            return;
-        }
-        this.open = !this.open;
-        this.open ? this.opened.emit() : this.closed.emit();
-    }
-    /** Close the floating list when a click is performed outside of this Element. */
-    handleClick(ev) {
-        if (!this.floating || !this.open || this.hostElement.contains(ev.target)) {
-            return;
-        }
-        this.reflow();
-        this.open = false;
-        this.closed.emit();
-    }
-    onOpenChanged() {
-        if (this.open) {
-            this.reflow(true);
-        }
-        else {
-            cancelAnimationFrame(this.raf);
-        }
-    }
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.opened = createEvent(this, "opened", 7);
-        this.closed = createEvent(this, "closed", 7);
-        this.active = undefined;
-        this.floating = false;
-        this.open = false;
-        this.verticalContext = false;
-        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.onItemsChange = this.onItemsChange.bind(this);
-    }
-    componentWillLoad() {
-        this.checkContent();
-    }
-    /**
-     * 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;
-    }
-    /**
-     * 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.content) {
-            const { style } = this.content;
-            const { left } = this.hostElement.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.hostElement.querySelectorAll("[slot=header]").length;
-        this.hasContent = !!this.hostElement.querySelectorAll("[slot=item]").length || this.hasHeader;
-    }
-    /**
-     * Set `menuitem` role to all menu items.
-     * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).
-     */
-    onItemsChange() {
-        this.checkContent();
-        const items = this.hostElement.querySelectorAll("[slot=item]");
-        items.forEach((item) => {
-            item.setAttribute("role", "menuitem");
-            item.dataset.text = item.textContent;
-        });
-    }
-    renderMenuLabel() {
-        if (this.hasContent) {
-            return (h("button", { class: "menu-label", "aria-expanded": this.open ? "true" : "false", "aria-label": this.open ? "Chiudi menù" : "Apri menù", onClick: this.toggle }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }), h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" }))));
-        }
-        return (h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }))));
-    }
-    render() {
-        return (h(Host, { key: '7b64ae06d79dd727299f86cb7f9d50a851776b90' }, this.renderMenuLabel(), this.hasContent && (h("div", { key: '9922d654e0e78bef5763af1a89ff838c86a1fe30', class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { key: 'c08ed7a8634b0cdc71b0052f4327134bdc5c8736', class: "header" }, h("slot", { key: '0a107099ee3c2de8727e6ea4f863ba46c67c1859', name: "header", onSlotchange: this.checkContent }))), h("div", { key: 'fa85f72658bb7f7a710ddf4fd7891e9e379845a0', class: "items", role: "menu" }, h("slot", { key: 'cc8b6625acaad177c516cc415a841662ce654c28', name: "item", onSlotchange: this.onItemsChange }))))));
-    }
-    get hostElement() { return this; }
-    static get watchers() { return {
-        "open": ["onOpenChanged"]
-    }; }
-    static get style() { return ZMenuDeprecatedStyle0; }
-}, [1, "z-menu-deprecated", {
-        "active": [516],
-        "floating": [516],
-        "open": [1540],
-        "verticalContext": [516, "vertical-context"],
-        "hasHeader": [32],
-        "hasContent": [32]
-    }, [[4, "click", "handleClick"]], {
-        "open": ["onOpenChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-menu-deprecated", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-menu-deprecated":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZMenuDeprecated$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZMenuDeprecated = ZMenuDeprecated$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZMenuDeprecated, defineCustomElement };
-
-//# sourceMappingURL=z-menu-deprecated.js.map
+import{proxyCustomElement as e,HTMLElement as t,createEvent as n,h as i,Host as o,transformTag as a}from"@stencil/core/internal/client";import{d as l}from"./index3.js";const s=e(class extends t{toggle(){this.hasContent&&(this.open=!this.open,this.open?this.opened.emit():this.closed.emit())}handleClick(e){this.floating&&this.open&&!this.hostElement.contains(e.target)&&(this.reflow(),this.open=!1,this.closed.emit())}onOpenChanged(){this.open?this.reflow(!0):cancelAnimationFrame(this.raf)}constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.opened=n(this,"opened",7),this.closed=n(this,"closed",7),this.floating=!1,this.open=!1,this.verticalContext=!1,this.toggle=this.toggle.bind(this),this.checkContent=this.checkContent.bind(this),this.onLabelSlotChange=this.onLabelSlotChange.bind(this),this.onItemsChange=this.onItemsChange.bind(this)}componentWillLoad(){this.checkContent()}onLabelSlotChange(e){const t=e.target.assignedElements()[0];t.dataset.text=null==t?void 0:t.textContent}reflow(e=!1){if(this.content){const{style:e}=this.content,{left:t}=this.hostElement.getBoundingClientRect(),n=getComputedStyle(this.content).width,i=n?parseFloat(n.replace("px","")):375;e.left=Math.min(window.innerWidth-t-i-30,0)+"px"}e&&(this.raf=requestAnimationFrame(this.reflow.bind(this,e)))}checkContent(){this.hasHeader=!!this.hostElement.querySelectorAll("[slot=header]").length,this.hasContent=!!this.hostElement.querySelectorAll("[slot=item]").length||this.hasHeader}onItemsChange(){this.checkContent(),this.hostElement.querySelectorAll("[slot=item]").forEach((e=>{e.setAttribute("role","menuitem"),e.dataset.text=e.textContent}))}renderMenuLabel(){return this.hasContent?i("button",{class:"menu-label","aria-expanded":this.open?"true":"false","aria-label":this.open?"Chiudi menù":"Apri menù",onClick:this.toggle},i("div",{class:"menu-label-content"},i("slot",{onSlotchange:this.onLabelSlotChange}),i("z-icon",{name:this.open?"chevron-up":"chevron-down"}))):i("div",{class:"menu-label"},i("div",{class:"menu-label-content"},i("slot",{onSlotchange:this.onLabelSlotChange})))}render(){return i(o,{key:"c0cc18338db770e7b369bce7e469445219326566"},this.renderMenuLabel(),this.hasContent&&i("div",{key:"c895c377c1cc572c18bbc56e9cb8c513346d1ae4",class:"content",ref:e=>this.content=e},this.hasHeader&&i("header",{key:"17df894168c27a4ec0599d10bb885761b5eded54",class:"header"},i("slot",{key:"d50f55ef51bdf388a75bc8739c29a58f32c6b316",name:"header",onSlotchange:this.checkContent})),i("div",{key:"948157a99d60c696fa97b8b904366dc0992e87da",class:"items",role:"menu"},i("slot",{key:"e93150d2a5e7c1e33d7cfe8f297e9990e0d5c01e",name:"item",onSlotchange:this.onItemsChange}))))}get hostElement(){return this}static get watchers(){return{open:[{onOpenChanged:0}]}}static get style(){return':host,::slotted(*),*{box-sizing:border-box}:host{position:relative;display:inline-flex;flex-direction:column;--z-menu-label-color:var(--color-default-text)}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{padding:0;border:0;margin:0;background:transparent;border-radius:0;color:inherit;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;padding-right:calc(var(--space-unit) * 0.5);padding-left:calc(var(--space-unit) * 0.5);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);box-shadow:var(--shadow-focus-primary)}.menu-label .menu-label-content{position:relative;display:flex;align-items:center}:host(:is([active],[open])) .menu-label-content,.menu-label:focus-within .menu-label-content{font-weight:var(--font-bd)}:host(:is([active],[open])) .menu-label-content ::slotted(*),.menu-label:focus-within .menu-label-content ::slotted(*){letter-spacing:normal}:host .menu-label .menu-label-content ::slotted(*:not([slot]):focus:focus-visible){box-shadow:none !important}:host(:is([active],[open],[vertical-context])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{position:absolute;bottom:0;left:0;width:100%;content:"";pointer-events:none}:host([vertical-context]) .menu-label-content::after{height:var(--border-size-small);background-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label .menu-label-content::after,.menu-label .menu-label-content:hover::after,.menu-label:focus-within .menu-label-content::after{height:var(--border-size-large);background-color:var(--color-primary01)}::slotted([data-text])::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])::after{display:none}}::slotted([data-text]){display:inline-flex;flex-direction:column}.menu-label .menu-label-content ::slotted(*){display:inline-flex;width:100%;margin:0;appearance:none;color:var(--z-menu-label-color);font-family:var(--font-family-sans);font-size:var(--font-size-5);font-weight:inherit;letter-spacing:0.36px;line-height:1.2;outline:none}.menu-label .menu-label-content ::slotted(*),.menu-label .menu-label-content z-icon{padding:var(--space-unit) 0}.menu-label .menu-label-content z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:currentcolor}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:var(--space-unit) var(--space-unit) 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.25;outline:none}.items>::slotted([slot="item"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot="item"]:not(z-menu-section)){padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--color-surface05)}.items>::slotted([slot="item"]:hover),.items>::slotted([slot="item"]:focus:focus-visible),.items>::slotted([slot="item"]:active){border-color:var(--color-primary01);font-weight:var(--font-bd)}'}},[257,"z-menu-deprecated",{active:[516],floating:[516],open:[1540],verticalContext:[516,"vertical-context"],hasHeader:[32],hasContent:[32]},[[4,"click","handleClick"]],{open:[{onOpenChanged:0}]}]),c=s,r=function(){"undefined"!=typeof customElements&&["z-menu-deprecated","z-icon"].forEach((e=>{switch(e){case"z-menu-deprecated":customElements.get(a(e))||customElements.define(a(e),s);break;case"z-icon":customElements.get(a(e))||l()}}))};export{c as ZMenuDeprecated,r as defineCustomElement}

package/dist/components/z-menu-section-deprecated.js

@@ -1,84 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './index10.js';
-
-const stylesCss = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-primary01)}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items>::slotted([slot=\"item\"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot=\"item\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-primary01)}.items>::slotted([slot=\"item\"]:hover),.items>::slotted([slot=\"item\"]:focus:focus-visible),.items>::slotted([slot=\"item\"][active]){color:var(--color-primary01);font-weight:var(--font-bd)}";
-const ZMenuSectionDeprecatedStyle0 = stylesCss;
-
-const ZMenuSectionDeprecated$1 = /*@__PURE__*/ proxyCustomElement(class ZMenuSectionDeprecated extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.opened = createEvent(this, "opened", 7);
-        this.closed = createEvent(this, "closed", 7);
-        this.active = undefined;
-        this.open = undefined;
-        this.hasContent = undefined;
-    }
-    toggle() {
-        if (!this.hasContent) {
-            return;
-        }
-        this.open = !this.open;
-        this.open ? this.opened.emit() : this.closed.emit();
-    }
-    /** Close the list when a click is performed outside of this Element. */
-    handleClick(ev) {
-        if (!this.open || this.hostElement.contains(ev.target)) {
-            return;
-        }
-        this.open = false;
-        this.closed.emit();
-    }
-    /**
-     * Check if some content slot is set.
-     */
-    checkContent() {
-        this.hasContent = this.hostElement.querySelectorAll('[slot="item"]').length > 0;
-    }
-    /**
-     * 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.innerText) || null;
-    }
-    componentWillLoad() {
-        this.checkContent();
-    }
-    render() {
-        return (h(Host, { key: '6cc06eccce2d2c9611936c2b804f3c7744774aad', role: "menu", open: this.open }, h("button", { key: '2cc287717a677392b5084f61b6eca0fd88dc13c0', class: "label", "aria-pressed": this.open ? "true" : "false", onClick: this.toggle.bind(this) }, h("slot", { key: '2b3d76700bea806f8b0db6a9d3fd915885b275c2', onSlotchange: this.onLabelSlotChange.bind(this) }), this.hasContent && h("z-icon", { key: '16162d96f5d3d3fb475db88525ce9e23e34a08c6', name: this.open ? "chevron-up" : "chevron-down" })), this.open && (h("div", { key: '801f6e8e3f54fc7a64e3b6388f4c4d7297a3e757', class: "items" }, h("slot", { key: '875889ac362c006c632db4eb04f32e228f7cb13c', name: "item", onSlotchange: this.checkContent.bind(this) })))));
-    }
-    get hostElement() { return this; }
-    static get style() { return ZMenuSectionDeprecatedStyle0; }
-}, [1, "z-menu-section-deprecated", {
-        "active": [516],
-        "open": [32],
-        "hasContent": [32]
-    }, [[4, "click", "handleClick"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-menu-section-deprecated", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-menu-section-deprecated":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZMenuSectionDeprecated$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZMenuSectionDeprecated = ZMenuSectionDeprecated$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZMenuSectionDeprecated, defineCustomElement };
-
-//# sourceMappingURL=z-menu-section-deprecated.js.map
+import{proxyCustomElement as e,HTMLElement as t,createEvent as o,h as i,Host as s,transformTag as a}from"@stencil/core/internal/client";import{d as n}from"./index3.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.opened=o(this,"opened",7),this.closed=o(this,"closed",7)}toggle(){this.hasContent&&(this.open=!this.open,this.open?this.opened.emit():this.closed.emit())}handleClick(e){this.open&&!this.hostElement.contains(e.target)&&(this.open=!1,this.closed.emit())}checkContent(){this.hasContent=this.hostElement.querySelectorAll('[slot="item"]').length>0}onLabelSlotChange(e){const t=e.target.assignedElements()[0];t.dataset.text=(null==t?void 0:t.innerText)||null}componentWillLoad(){this.checkContent()}render(){return i(s,{key:"9c0afdf0decad8a1eb51ba90c1fa1cb3bcbfa321",role:"menu",open:this.open},i("button",{key:"79ddfb8c44ef6a47fad56cf2f2a1c5ea6ee4bd5a",class:"label","aria-pressed":this.open?"true":"false",onClick:this.toggle.bind(this)},i("slot",{key:"3027b6975681544c8e2fef1c6f59be689664e26e",onSlotchange:this.onLabelSlotChange.bind(this)}),this.hasContent&&i("z-icon",{key:"9de3a8659409445f8bf781498ecc1dd2d2691d6c",name:this.open?"chevron-up":"chevron-down"})),this.open&&i("div",{key:"d5aa04822af0e9e9c07b6ee72bde0b875d2bafbb",class:"items"},i("slot",{key:"ca7eaac55e80903beb3d49373bbb28ca24f4e034",name:"item",onSlotchange:this.checkContent.bind(this)})))}get hostElement(){return this}static get style(){return':host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-primary01)}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items>::slotted([slot="item"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot="item"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-primary01)}.items>::slotted([slot="item"]:hover),.items>::slotted([slot="item"]:focus:focus-visible),.items>::slotted([slot="item"][active]){color:var(--color-primary01);font-weight:var(--font-bd)}'}},[257,"z-menu-section-deprecated",{active:[516],open:[32],hasContent:[32]},[[4,"click","handleClick"]]]),c=l,r=function(){"undefined"!=typeof customElements&&["z-menu-section-deprecated","z-icon"].forEach((e=>{switch(e){case"z-menu-section-deprecated":customElements.get(a(e))||customElements.define(a(e),l);break;case"z-icon":customElements.get(a(e))||n()}}))};export{c as ZMenuSectionDeprecated,r as defineCustomElement}

package/dist/components/z-menu-section.js

@@ -1,226 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { g as KeyboardCode } from './index2.js';
-import { d as defineCustomElement$2 } from './index10.js';
-
-const stylesCss = ":host{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.label{display:flex;width:100%;align-items:center;padding:var(--space-unit) 0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface03);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}:host(:last-child:not([open])) .label{border-bottom:none}:host(:is([active],[open])) .label,.label:focus:focus-visible,.label:hover{border-color:var(--color-primary01)}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / \"\";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items[hidden]{display:none}::slotted([slot=\"section\"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-1);line-height:1.333;outline:none}::slotted([slot=\"section\"]:last-of-type){border:none}::slotted([slot=\"section\"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-primary01)}::slotted([slot=\"section\"]:hover),::slotted([slot=\"section\"]:focus:focus-visible),::slotted([slot=\"section\"]:active),::slotted([slot=\"section\"][active]),::slotted([slot=\"section\"][data-active]){color:var(--color-primary01);font-weight:var(--font-bd)}";
-const ZMenuSectionStyle0 = stylesCss;
-
-const ZMenuSection$1 = /*@__PURE__*/ proxyCustomElement(class ZMenuSection extends HTMLElement {
-    get focusableItem() {
-        return this.items.find(({ tabIndex }) => tabIndex === 0);
-    }
-    toggle() {
-        if (!this.hasItems) {
-            return;
-        }
-        this.open = !this.open;
-    }
-    setItemsA11yAttrs() {
-        if (!this.hasItems) {
-            return;
-        }
-        this.items.forEach((item) => {
-            item.setAttribute("role", "menuitem");
-            item.tabIndex = -1;
-        });
-    }
-    onItemsChange() {
-        this.items = Array.from(this.host.querySelectorAll('[slot="section"]'));
-        this.hasItems = this.items.length > 0;
-        this.setItemsA11yAttrs();
-    }
-    /**
-     * 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;
-    }
-    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.focustFirstItem();
-            }
-        }
-    }
-    /**
-     * 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.
-     */
-    moveFocus(receiver, current) {
-        receiver.tabIndex = 0;
-        setTimeout(() => {
-            receiver.focus();
-        }, 100);
-        if (current) {
-            current.tabIndex = -1;
-        }
-    }
-    focustFirstItem() {
-        this.moveFocus(this.items[0]);
-    }
-    /** Focus the last item. */
-    async focusLastItem() {
-        this.moveFocus(this.items[this.items.length - 1]);
-    }
-    /** Set tabindex of the label to 0, then focus it. */
-    async setFocus() {
-        this.htmlTabindex = 0;
-        setTimeout(() => {
-            this.label.focus();
-        }, 100);
-    }
-    onOpenChange() {
-        if (!this.open) {
-            this.setItemsA11yAttrs();
-            this.closed.emit();
-        }
-        else {
-            this.opened.emit();
-        }
-    }
-    onTabindexChange() {
-        if (!this.label) {
-            return;
-        }
-        this.label.tabIndex = this.htmlTabindex;
-    }
-    onItemsKeydown(ev) {
-        switch (ev.key) {
-            case KeyboardCode.ESC:
-            case KeyboardCode.ARROW_LEFT:
-                if (!this.open) {
-                    break;
-                }
-                ev.preventDefault();
-                ev.stopPropagation();
-                this.moveFocus(this.label, this.focusableItem);
-                this.open = false;
-                break;
-            case KeyboardCode.ARROW_RIGHT:
-                if (this.open) {
-                    break;
-                }
-                ev.preventDefault();
-                ev.stopPropagation();
-                this.open = true;
-                this.focustFirstItem();
-                break;
-            case KeyboardCode.ARROW_DOWN: {
-                if (!this.open) {
-                    break;
-                }
-                if (document.activeElement === this.host) {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    this.focustFirstItem();
-                    break;
-                }
-                const currentIndex = this.items.indexOf(this.focusableItem);
-                const receiver = this.items[currentIndex + 1];
-                if (receiver) {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    this.moveFocus(receiver, this.focusableItem);
-                }
-                else {
-                    this.htmlTabindex = 0;
-                    this.focusableItem.tabIndex = -1;
-                }
-                break;
-            }
-            case KeyboardCode.ARROW_UP: {
-                if (!this.open || document.activeElement === this.host) {
-                    break;
-                }
-                const currentIndex = this.items.indexOf(this.focusableItem);
-                const receiver = this.items[currentIndex - 1];
-                ev.preventDefault();
-                ev.stopPropagation();
-                if (receiver) {
-                    this.moveFocus(receiver, this.focusableItem);
-                }
-                else {
-                    // since there isn't a previous item to focus, give the focus to the label element
-                    this.focusableItem.tabIndex = -1;
-                    this.setFocus();
-                }
-                break;
-            }
-        }
-    }
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.opened = createEvent(this, "opened", 7);
-        this.closed = createEvent(this, "closed", 7);
-        this.active = undefined;
-        this.htmlTabindex = -1;
-        this.open = undefined;
-        this.hasItems = undefined;
-        this.items = undefined;
-        this.toggle = this.toggle.bind(this);
-        this.onItemsChange = this.onItemsChange.bind(this);
-        this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
-        this.onLabelClick = this.onLabelClick.bind(this);
-        this.onLabelKeydown = this.onLabelKeydown.bind(this);
-        this.onItemsKeydown = this.onItemsKeydown.bind(this);
-    }
-    connectedCallback() {
-        this.onItemsChange();
-    }
-    render() {
-        return (h(Host, { key: '4dce34f277ab3c8c41171a15a02fd174c45742cd', open: this.open }, h("button", { key: 'b6c535e87dbb5af8808d7a19556ad116cbcca72b', 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: 'fbbba483ca5fe6d45440c01a89f061565ce641aa', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: 'b4c67b7cada94580b4f5853aaa8cbb9818bece74', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '711c085b5d74affb2c23ebd1acdd774b5903e7e5', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'a2fe12f235f6b23a96f2bd3a8a18f3a095fcff2d', name: "section", onSlotchange: this.onItemsChange }))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "open": ["onOpenChange"],
-        "htmlTabindex": ["onTabindexChange"]
-    }; }
-    static get style() { return ZMenuSectionStyle0; }
-}, [1, "z-menu-section", {
-        "active": [516],
-        "htmlTabindex": [2, "html-tabindex"],
-        "open": [1028],
-        "hasItems": [32],
-        "items": [32],
-        "focusLastItem": [64],
-        "setFocus": [64]
-    }, [[0, "keydown", "onItemsKeydown"]], {
-        "open": ["onOpenChange"],
-        "htmlTabindex": ["onTabindexChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-menu-section", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-menu-section":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZMenuSection$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZMenuSection = ZMenuSection$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZMenuSection, defineCustomElement };
-
-//# sourceMappingURL=z-menu-section.js.map
+import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,Host as o,transformTag as n}from"@stencil/core/internal/client";import{g as a}from"./index2.js";import{d as l}from"./index3.js";const h=t(class extends e{get focusableItem(){return this.items.find((({tabIndex:t})=>0===t))}toggle(){this.hasItems&&(this.open=!this.open)}setItemsA11yAttrs(){this.hasItems&&this.items.forEach((t=>{t.setAttribute("role","menuitem"),t.tabIndex=-1}))}onItemsChange(){this.items=Array.from(this.host.querySelectorAll('[slot="section"]')),this.hasItems=this.items.length>0,this.setItemsA11yAttrs()}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=null==e?void 0:e.textContent}onLabelClick(){this.toggle(),this.setFocus()}onLabelKeydown(t){t.key!==a.ENTER&&t.key!==a.SPACE||(t.preventDefault(),t.stopPropagation(),this.toggle(),this.open&&this.focustFirstItem())}moveFocus(t,e){t.tabIndex=0,setTimeout((()=>{t.focus()}),100),e&&(e.tabIndex=-1)}focustFirstItem(){this.moveFocus(this.items[0])}async focusLastItem(){this.moveFocus(this.items[this.items.length-1])}async setFocus(){this.htmlTabindex=0,setTimeout((()=>{this.label.focus()}),100)}onOpenChange(){this.open?this.opened.emit():(this.setItemsA11yAttrs(),this.closed.emit())}onTabindexChange(){this.label&&(this.label.tabIndex=this.htmlTabindex)}onItemsKeydown(t){switch(t.key){case a.ESC:case a.ARROW_LEFT:if(!this.open)break;t.preventDefault(),t.stopPropagation(),this.moveFocus(this.label,this.focusableItem),this.open=!1;break;case a.ARROW_RIGHT:if(this.open)break;t.preventDefault(),t.stopPropagation(),this.open=!0,this.focustFirstItem();break;case a.ARROW_DOWN:{if(!this.open)break;if(document.activeElement===this.host){t.preventDefault(),t.stopPropagation(),this.focustFirstItem();break}const e=this.items.indexOf(this.focusableItem),s=this.items[e+1];s?(t.preventDefault(),t.stopPropagation(),this.moveFocus(s,this.focusableItem)):(this.htmlTabindex=0,this.focusableItem.tabIndex=-1);break}case a.ARROW_UP:{if(!this.open||document.activeElement===this.host)break;const e=this.items.indexOf(this.focusableItem),s=this.items[e-1];t.preventDefault(),t.stopPropagation(),s?this.moveFocus(s,this.focusableItem):(this.focusableItem.tabIndex=-1,this.setFocus());break}}}constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.opened=s(this,"opened",7),this.closed=s(this,"closed",7),this.htmlTabindex=-1,this.toggle=this.toggle.bind(this),this.onItemsChange=this.onItemsChange.bind(this),this.onLabelSlotChange=this.onLabelSlotChange.bind(this),this.onLabelClick=this.onLabelClick.bind(this),this.onLabelKeydown=this.onLabelKeydown.bind(this),this.onItemsKeydown=this.onItemsKeydown.bind(this)}connectedCallback(){this.onItemsChange()}render(){return i(o,{key:"4e6388d5919ca9010c78ef35df6b1c0b807d2dd6",open:this.open},i("button",{key:"4093e9a7ce5cb5cf63ca7012bb44c7b49b638e90",ref:t=>this.label=t,class:"label","aria-haspopup":""+!!this.hasItems,"aria-expanded":""+!!this.open,role:"menuitem",tabindex:this.htmlTabindex,onClick:this.onLabelClick,onKeyDown:this.onLabelKeydown},i("slot",{key:"0c88383d5be4c81aee5a78f89e4706a6b167dccb",onSlotchange:this.onLabelSlotChange}),this.hasItems&&i("z-icon",{key:"d32c9dc28048a6d7441075da41cb2f255e5bdc73",name:this.open?"chevron-up":"chevron-down"})),i("div",{key:"0c24a7122314391262e640b440f87dce632eb2f3",class:"items",role:"menu",hidden:!this.open},i("slot",{key:"fe79aa30aaa7d3a92621c6725e4d0ddca604726e",name:"section",onSlotchange:this.onItemsChange})))}get host(){return this}static get watchers(){return{open:[{onOpenChange:0}],htmlTabindex:[{onTabindexChange:0}]}}static get style(){return':host{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.label{display:flex;width:100%;align-items:center;padding:var(--space-unit) 0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface03);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}:host(:last-child:not([open])) .label{border-bottom:none}:host(:is([active],[open])) .label,.label:focus:focus-visible,.label:hover{border-color:var(--color-primary01)}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items[hidden]{display:none}::slotted([slot="section"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-1);line-height:1.333;outline:none}::slotted([slot="section"]:last-of-type){border:none}::slotted([slot="section"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-primary01)}::slotted([slot="section"]:hover),::slotted([slot="section"]:focus:focus-visible),::slotted([slot="section"]:active),::slotted([slot="section"][active]),::slotted([slot="section"][data-active]){color:var(--color-primary01);font-weight:var(--font-bd)}'}},[257,"z-menu-section",{active:[516],htmlTabindex:[2,"html-tabindex"],open:[1028],hasItems:[32],items:[32],focusLastItem:[64],setFocus:[64]},[[0,"keydown","onItemsKeydown"]],{open:[{onOpenChange:0}],htmlTabindex:[{onTabindexChange:0}]}]),c=h,r=function(){"undefined"!=typeof customElements&&["z-menu-section","z-icon"].forEach((t=>{switch(t){case"z-menu-section":customElements.get(n(t))||customElements.define(n(t),h);break;case"z-icon":customElements.get(n(t))||l()}}))};export{c as ZMenuSection,r as defineCustomElement}