@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-RC6

package/dist/components/z-toolbar.js

@@ -1,165 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { g as KeyboardCode } from './index2.js';
-
-const stylesCss = ":host,*{box-sizing:border-box}:host{display:flex;width:fit-content;align-items:center;padding:0;border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:calc(var(--border-radius) + var(--border-size-small));box-shadow:var(--shadow-4);gap:calc(var(--space-unit) / 2)}::slotted(z-divider){height:calc(var(--space-unit) * 4.5) !important}@media (max-width: 767px){:host{--z-toolbar-columns:6;position:relative;display:grid;max-width:100%;background:repeating-linear-gradient(\n        to bottom,\n        transparent 0,\n        transparent calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5 + 1px)\n      )\n      center / calc(100% - var(--space-unit)) 100% no-repeat var(--color-surface01);gap:var(--border-size-small) calc(var(--space-unit) / 2);grid-template-columns:repeat(var(--z-toolbar-columns, auto-fill), minmax(44px, auto))}::slotted(z-divider){display:none !important}}";
-const ZToolbarStyle0 = stylesCss;
-
-const ZToolbar$1 = /*@__PURE__*/ proxyCustomElement(class ZToolbar extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /** List of focusable tool elements. */
-        this.toolItems = [];
-        this.htmlAriaLabel = undefined;
-        this.currentFocusIndex = 0;
-    }
-    componentDidLoad() {
-        this.collectToolItems();
-        this.updateTabIndexes();
-        // set css variable `--z-toolbar-columns` based on the number of tools in the toolbar, so that the background pattern can adapt to the number of rows
-        let mobileColumnCount = parseInt(getComputedStyle(this.hostElement).getPropertyValue("--z-toolbar-columns") || "6");
-        mobileColumnCount = this.toolItems.length <= mobileColumnCount ? this.toolItems.length : mobileColumnCount;
-        this.hostElement.style.setProperty("--z-toolbar-columns", mobileColumnCount.toString());
-    }
-    /** Collect first level children `z-tool` elements in the toolbar (not nested ones). */
-    collectToolItems() {
-        this.toolItems = Array.from(this.hostElement.querySelectorAll("z-tool:not(:scope z-tool z-tool)"));
-    }
-    /**
-     * Update the `tabindex` of all children tools based on the current focus index,
-     * so that only the currently focusable tool is in the tab order (tabindex="0") and all others are not focusable via keyboard (tabindex="-1").
-     */
-    updateTabIndexes() {
-        this.toolItems.forEach((tool, index) => {
-            tool.setTabIndex(index === this.currentFocusIndex ? 0 : -1);
-        });
-    }
-    focusToolAt(index, fallback = "next") {
-        const tool = this.toolItems[index];
-        if (!tool) {
-            return;
-        }
-        this.currentFocusIndex = index;
-        if (!tool.disabled) {
-            tool.setFocus();
-            this.updateTabIndexes();
-            return;
-        }
-        if (fallback === "next") {
-            this.focusNextTool();
-        }
-        else {
-            this.focusPreviousTool();
-        }
-    }
-    focusNextTool() {
-        const nextIndex = (this.currentFocusIndex + 1) % this.toolItems.length;
-        this.focusToolAt(nextIndex);
-    }
-    focusPreviousTool() {
-        const prevIndex = (this.currentFocusIndex - 1 + this.toolItems.length) % this.toolItems.length;
-        this.focusToolAt(prevIndex, "previous");
-    }
-    /**
-     * Listen for custom "toggleSubmenu" events from child tools and close sibling submenus when one is opened,
-     * to prevent multiple submenus from being open at the same time.
-     */
-    closeSiblingSubmenusOnOpen(event) {
-        if (event.detail !== true) {
-            return;
-        }
-        const targetTool = event.target.closest("z-tool");
-        if (!targetTool || !this.toolItems.includes(targetTool)) {
-            return;
-        }
-        this.toolItems.forEach((tool) => {
-            if (tool !== targetTool && tool.open) {
-                tool.open = false;
-            }
-        });
-    }
-    /**
-     * Listen for custom "toggleTooltip" events from child tools and close sibling tooltips when one is opened,
-     * to prevent multiple tooltips from being open at the same time.
-     */
-    closeSiblingTooltipsOnOpen(event) {
-        if (event.detail !== true) {
-            return;
-        }
-        const targetTool = event.target;
-        if (!this.toolItems.includes(targetTool)) {
-            return;
-        }
-        this.toolItems.forEach((tool) => {
-            if (tool !== targetTool) {
-                tool.closeTooltip();
-            }
-        });
-    }
-    handleKeyDown(event) {
-        const target = event.target;
-        const toolElement = target.closest("z-tool");
-        if (!toolElement || !this.toolItems.includes(toolElement)) {
-            return;
-        }
-        const focusedIndex = this.toolItems.indexOf(toolElement);
-        if (focusedIndex !== -1) {
-            this.currentFocusIndex = focusedIndex;
-        }
-        switch (event.key) {
-            case KeyboardCode.ARROW_RIGHT:
-                event.preventDefault();
-                this.focusNextTool();
-                break;
-            case KeyboardCode.ARROW_LEFT:
-                event.preventDefault();
-                this.focusPreviousTool();
-                break;
-        }
-    }
-    /**
-     * When focus enters the toolbar, update the current focus index to match the focused tool,
-     * so that roving tabindex is in sync with actual focus.
-     */
-    handleFocusIn(event) {
-        const target = event.target;
-        const toolElement = target.closest("z-tool");
-        const index = this.toolItems.indexOf(toolElement);
-        if (index !== -1 && index !== this.currentFocusIndex) {
-            this.currentFocusIndex = index;
-            this.updateTabIndexes();
-        }
-    }
-    render() {
-        return (h(Host, { key: 'eb195bd6bb7d19e7958492c96761572838e2a881', role: "toolbar", "aria-label": this.htmlAriaLabel }, h("slot", { key: '6283d32e6e5568a890ff9c404d152800269cda99', onSlotchange: () => {
-                this.collectToolItems();
-                this.updateTabIndexes();
-            } })));
-    }
-    get hostElement() { return this; }
-    static get style() { return ZToolbarStyle0; }
-}, [1, "z-toolbar", {
-        "htmlAriaLabel": [1, "html-aria-label"],
-        "currentFocusIndex": [32]
-    }, [[0, "toggleSubmenu", "closeSiblingSubmenusOnOpen"], [0, "toggleTooltip", "closeSiblingTooltipsOnOpen"], [0, "keydown", "handleKeyDown"], [0, "focusin", "handleFocusIn"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-toolbar"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-toolbar":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZToolbar$1);
-            }
-            break;
-    } });
-}
-
-const ZToolbar = ZToolbar$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZToolbar, defineCustomElement };
-
-//# sourceMappingURL=z-toolbar.js.map
+import{proxyCustomElement as t,HTMLElement as o,h as e,Host as s,transformTag as i}from"@stencil/core/internal/client";import{g as a}from"./index2.js";const r=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.currentFocusIndex=0,this.toolItems=[]}componentDidLoad(){this.collectToolItems(),this.updateTabIndexes();let t=parseInt(getComputedStyle(this.hostElement).getPropertyValue("--z-toolbar-columns")||"6");t=this.toolItems.length<=t?this.toolItems.length:t,this.hostElement.style.setProperty("--z-toolbar-columns",""+t)}collectToolItems(){this.toolItems=Array.from(this.hostElement.querySelectorAll("z-tool:not(:scope z-tool z-tool)"))}updateTabIndexes(){this.toolItems.forEach(((t,o)=>{t.setTabIndex(o===this.currentFocusIndex?0:-1)}))}focusToolAt(t,o="next"){const e=this.toolItems[t];if(e){if(this.currentFocusIndex=t,!e.disabled)return e.setFocus(),void this.updateTabIndexes();"next"===o?this.focusNextTool():this.focusPreviousTool()}}focusNextTool(){this.focusToolAt((this.currentFocusIndex+1)%this.toolItems.length)}focusPreviousTool(){this.focusToolAt((this.currentFocusIndex-1+this.toolItems.length)%this.toolItems.length,"previous")}closeSiblingSubmenusOnOpen(t){if(!0!==t.detail)return;const o=t.target.closest("z-tool");o&&this.toolItems.includes(o)&&this.toolItems.forEach((t=>{t!==o&&t.open&&(t.open=!1)}))}closeSiblingTooltipsOnOpen(t){if(!0!==t.detail)return;const o=t.target;this.toolItems.includes(o)&&this.toolItems.forEach((t=>{t!==o&&t.closeTooltip()}))}handleKeyDown(t){const o=t.target.closest("z-tool");if(!o||!this.toolItems.includes(o))return;const e=this.toolItems.indexOf(o);switch(-1!==e&&(this.currentFocusIndex=e),t.key){case a.ARROW_RIGHT:t.preventDefault(),this.focusNextTool();break;case a.ARROW_LEFT:t.preventDefault(),this.focusPreviousTool()}}handleFocusIn(t){const o=t.target.closest("z-tool"),e=this.toolItems.indexOf(o);-1!==e&&e!==this.currentFocusIndex&&(this.currentFocusIndex=e,this.updateTabIndexes())}render(){return e(s,{key:"da37a1abe86b6c96aaabdc4f5714716ea3ce7281",role:"toolbar","aria-label":this.htmlAriaLabel},e("slot",{key:"73b950e1efb794a75930915ccb39cf58dc524fb0",onSlotchange:()=>{this.collectToolItems(),this.updateTabIndexes()}}))}get hostElement(){return this}static get style(){return":host,*{box-sizing:border-box}:host{display:flex;width:fit-content;align-items:center;padding:0;border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:calc(var(--border-radius) + var(--border-size-small));box-shadow:var(--shadow-4);gap:calc(var(--space-unit) / 2)}::slotted(z-divider){height:calc(var(--space-unit) * 4.5) !important}@media (max-width: 767px){:host{--z-toolbar-columns:6;position:relative;display:grid;max-width:100%;background:repeating-linear-gradient(         to bottom,         transparent 0,         transparent calc(var(--space-unit) * 5.5),         var(--color-surface03) calc(var(--space-unit) * 5.5),         var(--color-surface03) calc(var(--space-unit) * 5.5 + 1px)       )       center / calc(100% - var(--space-unit)) 100% no-repeat var(--color-surface01);gap:var(--border-size-small) calc(var(--space-unit) / 2);grid-template-columns:repeat(var(--z-toolbar-columns, auto-fill), minmax(44px, auto))}::slotted(z-divider){display:none !important}}"}},[257,"z-toolbar",{htmlAriaLabel:[1,"html-aria-label"],currentFocusIndex:[32]},[[0,"toggleSubmenu","closeSiblingSubmenusOnOpen"],[0,"toggleTooltip","closeSiblingTooltipsOnOpen"],[0,"keydown","handleKeyDown"],[0,"focusin","handleFocusIn"]]]),n=r,l=function(){"undefined"!=typeof customElements&&["z-toolbar"].forEach((t=>{"z-toolbar"===t&&(customElements.get(i(t))||customElements.define(i(t),r))}))};export{n as ZToolbar,l as defineCustomElement}

package/dist/components/z-tooltip.js

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

package/dist/components/z-tr.js

@@ -1,101 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { r as randomId } from './utils.js';
-import './index2.js';
-import { d as defineCustomElement$2 } from './index10.js';
-import './index24.js';
-
-const stylesCss = ":host{position:relative;display:grid;width:100%;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));--columns:1}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-background)}:host(:hover) ::slotted(z-td),:host(:hover) ::slotted(z-th){border-top:var(--border-size-small) solid var(--color-surface04);border-bottom:var(--border-size-small) solid var(--color-surface04);background-color:var(--color-surface02)}:host(:focus){position:relative;z-index:20;box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}.z-tr--focus-overlay{position:absolute;z-index:30;right:0;left:0;width:100%;border-radius:4px;box-shadow:none;inset:0;outline:none;pointer-events:none;transition:box-shadow 0.2s}:host(:focus) .z-tr--focus-overlay{box-shadow:0 0 0 2px var(--shadow-focus-primary),\n    var(--shadow-focus-primary);outline:none}:host(:focus) ::slotted(*){border-bottom:none}:host(:focus) .z-tr--expand-button-container{border-bottom:none}";
-const ZTrStyle0 = stylesCss;
-
-const ZTr$1 = /*@__PURE__*/ proxyCustomElement(class ZTr extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.expand = createEvent(this, "expand", 7);
-        this.expandable = false;
-        this.expanded = false;
-        this.expandableContentId = undefined;
-    }
-    updateColumns() {
-        const cells = Array.from(this.host.querySelectorAll("z-td, z-th"));
-        if (this.expandable) {
-            cells.pop();
-        }
-        const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);
-        this.host.style.setProperty("--columns", `${columns}`);
-        if (this.expandable) {
-            const expandableContent = cells.pop();
-            expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;
-            this.expandableContentId = expandableContent.id;
-        }
-    }
-    /**
-     * Handle click on row.
-     * Skip expansion if the click is on a element with `prevent-expand` css class.
-     */
-    onRowClick(event) {
-        const preventExpand = event.target.closest(".prevent-expand");
-        if (!this.expandable || preventExpand) {
-            return;
-        }
-        this.expanded = !this.expanded;
-        this.expand.emit({ expanded: this.expanded });
-    }
-    onKeyDown(event) {
-        if (!this.expandable) {
-            return;
-        }
-        const active = document.activeElement;
-        if (active !== this.host) {
-            return;
-        }
-        if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            this.expanded = !this.expanded;
-            this.expand.emit({ expanded: this.expanded });
-        }
-    }
-    componentWillLoad() {
-        this.updateColumns();
-    }
-    render() {
-        return (h(Host, { key: '63e39c2bf685ec65bdb22e99ebfb28a027c2bdae', role: "row", tabIndex: 0, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: 'f3a06e7fcf443fc3662ae5bf64792f35bd51037b', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: '09cd0fb724d7d626f078dd81f4bb074aa58bb9ce', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '9673e07a9f8319d8565e417bbfd1d03cdd693c62', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '6afeb54548a4ab5ea750d2c23f094c473e386efe', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'ed3ba8bdbe9ac4c0aaff3202238146cfb8362be6', onSlotchange: this.updateColumns.bind(this) })));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "expandable": ["updateColumns"]
-    }; }
-    static get style() { return ZTrStyle0; }
-}, [1, "z-tr", {
-        "expandable": [516],
-        "expanded": [32],
-        "expandableContentId": [32]
-    }, [[0, "colspanchange", "updateColumns"]], {
-        "expandable": ["updateColumns"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-tr", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-tr":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZTr$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZTr = ZTr$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZTr, defineCustomElement };
-
-//# sourceMappingURL=z-tr.js.map
+import{proxyCustomElement as e,HTMLElement as t,createEvent as o,h as r,Host as a,transformTag as s}from"@stencil/core/internal/client";import{r as n}from"./utils.js";import"./index2.js";import{d as l}from"./index3.js";import"./index17.js";const i=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.expand=o(this,"expand",7),this.expandable=!1,this.expanded=!1}updateColumns(){const e=Array.from(this.host.querySelectorAll("z-td, z-th"));this.expandable&&e.pop();const t=e.map((e=>e.colspan||1)).reduce(((e,t)=>e+t),0);if(this.host.style.setProperty("--columns",""+t),this.expandable){const t=e.pop();t.id=t.id||"z-tr-expandable-content-"+n(),this.expandableContentId=t.id}}onRowClick(e){const t=e.target.closest(".prevent-expand");this.expandable&&!t&&(this.expanded=!this.expanded,this.expand.emit({expanded:this.expanded}))}onKeyDown(e){this.expandable&&document.activeElement===this.host&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.expanded=!this.expanded,this.expand.emit({expanded:this.expanded})))}componentWillLoad(){this.updateColumns()}render(){return r(a,{key:"6675f95eeb22b498594fba6534c4c827febecc73",role:"row",tabIndex:this.expandable?0:void 0,expanded:this.expanded,onClick:this.onRowClick.bind(this),onKeyDown:this.onKeyDown.bind(this)},r("div",{key:"587ff79c6259984e7cbff6fae284a454152d1cf7",class:"z-tr--focus-overlay","aria-hidden":"true"}),r("div",{key:"fa283ba74f8b62c16b37853031f01d278bb6e707",class:"z-tr--expand-button-container"},this.expandable&&r("button",{key:"e009923873641b3cecf5f6736e56c7136134f226",tabIndex:-1,"aria-expanded":this.expanded?"true":"false","aria-label":this.expanded?"Comprimi riga":"Espandi riga","aria-controls":this.expandableContentId,type:"button"},r("z-icon",{key:"403d4e5d99c796af9887c8d8f2b4ec8a9de7f9bd",name:this.expanded?"minus-circled":"plus-circled"}))),r("slot",{key:"afc75a162e1782b9aeb746961f0f51686e8c9213",onSlotchange:this.updateColumns.bind(this)}))}get host(){return this}static get watchers(){return{expandable:[{updateColumns:0}]}}static get style(){return":host{position:relative;display:grid;width:100%;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));--columns:1}*{box-sizing:border-box}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-top:var(--border-size-small) solid var(--color-surface03);border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){border-left:0 !important;background-color:var(--color-background)}:host(:hover):has([tabIndex]) ::slotted(z-td),:host(:hover):has([tabIndex]) ::slotted(z-th){border-top:var(--border-size-small) solid var(--color-surface04);border-bottom:var(--border-size-small) solid var(--color-surface04);background-color:var(--color-surface02)}:host(:focus){position:relative;z-index:20;border:none !important;box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}.z-tr--focus-overlay{position:absolute;z-index:30;right:0;left:0;width:100%;border-radius:4px;box-shadow:none;inset:0;outline:none;pointer-events:none;transition:box-shadow 0.2s}:host(:focus) .z-tr--focus-overlay{box-shadow:0 0 0 2px var(--shadow-focus-primary),     var(--shadow-focus-primary);outline:none}:host(:focus) ::slotted(*){border-bottom:none}:host(:focus) .z-tr--expand-button-container{border-bottom:none}z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover tr:hover>td,table.z-table-hover tr:hover>th{background-color:var(--color-surface02);box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04)}"}},[257,"z-tr",{expandable:[516],expanded:[32],expandableContentId:[32]},[[0,"colspanchange","updateColumns"]],{expandable:[{updateColumns:0}]}]),d=i,c=function(){"undefined"!=typeof customElements&&["z-tr","z-icon"].forEach((e=>{switch(e){case"z-tr":customElements.get(s(e))||customElements.define(s(e),i);break;case"z-icon":customElements.get(s(e))||l()}}))};export{d as ZTr,c as defineCustomElement}

package/dist/components/z-tree-list.js

@@ -1,162 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { g as KeyboardCode } from './index2.js';
-import { d as defineCustomElement$5 } from './index7.js';
-import { d as defineCustomElement$4 } from './index10.js';
-import { d as defineCustomElement$3 } from './index14.js';
-import { d as defineCustomElement$2 } from './index15.js';
-
-const stylesCss = ":host{font-family:var(--font-family-sans)}z-list-element{position:relative;display:block;padding-top:var(--space-unit)}z-list-element::before,z-list-element::after{position:absolute;z-index:100;top:0.125rem;left:-0.5rem;content:\"\"}z-list z-list-element::before{width:var(--space-unit);height:calc(var(--space-unit) * 2);border-bottom:var(--border-size-small) solid var(--color-disabled01-icon);border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element::after{width:var(--space-unit);height:100%;border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element:last-child::after,z-list>z-list-element::before,z-list>z-list-element::after,z-list>z-list-group>z-list-element::before,z-list>z-list-group>z-list-element::after{display:none}z-list>div.children-node{padding-left:calc(var(--space-unit) * 2)}z-list-element>.list-element{z-index:100;display:flex;justify-content:space-between;padding:0;color:var(--color-default-text);font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);text-decoration:none}z-list-element>.list-element.link-clickable{color:var(--color-primary01)}z-list-element>.list-element.link-clickable:hover{text-decoration:underline}z-list-element>.list-element .item.ellipsis{overflow:hidden}z-list-element .list-element::after{position:absolute;top:0;right:-0.0625rem;display:block;width:100%;height:calc(var(--space-unit) * 5);content:\"\";transform:translateX(-100%)}.item-label{overflow:hidden;flex-grow:1;font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);letter-spacing:0.0032rem;line-height:1.25rem;text-overflow:ellipsis;white-space:nowrap}.item-label.bold-item{font-weight:var(--font-sb)}.item.ellipsis{display:flex;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}.children-node>z-list-element{padding:0;padding-top:0.125;padding-left:calc(var(--space-unit) * 1.25)}.item-icon{margin-right:var(--space-unit)}.no-icon-label{padding-left:var(--space-unit)}.children-node>z-list-element.no-icon-elm{padding-left:0}z-list-element>.list-element:focus:focus-visible{position:relative;z-index:200;box-shadow:var(--shadow-focus-primary);outline:none}@media (max-width: 767px){z-list-element::before,z-list-element::after{top:0.1875rem}z-list z-list-element::before{height:calc(var(--space-unit) * 2.5)}.children-node>z-list-element{padding-top:var(--space-unit)}}";
-const ZTreeListStyle0 = stylesCss;
-
-const ZTreeList$1 = /*@__PURE__*/ proxyCustomElement(class ZTreeList extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.treeItemClicked = createEvent(this, "treeItemClicked", 7);
-        this.parsedItems = [];
-        this.items = [];
-        this.htmlAriaLabelledby = undefined;
-        this.htmlSectionTitle = undefined;
-    }
-    watchItems() {
-        this.parsedItems = typeof this.items === "string" ? JSON.parse(this.items) : this.items;
-    }
-    componentWillLoad() {
-        this.watchItems();
-    }
-    handleClick(item) {
-        this.treeItemClicked.emit({ id: item.id, name: item.name, url: item.url });
-    }
-    getFocusableElements() {
-        return Array.from(this.host.shadowRoot.querySelectorAll('a[tabindex="0"]'));
-    }
-    getAncestor(element, levels) {
-        let ancestor = element;
-        for (let i = 0; i < levels; i++) {
-            ancestor = ancestor === null || ancestor === void 0 ? void 0 : ancestor.parentElement;
-            if (!ancestor) {
-                return;
-            }
-        }
-        return ancestor;
-    }
-    handleArrowNav(event) {
-        if (event.code === KeyboardCode.TAB) {
-            event.preventDefault();
-            return;
-        }
-        const focusableElements = this.getFocusableElements();
-        const currentIndex = focusableElements.indexOf(event.target);
-        if (currentIndex === -1) {
-            return;
-        }
-        if (event.code === KeyboardCode.ARROW_DOWN || event.code === KeyboardCode.ARROW_UP) {
-            event.preventDefault();
-            const nextIndex = currentIndex + (event.code === KeyboardCode.ARROW_DOWN ? 1 : -1);
-            if (nextIndex < 0 || nextIndex >= focusableElements.length) {
-                return;
-            }
-            focusableElements[nextIndex].focus();
-        }
-        if (event.code === KeyboardCode.ARROW_LEFT) {
-            event.preventDefault();
-            const ancestor = this.getAncestor(focusableElements[currentIndex], 4);
-            if (!ancestor ||
-                !ancestor.children[0] ||
-                (ancestor.children[0].tagName.toLowerCase() !== "a" && ancestor.getAttribute("tabindex") === null)) {
-                return;
-            }
-            ancestor.children[0].focus();
-        }
-        if (event.code === KeyboardCode.ARROW_RIGHT) {
-            event.preventDefault();
-            const parentElm = event.target.closest("z-list-element");
-            if (!parentElm) {
-                return;
-            }
-            const childrenContainer = parentElm.querySelector("z-list");
-            if (!childrenContainer) {
-                return;
-            }
-            const firstChild = childrenContainer.querySelector('a[tabindex="0"]');
-            if (!firstChild) {
-                return;
-            }
-            firstChild.focus();
-        }
-    }
-    renderTreeList(item, key, level = 1) {
-        var _a, _b;
-        this.htmlTag = item.url ? "a" : "span";
-        const treeListContent = (h("z-list-element", { id: key, class: !item.icon ? "no-icon-elm" : "", clickable: Boolean(item.url), hasTreeItems: true, role: "none", "aria-hidden": undefined }, h(this.htmlTag, { class: {
-                "list-element": true,
-                "z-link": Boolean(item.url),
-                "link-clickable": Boolean(item.url),
-            }, tabIndex: item.url ? 0 : -1, onClick: () => this.handleClick(item), onKeyUp: (event) => {
-                if (event.code === KeyboardCode.ENTER || event.code === KeyboardCode.SPACE) {
-                    this.handleClick(item);
-                }
-            }, onKeyDown: (event) => this.handleArrowNav(event), role: item.url ? "treeitem" : undefined, "aria-hidden": item.url ? undefined : "true", "aria-expanded": ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 && true, "aria-level": level, "aria-label": item.name, href: item.url }, h("span", { class: "item ellipsis" }, item.icon && (h("z-icon", { width: 16, height: 16, fill: item.url ? "color-primary01" : "color-default-icon", class: "item-icon", name: item.icon })), h("span", { class: {
-                "item-label": true,
-                "no-icon-label": !item.icon,
-                "bold-item": item.bold,
-            }, title: item.name }, item.name))), ((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("z-list", { role: "group" }, h("div", { class: "children-node" }, item.children.map((child, key) => this.renderTreeList(child, `${key}`, level + 1)))))));
-        return treeListContent;
-    }
-    render() {
-        const hasClickableItems = this.parsedItems.some((item) => !!item.url);
-        return (h(Host, { key: 'f6165d141d1ae1f40876c63f72ea0d196960f519', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: '77ebd44ff71d71dc52b6a32fbc13232d0b6f93be', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "items": ["watchItems"]
-    }; }
-    static get style() { return ZTreeListStyle0; }
-}, [1, "z-tree-list", {
-        "items": [1],
-        "htmlAriaLabelledby": [513, "html-aria-labelledby"],
-        "htmlSectionTitle": [513, "html-section-title"]
-    }, undefined, {
-        "items": ["watchItems"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-tree-list", "z-divider", "z-icon", "z-list", "z-list-element"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-tree-list":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZTreeList$1);
-            }
-            break;
-        case "z-divider":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "z-list":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "z-list-element":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZTreeList = ZTreeList$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZTreeList, defineCustomElement };
-
-//# sourceMappingURL=z-tree-list.js.map
+import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as l,Host as s,transformTag as n}from"@stencil/core/internal/client";import{g as r}from"./index2.js";import{d as o}from"./index6.js";import{d as a}from"./index3.js";import{d}from"./index9.js";import{d as c}from"./index10.js";const m=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.treeItemClicked=i(this,"treeItemClicked",7),this.items=[],this.parsedItems=[]}watchItems(){this.parsedItems="string"==typeof this.items?JSON.parse(this.items):this.items}componentWillLoad(){this.watchItems()}handleClick(e){this.treeItemClicked.emit({id:e.id,name:e.name,url:e.url})}getFocusableElements(){return Array.from(this.host.shadowRoot.querySelectorAll('a[tabindex="0"]'))}getAncestor(e,t){let i=e;for(let e=0;e<t;e++)if(i=null==i?void 0:i.parentElement,!i)return;return i}handleArrowNav(e){if(e.code===r.TAB)return void e.preventDefault();const t=this.getFocusableElements(),i=t.indexOf(e.target);if(-1!==i){if(e.code===r.ARROW_DOWN||e.code===r.ARROW_UP){e.preventDefault();const l=i+(e.code===r.ARROW_DOWN?1:-1);if(l<0||l>=t.length)return;t[l].focus()}if(e.code===r.ARROW_LEFT){e.preventDefault();const l=this.getAncestor(t[i],4);if(!l||!l.children[0]||"a"!==l.children[0].tagName.toLowerCase()&&null===l.getAttribute("tabindex"))return;l.children[0].focus()}if(e.code===r.ARROW_RIGHT){e.preventDefault();const t=e.target.closest("z-list-element");if(!t)return;const i=t.querySelector("z-list");if(!i)return;const l=i.querySelector('a[tabindex="0"]');if(!l)return;l.focus()}}}renderTreeList(e,t,i=1){var s,n;this.htmlTag=e.url?"a":"span";const o=l("z-list-element",{id:t,class:e.icon?"":"no-icon-elm",clickable:!!e.url,hasTreeItems:!0,role:"none","aria-hidden":void 0},l(this.htmlTag,{class:{"list-element":!0,"z-link":!!e.url,"link-clickable":!!e.url},tabIndex:e.url?0:-1,onClick:()=>this.handleClick(e),onKeyUp:t=>{t.code!==r.ENTER&&t.code!==r.SPACE||this.handleClick(e)},onKeyDown:e=>this.handleArrowNav(e),role:e.url?"treeitem":void 0,"aria-hidden":e.url?void 0:"true","aria-expanded":(null===(s=e.children)||void 0===s?void 0:s.length)>0&&!0,"aria-level":i,"aria-label":e.name,href:e.url},l("span",{class:"item ellipsis"},e.icon&&l("z-icon",{width:16,height:16,fill:e.url?"color-primary01":"color-default-icon",class:"item-icon",name:e.icon}),l("span",{class:{"item-label":!0,"no-icon-label":!e.icon,"bold-item":e.bold},title:e.name},e.name))),(null===(n=e.children)||void 0===n?void 0:n.length)>0&&l("z-list",{role:"group"},l("div",{class:"children-node"},e.children.map(((e,t)=>this.renderTreeList(e,""+t,i+1))))));return o}render(){const e=this.parsedItems.some((e=>!!e.url));return l(s,{key:"68d06fd53ad0f4bce01853b95aef0f7482f3304a",class:"tree-list",role:e?"navigation":"none","aria-hidden":e?void 0:"true","aria-labelledby":this.htmlAriaLabelledby},l("div",{key:"6b8010ae9caf73ec0a43b09f5d9610247110d1a6",tabIndex:-1,role:e?"tree":"none","aria-hidden":e?void 0:"true","aria-label":this.htmlSectionTitle},this.parsedItems.map(((e,t)=>this.renderTreeList(e,""+t)))))}get host(){return this}static get watchers(){return{items:[{watchItems:0}]}}static get style(){return':host{font-family:var(--font-family-sans)}z-list-element{position:relative;display:block;padding-top:var(--space-unit)}z-list-element::before,z-list-element::after{position:absolute;z-index:100;top:0.125rem;left:-0.5rem;content:""}z-list z-list-element::before{width:var(--space-unit);height:calc(var(--space-unit) * 2);border-bottom:var(--border-size-small) solid var(--color-disabled01-icon);border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element::after{width:var(--space-unit);height:100%;border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element:last-child::after,z-list>z-list-element::before,z-list>z-list-element::after,z-list>z-list-group>z-list-element::before,z-list>z-list-group>z-list-element::after{display:none}z-list>div.children-node{padding-left:calc(var(--space-unit) * 2)}z-list-element>.list-element{z-index:100;display:flex;justify-content:space-between;padding:0;color:var(--color-default-text);font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);text-decoration:none}z-list-element>.list-element.link-clickable{color:var(--color-primary01)}z-list-element>.list-element.link-clickable:hover{text-decoration:underline}z-list-element>.list-element .item.ellipsis{overflow:hidden}z-list-element .list-element::after{position:absolute;top:0;right:-0.0625rem;display:block;width:100%;height:calc(var(--space-unit) * 5);content:"";transform:translateX(-100%)}.item-label{overflow:hidden;flex-grow:1;font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);letter-spacing:0.0032rem;line-height:1.25rem;text-overflow:ellipsis;white-space:nowrap}.item-label.bold-item{font-weight:var(--font-sb)}.item.ellipsis{display:flex;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}.children-node>z-list-element{padding:0;padding-top:0.125;padding-left:calc(var(--space-unit) * 1.25)}.item-icon{margin-right:var(--space-unit)}.no-icon-label{padding-left:var(--space-unit)}.children-node>z-list-element.no-icon-elm{padding-left:0}z-list-element>.list-element:focus:focus-visible{position:relative;z-index:200;box-shadow:var(--shadow-focus-primary);outline:none}@media (max-width: 767px){z-list-element::before,z-list-element::after{top:0.1875rem}z-list z-list-element::before{height:calc(var(--space-unit) * 2.5)}.children-node>z-list-element{padding-top:var(--space-unit)}}'}},[1,"z-tree-list",{items:[1],htmlAriaLabelledby:[513,"html-aria-labelledby"],htmlSectionTitle:[513,"html-section-title"]},void 0,{items:[{watchItems:0}]}]),h=m,f=function(){"undefined"!=typeof customElements&&["z-tree-list","z-divider","z-icon","z-list","z-list-element"].forEach((e=>{switch(e){case"z-tree-list":customElements.get(n(e))||customElements.define(n(e),m);break;case"z-divider":customElements.get(n(e))||o();break;case"z-icon":customElements.get(n(e))||a();break;case"z-list":customElements.get(n(e))||d();break;case"z-list-element":customElements.get(n(e))||c()}}))};export{h as ZTreeList,f as defineCustomElement}

package/dist/components/z-visually-hidden.js

@@ -1,36 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const stylesCss = ":host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
-const ZVisuallyHiddenStyle0 = stylesCss;
-
-const ZVisuallyHidden$1 = /*@__PURE__*/ proxyCustomElement(class ZVisuallyHidden extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-    }
-    render() {
-        return h("slot", { key: 'e165e47bd9a2da0bb438ea4dccfbb08e6f02cc4b' });
-    }
-    static get style() { return ZVisuallyHiddenStyle0; }
-}, [1, "z-visually-hidden"]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-visually-hidden":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZVisuallyHidden$1);
-            }
-            break;
-    } });
-}
-
-const ZVisuallyHidden = ZVisuallyHidden$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZVisuallyHidden, defineCustomElement };
-
-//# sourceMappingURL=z-visually-hidden.js.map
+import{proxyCustomElement as e,HTMLElement as t,h as i,transformTag as n}from"@stencil/core/internal/client";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return i("slot",{key:"e1a4d7e8ec823326ce9decd1bcbf5ffc3e2987bf"})}static get style(){return":host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}"}},[257,"z-visually-hidden"]),c=s,o=function(){"undefined"!=typeof customElements&&["z-visually-hidden"].forEach((e=>{"z-visually-hidden"===e&&(customElements.get(n(e))||customElements.define(n(e),s))}))};export{c as ZVisuallyHidden,o as defineCustomElement}

package/dist/esm/_commonjsHelpers-B85MJLTf.js

@@ -0,0 +1,5 @@
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+export { getDefaultExportFromCjs as g };

package/dist/esm/breakpoints-Q-tWjk7P.js

@@ -0,0 +1,9 @@
+/** Breakpoints for responsive design. The values are the max width of the screen for each breakpoint. */
+var Breakpoints;
+(function (Breakpoints) {
+    Breakpoints[Breakpoints["MOBILE"] = 767] = "MOBILE";
+    Breakpoints[Breakpoints["TABLET"] = 1151] = "TABLET";
+    Breakpoints[Breakpoints["DESKTOP"] = 1365] = "DESKTOP";
+})(Breakpoints || (Breakpoints = {}));
+
+export { Breakpoints as B };