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

package/dist/components/p-vqNYJq21.js

@@ -0,0 +1,179 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-Dxu5saXC.js';
+import { E as ExpandableListButtonAlign, j as ListDividerType, r as DividerSize, v as ExpandableListStyle, L as ListSize, u as ListType, K as KeyboardCode } from './p-Bla2iV_L.js';
+import { d as defineCustomElement$2 } from './p-vUB-94eM.js';
+import { d as defineCustomElement$1 } from './p-DexdQ2O9.js';
+
+const stylesCss = ":host{outline:none}:host>.container{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;background-color:var(--background-color-list-element, var(--color-surface01));font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size=\"small\"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size=\"medium\"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size=\"medium\"])>.tree-element-container{padding-top:var(--space-unit);padding-bottom:0}:host([size=\"large\"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size=\"x-large\"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([clickable])>.container{cursor:pointer}:host([expandable]:hover)>.container,:host([clickable]:hover)>.container{background-color:var(--background-hover-color-list-element, var(--color-background))}:host([expandable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container{box-shadow:var(--shadow-focus-primary)}:host([clickable]:not([expandable]))>.container.clicked{box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([clickable]:active)>.container{background-color:var(--background-active-color-list-element, var(--color-background))}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container{display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded{display:block}.z-list-content-container{display:flex;align-items:center}:host .z-tree-list-divider{position:absolute;z-index:100;left:0}";
+
+const ZListElement = /*@__PURE__*/ proxyCustomElement(class ZListElement extends H {
+    accessibleFocusHandler(e) {
+        if (this.listElementId === e.detail) {
+            const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);
+            toFocus.focus();
+        }
+    }
+    /**
+     * Constructor.
+     */
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.accessibleFocus = createEvent(this, "accessibleFocus", 7);
+        this.ariaDescendantFocus = createEvent(this, "ariaDescendantFocus", 7);
+        this.clickItem = createEvent(this, "clickItem", 7);
+        this.openElementConfig = {
+            accordion: {
+                open: "minus-circled",
+                close: "plus-circled",
+            },
+            menu: {
+                open: "chevron-up",
+                close: "chevron-down",
+            },
+        };
+        this.alignButton = ExpandableListButtonAlign.LEFT;
+        this.clickable = false;
+        this.dividerColor = "color-surface03";
+        this.dividerType = ListDividerType.NONE;
+        this.dividerSize = DividerSize.SMALL;
+        this.expandable = false;
+        this.expandableStyle = ExpandableListStyle.ACCORDION;
+        this.listElementId = undefined;
+        this.size = ListSize.MEDIUM;
+        this.color = "none";
+        this.disabled = false;
+        this.listElementPosition = "0";
+        this.listType = ListType.NONE;
+        this.hasTreeItems = undefined;
+        this.role = "listitem";
+        this.htmlTabindex = 0;
+        this.showInnerContent = false;
+        this.handleClick = this.handleClick.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+    }
+    /**
+     * Handler for click on element. If element is expandable, change state.
+     * @returns void
+     */
+    handleClick() {
+        this.clickItem.emit(this.listElementId);
+        if (!this.expandable) {
+            return;
+        }
+        this.showInnerContent = !this.showInnerContent;
+    }
+    handleKeyDown(event) {
+        const expandByKey = event.code === KeyboardCode.ENTER;
+        switch (event.code) {
+            case KeyboardCode.ARROW_DOWN:
+                event.preventDefault();
+                this.accessibleFocus.emit(this.listElementId + 1);
+                break;
+            case KeyboardCode.ARROW_UP:
+                event.preventDefault();
+                this.accessibleFocus.emit(this.listElementId - 1);
+                break;
+            case KeyboardCode.ENTER:
+                event.preventDefault();
+                this.clickItem.emit(this.listElementId);
+                break;
+        }
+        if (!this.expandable || !expandByKey) {
+            return;
+        }
+        this.showInnerContent = !this.showInnerContent;
+    }
+    /**
+     * Renders button to expand element.
+     * @returns expadable button
+     */
+    renderExpandableButton() {
+        if (!this.expandable) {
+            return null;
+        }
+        return (h("z-icon", { name: this.showInnerContent
+                ? this.openElementConfig[this.expandableStyle].open
+                : this.openElementConfig[this.expandableStyle].close }));
+    }
+    /**
+     * Renders expanded content if element is expandable.
+     * @returns expanded content
+     */
+    renderExpandedContent() {
+        if (!this.expandable) {
+            return null;
+        }
+        return (h("div", { class: {
+                "z-list-element-inner-container": true,
+                "expanded": this.showInnerContent,
+            } }, h("slot", { name: "inner-content" })));
+    }
+    /**
+     * Renders content of the z-list-element
+     * @returns list content
+     */
+    renderContent() {
+        if (this.listType === ListType.NONE) {
+            return h("slot", null);
+        }
+        if (this.listType === ListType.ORDERED) {
+            return (h("div", { class: "z-list-content-container" }, h("div", null, this.listElementPosition, ".\u2003"), h("slot", null)));
+        }
+        if (this.listType === ListType.UNORDERED) {
+            return (h("div", { class: "z-list-content-container" }, h("span", null, "\u2022\u2003"), h("slot", null)));
+        }
+    }
+    render() {
+        return (h(Host, { key: 'e85405b1ec7beb005da77e536f26ddbc336b8e85', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.role }, h("div", { key: '00aa30024263577a239edd5ab76fe655f42ffa5c', class: this.hasTreeItems ? "tree-element-container" : "container", style: { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: '03e62ff1c159abab3d96086e54fb975a37cc06fc', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: '64675717abe6bb63de0b3ec39c638fc445639ce3', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
+    }
+    get host() { return this; }
+    static get style() { return stylesCss; }
+}, [1, "z-list-element", {
+        "alignButton": [513, "align-button"],
+        "clickable": [516],
+        "dividerColor": [1, "divider-color"],
+        "dividerType": [1, "divider-type"],
+        "dividerSize": [1, "divider-size"],
+        "expandable": [516],
+        "expandableStyle": [1, "expandable-style"],
+        "listElementId": [514, "list-element-id"],
+        "size": [513],
+        "color": [513],
+        "disabled": [516],
+        "listElementPosition": [513, "list-element-position"],
+        "listType": [513, "list-type"],
+        "hasTreeItems": [4, "has-tree-items"],
+        "role": [513],
+        "htmlTabindex": [2, "html-tabindex"],
+        "showInnerContent": [32]
+    }, [[4, "accessibleFocus", "accessibleFocusHandler"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-list-element", "z-divider", "z-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-list-element":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZListElement);
+            }
+            break;
+        case "z-divider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "z-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { ZListElement as Z, defineCustomElement as d };
+//# sourceMappingURL=p-vqNYJq21.js.map
+
+//# sourceMappingURL=p-vqNYJq21.js.map

package/dist/components/p-vqNYJq21.js.map

@@ -0,0 +1 @@
+{"file":"p-vqNYJq21.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/list/z-list-element/styles.css?tag=z-list-element&encapsulation=shadow","node_modules/.pnpm/@zanichelli+albe-web-components@18.3.2/node_modules/@zanichelli/albe-web-components/dist/collection/components/list/z-list-element/index.js"],"sourcesContent":[":host {\n  outline: none;\n}\n\n:host > .container {\n  --background-color-list-element: ;\n  --background-hover-color-list-element: ;\n  --background-active-color-list-element: ;\n\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  justify-content: center;\n  background-color: var(--background-color-list-element, var(--color-surface01));\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  outline: none;\n}\n\n/* z-list-element size */\n\n:host([size=\"small\"]) > .container {\n  min-height: calc(var(--space-unit) * 4);\n  padding: calc(var(--space-unit) / 2) 0;\n}\n\n:host([size=\"medium\"]) > .container {\n  min-height: calc(var(--space-unit) * 5);\n  padding: var(--space-unit) 0;\n}\n\n:host([size=\"medium\"]) > .tree-element-container {\n  padding-top: var(--space-unit);\n  padding-bottom: 0;\n}\n\n:host([size=\"large\"]) > .container {\n  min-height: calc(var(--space-unit) * 7);\n  padding: calc(var(--space-unit) * 2) 0;\n}\n\n:host([size=\"x-large\"]) > .container {\n  min-height: calc(var(--space-unit) * 9);\n  padding: calc(var(--space-unit) * 3) 0;\n}\n\n/* ----------------- */\n\n:host([expandable]) > .container,\n:host([clickable]) > .container {\n  cursor: pointer;\n}\n\n:host([expandable]:hover) > .container,\n:host([clickable]:hover) > .container {\n  background-color: var(--background-hover-color-list-element, var(--color-background));\n}\n\n:host([expandable]:focus:focus-visible) > .container,\n:host([clickable]:focus:focus-visible) > .container {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([clickable]:not([expandable])) > .container.clicked {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([expandable]:active) > .container,\n:host([clickable]:active) > .container {\n  background-color: var(--background-active-color-list-element, var(--color-background));\n}\n\n:host([align-button=\"left\"][expandable]) > .container > .z-list-element-container {\n  display: flex;\n}\n\n:host([align-button=\"right\"][expandable]) > .container > .z-list-element-container {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: space-between;\n}\n\n:host([align-button=\"left\"][expandable]) > .container > .z-list-element-container > z-icon {\n  margin-right: var(--space-unit);\n}\n\n:host([align-button=\"right\"][expandable]) > .container > .z-list-element-container > z-icon {\n  margin-left: var(--space-unit);\n}\n\n:host > .container > .z-list-element-inner-container {\n  display: none;\n}\n\n:host > .container > .z-list-element-inner-container.expanded {\n  display: block;\n}\n\n.z-list-content-container {\n  display: flex;\n  align-items: center;\n}\n\n:host .z-tree-list-divider {\n  position: absolute;\n  z-index: 100;\n  left: 0;\n}\n","import { h, Host } from \"@stencil/core\";\nimport { DividerSize, ExpandableListButtonAlign, ExpandableListStyle, KeyboardCode, ListDividerType, ListSize, ListType, } from \"../../../beans\";\nexport class ZListElement {\n    accessibleFocusHandler(e) {\n        if (this.listElementId === e.detail) {\n            const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);\n            toFocus.focus();\n        }\n    }\n    /**\n     * Constructor.\n     */\n    constructor() {\n        this.openElementConfig = {\n            accordion: {\n                open: \"minus-circled\",\n                close: \"plus-circled\",\n            },\n            menu: {\n                open: \"chevron-up\",\n                close: \"chevron-down\",\n            },\n        };\n        this.alignButton = ExpandableListButtonAlign.LEFT;\n        this.clickable = false;\n        this.dividerColor = \"color-surface03\";\n        this.dividerType = ListDividerType.NONE;\n        this.dividerSize = DividerSize.SMALL;\n        this.expandable = false;\n        this.expandableStyle = ExpandableListStyle.ACCORDION;\n        this.listElementId = undefined;\n        this.size = ListSize.MEDIUM;\n        this.color = \"none\";\n        this.disabled = false;\n        this.listElementPosition = \"0\";\n        this.listType = ListType.NONE;\n        this.hasTreeItems = undefined;\n        this.role = \"listitem\";\n        this.htmlTabindex = 0;\n        this.showInnerContent = false;\n        this.handleClick = this.handleClick.bind(this);\n        this.handleKeyDown = this.handleKeyDown.bind(this);\n    }\n    /**\n     * Handler for click on element. If element is expandable, change state.\n     * @returns void\n     */\n    handleClick() {\n        this.clickItem.emit(this.listElementId);\n        if (!this.expandable) {\n            return;\n        }\n        this.showInnerContent = !this.showInnerContent;\n    }\n    handleKeyDown(event) {\n        const expandByKey = event.code === KeyboardCode.ENTER;\n        switch (event.code) {\n            case KeyboardCode.ARROW_DOWN:\n                event.preventDefault();\n                this.accessibleFocus.emit(this.listElementId + 1);\n                break;\n            case KeyboardCode.ARROW_UP:\n                event.preventDefault();\n                this.accessibleFocus.emit(this.listElementId - 1);\n                break;\n            case KeyboardCode.ENTER:\n                event.preventDefault();\n                this.clickItem.emit(this.listElementId);\n                break;\n            default:\n                break;\n        }\n        if (!this.expandable || !expandByKey) {\n            return;\n        }\n        this.showInnerContent = !this.showInnerContent;\n    }\n    /**\n     * Renders button to expand element.\n     * @returns expadable button\n     */\n    renderExpandableButton() {\n        if (!this.expandable) {\n            return null;\n        }\n        return (h(\"z-icon\", { name: this.showInnerContent\n                ? this.openElementConfig[this.expandableStyle].open\n                : this.openElementConfig[this.expandableStyle].close }));\n    }\n    /**\n     * Renders expanded content if element is expandable.\n     * @returns expanded content\n     */\n    renderExpandedContent() {\n        if (!this.expandable) {\n            return null;\n        }\n        return (h(\"div\", { class: {\n                \"z-list-element-inner-container\": true,\n                \"expanded\": this.showInnerContent,\n            } }, h(\"slot\", { name: \"inner-content\" })));\n    }\n    /**\n     * Renders content of the z-list-element\n     * @returns list content\n     */\n    renderContent() {\n        if (this.listType === ListType.NONE) {\n            return h(\"slot\", null);\n        }\n        if (this.listType === ListType.ORDERED) {\n            return (h(\"div\", { class: \"z-list-content-container\" }, h(\"div\", null, this.listElementPosition, \".\\u2003\"), h(\"slot\", null)));\n        }\n        if (this.listType === ListType.UNORDERED) {\n            return (h(\"div\", { class: \"z-list-content-container\" }, h(\"span\", null, \"\\u2022\\u2003\"), h(\"slot\", null)));\n        }\n    }\n    render() {\n        return (h(Host, { key: 'e85405b1ec7beb005da77e536f26ddbc336b8e85', \"aria-expanded\": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? \"none\" : this.role }, h(\"div\", { key: '00aa30024263577a239edd5ab76fe655f42ffa5c', class: this.hasTreeItems ? \"tree-element-container\" : \"container\", style: { color: `var(--${this.color})` }, tabindex: \"-1\", id: `z-list-element-id-${this.listElementId}`, part: \"list-item-container\" }, h(\"div\", { key: '03e62ff1c159abab3d96086e54fb975a37cc06fc', class: \"z-list-element-container\" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h(\"z-divider\", { key: '64675717abe6bb63de0b3ec39c638fc445639ce3', class: { \"z-tree-list-divider\": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));\n    }\n    static get is() { return \"z-list-element\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"styles.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"alignButton\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"ExpandableListButtonAlign\",\n                    \"resolved\": \"ExpandableListButtonAlign.LEFT | ExpandableListButtonAlign.RIGHT\",\n                    \"references\": {\n                        \"ExpandableListButtonAlign\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../../beans\",\n                            \"id\": \"src/beans/index.tsx::ExpandableListButtonAlign\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] Align expandable button left or right.\"\n                },\n                \"attribute\": \"align-button\",\n                \"reflect\": true,\n                \"defaultValue\": \"ExpandableListButtonAlign.LEFT\"\n            },\n            \"clickable\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] Sets element clickable.\"\n                },\n                \"attribute\": \"clickable\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"dividerColor\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] Sets the divider color.\"\n                },\n                \"attribute\": \"divider-color\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"color-surface03\\\"\"\n            },\n            \"dividerType\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"ListDividerType\",\n                    \"resolved\": \"ListDividerType.ELEMENT | ListDividerType.HEADER | ListDividerType.NONE\",\n                    \"references\": {\n                        \"ListDividerType\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../../beans\",\n                            \"id\": \"src/beans/index.tsx::ListDividerType\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] Sets the position where to insert the divider.\"\n                },\n                \"attribute\": \"divider-type\",\n                \"reflect\": false,\n                \"defaultValue\": \"ListDividerType.NONE\"\n            },\n            \"dividerSize\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"DividerSize\",\n                    \"resolved\": \"DividerSize.LARGE | DividerSize.MEDIUM | DividerSize.SMALL\",\n                    \"references\": {\n                        \"DividerSize\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../../beans\",\n                            \"id\": \"src/beans/index.tsx::DividerSize\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] Sets the divider size.\"\n                },\n                \"attribute\": \"divider-size\",\n                \"reflect\": false,\n                \"defaultValue\": \"DividerSize.SMALL\"\n            },\n            \"expandable\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] Sets element as expandable.\"\n                },\n                \"attribute\": \"expandable\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"expandableStyle\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"ExpandableListStyle\",\n                    \"resolved\": \"ExpandableListStyle.ACCORDION | ExpandableListStyle.MENU\",\n                    \"references\": {\n                        \"ExpandableListStyle\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../../beans\",\n                            \"id\": \"src/beans/index.tsx::ExpandableListStyle\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] Sets expandable style to element.\"\n                },\n                \"attribute\": \"expandable-style\",\n                \"reflect\": false,\n                \"defaultValue\": \"ExpandableListStyle.ACCORDION\"\n            },\n            \"listElementId\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] List element id.\"\n                },\n                \"attribute\": \"list-element-id\",\n                \"reflect\": true\n            },\n            \"size\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"ListSize\",\n                    \"resolved\": \"ListSize.LARGE | ListSize.MEDIUM | ListSize.NONE | ListSize.SMALL | ListSize.X_LARGE\",\n                    \"references\": {\n                        \"ListSize\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../../beans\",\n                            \"id\": \"src/beans/index.tsx::ListSize\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] Sets size of inside elements.\"\n                },\n                \"attribute\": \"size\",\n                \"reflect\": true,\n                \"defaultValue\": \"ListSize.MEDIUM\"\n            },\n            \"color\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] Sets text color of the element.\"\n                },\n                \"attribute\": \"color\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"none\\\"\"\n            },\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] Sets disabled style of the element.\"\n                },\n                \"attribute\": \"disabled\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"listElementPosition\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] position of the list element inside the list or the group\"\n                },\n                \"attribute\": \"list-element-position\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"0\\\"\"\n            },\n            \"listType\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"ListType\",\n                    \"resolved\": \"ListType.NONE | ListType.ORDERED | ListType.UNORDERED\",\n                    \"references\": {\n                        \"ListType\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../../beans\",\n                            \"id\": \"src/beans/index.tsx::ListType\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] type of the list marker for each element\"\n                },\n                \"attribute\": \"list-type\",\n                \"reflect\": true,\n                \"defaultValue\": \"ListType.NONE\"\n            },\n            \"hasTreeItems\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"[optional] Sets element as tree item.\"\n                },\n                \"attribute\": \"has-tree-items\",\n                \"reflect\": false\n            },\n            \"role\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Sets element role.\"\n                },\n                \"attribute\": \"role\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"listitem\\\"\"\n            },\n            \"htmlTabindex\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number | null\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"set tabindex to Host tag (optional). Defaults to 0.\"\n                },\n                \"attribute\": \"html-tabindex\",\n                \"reflect\": false,\n                \"defaultValue\": \"0\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"showInnerContent\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"accessibleFocus\",\n                \"name\": \"accessibleFocus\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"remove filter click event, returns filterid\"\n                },\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"ariaDescendantFocus\",\n                \"name\": \"ariaDescendantFocus\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"set parent aria-activedescendant on focus event, returns filterid\"\n                },\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"clickItem\",\n                \"name\": \"clickItem\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"remove filter click event, returns filterid\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get elementRef() { return \"host\"; }\n    static get listeners() {\n        return [{\n                \"name\": \"accessibleFocus\",\n                \"method\": \"accessibleFocusHandler\",\n                \"target\": \"document\",\n                \"capture\": false,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=index.js.map\n"],"version":3}

package/dist/components/p-wdrm-LLt.js

@@ -0,0 +1,342 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-Dxu5saXC.js';
+import { P as PopoverPosition, K as KeyboardCode } from './p-Bla2iV_L.js';
+
+const stylesCss = ":host{--z-popover-theme--surface:var(--color-surface01);--z-popover-theme--text:var(--color-default-text);--z-popover-padding:0;--z-popover-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base));position:relative;display:none;min-width:calc(var(--space-unit) * 8);min-height:calc(var(--space-unit) * 4);align-items:center;justify-content:center;padding:var(--z-popover-padding);background:var(--z-popover-theme--surface);border-radius:var(--border-radius-small);color:var(--z-popover-theme--text);fill:currentcolor;filter:var(--z-popover-shadow-filter);font-family:var(--font-family-sans);text-align:center}:host([open][current-position]),:host([open=\"true\"][current-position]){display:flex}:host([center][current-position=\"top\"]),:host([center][current-position=\"bottom\"]){transform:translateX(-50%)}:host([center][current-position=\"right\"]),:host([center][current-position=\"left\"]){transform:translateY(-50%)}:host([current-position^=\"top\"]){margin:0 0 var(--space-unit)}:host([current-position^=\"bottom\"]){margin:var(--space-unit) 0 0}:host([current-position^=\"left\"]){margin:0 var(--space-unit) 0 0}:host([current-position^=\"right\"]){margin:0 0 0 var(--space-unit)}:host([current-position])::before{--arrow-size:6px;--arrow-edge-offset:calc(100% - var(--space-unit) - (var(--arrow-size) / 2));--arrow-center-x-offset:calc(50% - (var(--arrow-size) / 2));--arrow-center-y-offset:calc(100% - (var(--arrow-size) / 2));position:absolute;display:block;width:var(--arrow-size);height:var(--arrow-size);background:var(--z-popover-theme--surface);content:\"\";transform:rotate(45deg)}:host([show-arrow=\"false\"])::before,:host(:not([show-arrow]))::before{display:none}:host([current-position^=\"top\"])::before{top:var(--arrow-center-y-offset)}:host([current-position^=\"bottom\"])::before{bottom:var(--arrow-center-y-offset)}:host([current-position=\"top\"])::before,:host([current-position=\"bottom\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before,:host([current-position=\"left\"])::before{bottom:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"top_right\"])::before,:host([current-position=\"bottom_right\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"top_left\"])::before,:host([current-position=\"bottom_left\"])::before{left:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"left_top\"])::before{top:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"right_bottom\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left_top\"])::before,:host([current-position=\"left_bottom\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"right_bottom\"])::before,:host([current-position=\"left_bottom\"])::before{bottom:var(--arrow-edge-offset)}:host([center][current-position=\"top\"])::before,:host([center][current-position=\"bottom\"])::before{right:auto;left:var(--arrow-center-x-offset)}:host([center][current-position=\"right\"])::before,:host([center][current-position=\"left\"])::before{top:var(--arrow-center-x-offset);bottom:auto}::slotted(*){overflow:auto;flex:1 auto}";
+
+const DOCUMENT_ELEMENT = document.documentElement;
+function getParentElement(element) {
+    if (element.parentNode === element.shadowRoot) {
+        return element.shadowRoot.host;
+    }
+    return element.parentElement;
+}
+/**
+ * Find the closest scrollable parent of a node.
+ *
+ * @param {Element} element The node
+ */
+function findScrollableParent(element) {
+    let parent = getParentElement(element);
+    while (parent && parent !== DOCUMENT_ELEMENT) {
+        const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);
+        if (overflow === "hidden" || overflowY === "hidden" || overflowX === "hidden") {
+            return parent;
+        }
+        if ((parent.scrollHeight > parent.clientHeight && overflow !== "visible" && overflowY !== "visible") ||
+            (parent.scrollWidth > parent.clientWidth && overflow !== "visible" && overflowX !== "visible")) {
+            return parent;
+        }
+        parent = getParentElement(parent);
+    }
+    return DOCUMENT_ELEMENT;
+}
+/**
+ * Calculate computed offset.
+ * It includes matrix transformations.
+ * @param element The target element.
+ * @param targetParentOffset The relative offset parent.
+ * @return A client rect object.
+ */
+function computeOffset(element, targetParentOffset) {
+    const rect = element.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+    let top = 0;
+    let left = 0;
+    let offsetParent = element;
+    while (offsetParent && offsetParent != targetParentOffset) {
+        left += offsetParent.offsetLeft;
+        // document.body sometimes has offsetTop == 0 but still has an
+        // offset because of children margins!
+        if (offsetParent === document.body) {
+            top += offsetParent.getBoundingClientRect().top + window.scrollY;
+        }
+        else {
+            top += offsetParent.offsetTop;
+        }
+        if (window.DOMMatrix) {
+            const style = window.getComputedStyle(offsetParent);
+            const transform = style.transform || style.webkitTransform;
+            const domMatrix = new DOMMatrix(transform);
+            if (domMatrix) {
+                left += domMatrix.m41;
+                if (offsetParent !== document.body) {
+                    top += domMatrix.m42;
+                }
+            }
+        }
+        if (!offsetParent.offsetParent) {
+            break;
+        }
+        offsetParent = offsetParent.offsetParent;
+    }
+    let parentWidth;
+    let parentHeight;
+    if (offsetParent === document.body) {
+        parentWidth = window.innerWidth;
+        parentHeight = window.innerHeight;
+    }
+    else {
+        parentWidth = offsetParent.offsetWidth;
+        parentHeight = offsetParent.offsetHeight;
+    }
+    const right = parentWidth - left - rect.width;
+    const bottom = parentHeight - top - rect.height;
+    return { top, right, bottom, left, width, height };
+}
+const ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.positionChange = createEvent(this, "positionChange", 7);
+        this.openChange = createEvent(this, "openChange", 7);
+        this.position = PopoverPosition.AUTO;
+        this.open = false;
+        this.bindTo = undefined;
+        this.showArrow = false;
+        this.center = false;
+        this.closable = true;
+        this.currentPosition = undefined;
+    }
+    closePopoverWithKeyboard(e) {
+        if (this.closable && e.key === KeyboardCode.ESC) {
+            this.open = false;
+        }
+    }
+    /**
+     * Close the popover when clicking outside of its content.
+     * Stop event propagation if the click was fired by popover's trigger element,
+     * to prevent close and reopen glitches.
+     * @param {MouseEvent} e
+     */
+    handleOutsideClick(e) {
+        if (!this.closable || !this.open) {
+            return;
+        }
+        if (!e.composedPath().includes(this.host)) {
+            const target = e.target;
+            const triggerElemClicked = this.bindTo instanceof H ? this.bindTo.contains(target) : target.closest(this.bindTo);
+            if (triggerElemClicked) {
+                e.stopPropagation();
+            }
+            this.open = false;
+            this.positionChange.emit({ position: this.currentPosition });
+        }
+    }
+    validatePosition(newValue) {
+        if (newValue && !Object.values(PopoverPosition).includes(newValue)) {
+            this.position = PopoverPosition.AUTO;
+        }
+        this.currentPosition = this.position;
+        this.positionChange.emit({ position: this.currentPosition });
+    }
+    /**
+     * Setup popover behaviors on opening.
+     */
+    onOpen() {
+        cancelAnimationFrame(this.animationFrameRequestId);
+        if (this.open) {
+            const setPosition = () => {
+                if (this.open) {
+                    this.setPosition();
+                    this.animationFrameRequestId = requestAnimationFrame(setPosition);
+                }
+            };
+            setPosition();
+        }
+        else if (this.host.hasAttribute("current-position")) {
+            this.host.removeAttribute("current-position");
+            this.currentPosition = undefined;
+        }
+        this.openChange.emit({ open: this.open });
+    }
+    disconnectedCallback() {
+        cancelAnimationFrame(this.animationFrameRequestId);
+    }
+    /**
+     * Set the position of the popover.
+     */
+    setPosition() {
+        let element;
+        if (typeof this.bindTo === "string") {
+            element = this.host.ownerDocument.querySelector(this.bindTo);
+        }
+        else if (this.bindTo) {
+            element = this.bindTo;
+        }
+        else {
+            element = this.host.parentElement;
+        }
+        if (!element) {
+            return;
+        }
+        const scrollContainer = findScrollableParent(element);
+        const scrollingBoundingRect = scrollContainer.getBoundingClientRect();
+        const offsetContainer = this.host.offsetParent;
+        const relativeBoundingRect = offsetContainer
+            ? computeOffset(offsetContainer, scrollContainer)
+            : { top: 0, right: 0, bottom: 0, left: 0 };
+        const boundingRect = computeOffset(element, scrollContainer);
+        const top = boundingRect.top - scrollContainer.scrollTop;
+        const bottom = scrollingBoundingRect.height - (boundingRect.top + boundingRect.height) + scrollContainer.scrollTop;
+        const left = boundingRect.left - scrollContainer.scrollLeft;
+        const right = scrollingBoundingRect.width - (boundingRect.left + boundingRect.width) + scrollContainer.scrollLeft;
+        const overflowBottom = Math.max(0, scrollingBoundingRect.top + scrollingBoundingRect.height - window.innerHeight);
+        const overflowRight = Math.max(0, scrollingBoundingRect.left + scrollingBoundingRect.width - window.innerWidth);
+        const availableTop = Math.min(top, top + scrollingBoundingRect.top);
+        const availableBottom = Math.min(bottom, bottom - overflowBottom);
+        const availableLeft = Math.min(left, left + scrollingBoundingRect.left);
+        const availableRight = Math.min(right, right - overflowRight);
+        const availableHeight = availableTop + availableBottom + boundingRect.height;
+        const availableWidth = availableLeft + availableRight + boundingRect.width;
+        let position = this.currentPosition;
+        const positions = [];
+        if (this.position === PopoverPosition.AUTO) {
+            /**
+             * The `AUTO` position tries to place the popover in the 'safest' area,
+             * where there's more space available.
+             */
+            if (availableLeft / availableWidth > 0.6) {
+                positions.push(PopoverPosition.LEFT);
+            }
+            else if (availableLeft / availableWidth < 0.4) {
+                positions.push(PopoverPosition.RIGHT);
+            }
+            if (availableTop / availableHeight > 0.9) {
+                positions.unshift(PopoverPosition.TOP);
+            }
+            else if (availableTop / availableHeight > 0.6) {
+                positions.push(PopoverPosition.TOP);
+            }
+            else if (availableTop / availableHeight < 0.1) {
+                positions.unshift(PopoverPosition.BOTTOM);
+            }
+            else {
+                positions.push(PopoverPosition.BOTTOM);
+            }
+            position = positions.join("_");
+        }
+        const style = this.host.style;
+        style.position = "absolute";
+        const offsetTop = boundingRect.top - relativeBoundingRect.top;
+        const offsetRight = boundingRect.right - relativeBoundingRect.right;
+        const offsetBottom = boundingRect.bottom - relativeBoundingRect.bottom;
+        const offsetLeft = boundingRect.left - relativeBoundingRect.left;
+        const offsetModifier = this.center ? 0.5 : 0;
+        const sizeModifier = this.center ? 0.5 : 0;
+        if (position === PopoverPosition.TOP || position === PopoverPosition.TOP_RIGHT) {
+            style.top = "auto";
+            style.right = "auto";
+            style.bottom = `${offsetBottom + boundingRect.height}px`;
+            style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
+            style.maxHeight = `${availableTop}px`;
+            if (position === PopoverPosition.TOP_RIGHT) {
+                style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
+            }
+        }
+        else if (position === PopoverPosition.TOP_LEFT) {
+            style.top = "auto";
+            style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
+            style.bottom = `${offsetBottom + boundingRect.height}px`;
+            style.left = "auto";
+            style.maxWidth = `${availableLeft}px`;
+            style.maxHeight = `${availableTop}px`;
+        }
+        else if (position === PopoverPosition.BOTTOM || position === PopoverPosition.BOTTOM_RIGHT) {
+            style.top = `${offsetTop + boundingRect.height}px`;
+            style.right = "auto";
+            style.bottom = "auto";
+            style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
+            style.maxHeight = `${availableBottom}px`;
+            if (position === PopoverPosition.BOTTOM_RIGHT) {
+                style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
+            }
+        }
+        else if (position === PopoverPosition.BOTTOM_LEFT) {
+            style.top = `${offsetTop + boundingRect.height}px`;
+            style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
+            style.bottom = "auto";
+            style.left = "auto";
+            style.maxWidth = `${availableLeft}px`;
+            style.maxHeight = `${availableBottom}px`;
+        }
+        else if (position === PopoverPosition.RIGHT || position === PopoverPosition.RIGHT_BOTTOM) {
+            style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
+            style.right = "auto";
+            style.bottom = "auto";
+            style.left = `${offsetLeft + boundingRect.width}px`;
+            style.maxWidth = `${availableRight}px`;
+            style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
+        }
+        else if (position === PopoverPosition.RIGHT_TOP) {
+            style.top = "auto";
+            style.right = "auto";
+            style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
+            style.left = `${offsetLeft + boundingRect.width}px`;
+            style.maxWidth = `${availableRight}px`;
+            style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
+        }
+        else if (position === PopoverPosition.LEFT || position === PopoverPosition.LEFT_BOTTOM) {
+            style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
+            style.right = `${offsetRight + boundingRect.width}px`;
+            style.bottom = "auto";
+            style.left = "auto";
+            style.maxWidth = `${availableLeft}px`;
+            style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
+        }
+        else if (position === PopoverPosition.LEFT_TOP) {
+            style.top = "auto";
+            style.right = `${offsetRight + boundingRect.width}px`;
+            style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
+            style.left = "auto";
+            style.maxWidth = `${availableLeft}px`;
+            style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
+        }
+        this.currentPosition = position || this.position;
+        this.host.setAttribute("current-position", this.currentPosition);
+    }
+    componentWillLoad() {
+        this.validatePosition(this.position);
+        this.onOpen();
+    }
+    render() {
+        return h("slot", { key: 'f7f6f81dc2698b5d560503a984dcd47e377de0bc' });
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "position": ["validatePosition"],
+        "open": ["onOpen"]
+    }; }
+    static get style() { return stylesCss; }
+}, [1, "z-popover", {
+        "position": [513],
+        "open": [1540],
+        "bindTo": [1, "bind-to"],
+        "showArrow": [516, "show-arrow"],
+        "center": [516],
+        "closable": [4],
+        "currentPosition": [32]
+    }, [[8, "keyup", "closePopoverWithKeyboard"], [18, "click", "handleOutsideClick"]], {
+        "position": ["validatePosition"],
+        "open": ["onOpen"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-popover"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-popover":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZPopover);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { ZPopover as Z, defineCustomElement as d };
+//# sourceMappingURL=p-wdrm-LLt.js.map
+
+//# sourceMappingURL=p-wdrm-LLt.js.map