@zanichelli/albe-web-components 18.2.0-RC1 → 18.2.0

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

@@ -0,0 +1,199 @@
+import { Host, h } from "@stencil/core";
+import { KeyboardCode } from "../../../beans";
+export class ZTreeList {
+    constructor() {
+        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: 'a69d54dfd302656adc09278ac77cde23a7c1e69c', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: '780851098b592574ee55839e4a28d030d9bfa5b7', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
+    }
+    static get is() { return "z-tree-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeListItem[] | string",
+                    "resolved": "TreeListItem[] | string",
+                    "references": {
+                        "TreeListItem": {
+                            "location": "import",
+                            "path": "../../../beans",
+                            "id": "src/beans/index.tsx::TreeListItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Items to render, if they have the url property they will be rendered as clickable links"
+                },
+                "attribute": "items",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "htmlAriaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Used for aria-labelledby attribute, sets name in \"navigation\""
+                },
+                "attribute": "html-aria-labelledby",
+                "reflect": true
+            },
+            "htmlSectionTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Used for aria-label attribute, sets name in \"tree\""
+                },
+                "attribute": "html-section-title",
+                "reflect": true
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "treeItemClicked",
+                "name": "treeItemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on item click, it return the id, name and url of the clicked item"
+                },
+                "complexType": {
+                    "original": "{id: string; name: string; url: string}",
+                    "resolved": "{ id: string; name: string; url: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "watchItems"
+            }];
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/list/z-tree-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/list/z-tree-list/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, TreeListItem} from \"../../../beans\";\n\n@Component({\n  tag: \"z-tree-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTreeList {\n  @Element() host: HTMLZTreeListElement;\n\n  /** Items to render, if they have the url property they will be rendered as clickable links */\n  @Prop()\n  items: TreeListItem[] | string = [];\n\n  /** Used for aria-labelledby attribute, sets name in \"navigation\" */\n  @Prop({reflect: true})\n  htmlAriaLabelledby: string;\n\n  /** Used for aria-label attribute, sets name in \"tree\" */\n  @Prop({reflect: true})\n  htmlSectionTitle: string;\n\n  /** Emitted on item click, it return the id, name and url of the clicked item */\n  @Event()\n  treeItemClicked: EventEmitter<{id: string; name: string; url: string}>;\n\n  private parsedItems: TreeListItem[] = [];\n\n  private htmlTag: string;\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.parsedItems = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  private handleClick(item: TreeListItem): void {\n    this.treeItemClicked.emit({id: item.id, name: item.name, url: item.url});\n  }\n\n  private getFocusableElements(): HTMLElement[] {\n    return Array.from(this.host.shadowRoot.querySelectorAll('a[tabindex=\"0\"]'));\n  }\n\n  private getAncestor(element: HTMLElement, levels: number): HTMLElement | null {\n    let ancestor: HTMLElement | null = element;\n\n    for (let i = 0; i < levels; i++) {\n      ancestor = ancestor?.parentElement;\n      if (!ancestor) {\n        return;\n      }\n    }\n\n    return ancestor;\n  }\n\n  private handleArrowNav(event: KeyboardEvent): void {\n    if (event.code === KeyboardCode.TAB) {\n      event.preventDefault();\n\n      return;\n    }\n\n    const focusableElements = this.getFocusableElements();\n    const currentIndex = focusableElements.indexOf(event.target as HTMLElement);\n\n    if (currentIndex === -1) {\n      return;\n    }\n\n    if (event.code === KeyboardCode.ARROW_DOWN || event.code === KeyboardCode.ARROW_UP) {\n      event.preventDefault();\n\n      const nextIndex = currentIndex + (event.code === KeyboardCode.ARROW_DOWN ? 1 : -1);\n      if (nextIndex < 0 || nextIndex >= focusableElements.length) {\n        return;\n      }\n\n      focusableElements[nextIndex].focus();\n    }\n\n    if (event.code === KeyboardCode.ARROW_LEFT) {\n      event.preventDefault();\n      const ancestor = this.getAncestor(focusableElements[currentIndex], 4);\n\n      if (\n        !ancestor ||\n        !ancestor.children[0] ||\n        (ancestor.children[0].tagName.toLowerCase() !== \"a\" && ancestor.getAttribute(\"tabindex\") === null)\n      ) {\n        return;\n      }\n\n      (ancestor.children[0] as HTMLElement).focus();\n    }\n\n    if (event.code === KeyboardCode.ARROW_RIGHT) {\n      event.preventDefault();\n\n      const parentElm = (event.target as HTMLElement).closest(\"z-list-element\") as HTMLElement;\n\n      if (!parentElm) {\n        return;\n      }\n\n      const childrenContainer = parentElm.querySelector(\"z-list\") as HTMLElement;\n\n      if (!childrenContainer) {\n        return;\n      }\n\n      const firstChild = childrenContainer.querySelector('a[tabindex=\"0\"]') as HTMLElement;\n\n      if (!firstChild) {\n        return;\n      }\n\n      firstChild.focus();\n    }\n  }\n\n  private renderTreeList(item: TreeListItem, key: string, level = 1): HTMLZListElementElement {\n    this.htmlTag = item.url ? \"a\" : \"span\";\n\n    const treeListContent = (\n      <z-list-element\n        id={key}\n        class={!item.icon ? \"no-icon-elm\" : \"\"}\n        clickable={Boolean(item.url)}\n        hasTreeItems={true}\n        role=\"none\"\n        aria-hidden={undefined}\n      >\n        <this.htmlTag\n          class={{\n            \"list-element\": true,\n            \"z-link\": Boolean(item.url),\n            \"link-clickable\": Boolean(item.url),\n          }}\n          tabIndex={item.url ? 0 : -1}\n          onClick={() => this.handleClick(item)}\n          onKeyUp={(event: KeyboardEvent) => {\n            if (event.code === KeyboardCode.ENTER || event.code === KeyboardCode.SPACE) {\n              this.handleClick(item);\n            }\n          }}\n          onKeyDown={(event: KeyboardEvent) => this.handleArrowNav(event)}\n          role={item.url ? \"treeitem\" : undefined}\n          aria-hidden={item.url ? undefined : \"true\"}\n          aria-expanded={item.children?.length > 0 && true}\n          aria-level={level}\n          aria-label={item.name}\n          href={item.url}\n        >\n          <span class=\"item ellipsis\">\n            {item.icon && (\n              <z-icon\n                width={16}\n                height={16}\n                fill={item.url ? \"color-primary01\" : \"color-default-icon\"}\n                class=\"item-icon\"\n                name={item.icon}\n              />\n            )}\n            <span\n              class={{\n                \"item-label\": true,\n                \"no-icon-label\": !item.icon,\n                \"bold-item\": item.bold,\n              }}\n              title={item.name}\n            >\n              {item.name}\n            </span>\n          </span>\n        </this.htmlTag>\n        {item.children?.length > 0 && (\n          <z-list role=\"group\">\n            <div class=\"children-node\">\n              {item.children.map((child, key) => this.renderTreeList(child, `${key}`, level + 1))}\n            </div>\n          </z-list>\n        )}\n      </z-list-element>\n    );\n\n    return treeListContent;\n  }\n\n  render(): HTMLZTreeListElement {\n    const hasClickableItems = this.parsedItems.some((item) => !!item.url);\n\n    return (\n      <Host\n        class=\"tree-list\"\n        role={hasClickableItems ? \"navigation\" : \"none\"}\n        aria-hidden={hasClickableItems ? undefined : \"true\"}\n        aria-labelledby={this.htmlAriaLabelledby}\n      >\n        <div\n          tabIndex={-1}\n          role={hasClickableItems ? \"tree\" : \"none\"}\n          aria-hidden={hasClickableItems ? undefined : \"true\"}\n          aria-label={this.htmlSectionTitle}\n        >\n          {this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/list/z-tree-list/index.stories.js

@@ -0,0 +1,120 @@
+import { html } from "lit";
+import "./index";
+const sampleItems = [
+    {
+        name: "Parent 1",
+        icon: "folder",
+        children: [
+            {
+                name: "Child 1.1",
+                icon: "book",
+            },
+            {
+                name: "Child 1.2",
+                icon: "book",
+            },
+        ],
+    },
+    {
+        name: "Parent 2",
+        icon: "folder",
+        children: [
+            {
+                name: "Child 2.1",
+                icon: "book",
+            },
+        ],
+    },
+];
+const clickableItems = [
+    {
+        name: "Parent 1",
+        icon: "folder",
+        url: "#",
+        children: [
+            {
+                name: "Child 1.1",
+                icon: "book",
+                url: "#",
+            },
+            {
+                name: "Child 1.2",
+                icon: "book",
+                url: "#",
+            },
+        ],
+    },
+    {
+        name: "Parent 2",
+        icon: "folder",
+        url: "#",
+        children: [
+            {
+                name: "Child 2.1",
+                icon: "book",
+                url: "#",
+            },
+        ],
+    },
+];
+const boldItems = [
+    {
+        name: "Parent 1",
+        icon: "folder",
+        bold: true,
+        children: [
+            {
+                name: "Child 1.1",
+                icon: "book",
+            },
+            {
+                name: "Child 1.2",
+                icon: "book",
+            },
+        ],
+    },
+    {
+        name: "Parent 2",
+        icon: "folder",
+        bold: true,
+        children: [
+            {
+                name: "Child 2.1",
+                icon: "book",
+            },
+        ],
+    },
+];
+const StoryMeta = {
+    title: "ZList/ZTreeList",
+    component: "z-tree-list",
+    argTypes: {
+        items: { control: "object" },
+    },
+    args: {
+        items: sampleItems,
+    },
+};
+export default StoryMeta;
+const Template = (args) => {
+    return html `<z-tree-list items=${JSON.stringify(args.items)}></z-tree-list>`;
+};
+export const Base = {
+    args: {
+        items: sampleItems,
+    },
+    render: Template,
+};
+export const Bold = {
+    args: {
+        items: boldItems,
+    },
+    render: Template,
+};
+export const Clickable = {
+    args: {
+        items: clickableItems,
+    },
+    render: Template,
+};
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/list/z-tree-list/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/list/z-tree-list/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,IAAI,EAAC,MAAM,KAAK,CAAC;AACzC,OAAO,SAAS,CAAC;AAEjB,MAAM,WAAW,GAAG;IAClB;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;SACF;KACF;CACF,CAAC;AAEF,MAAM,cAAc,GAAG;IACrB;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,GAAG;QACR,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;gBACZ,GAAG,EAAE,GAAG;aACT;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;gBACZ,GAAG,EAAE,GAAG;aACT;SACF;KACF;IACD;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,GAAG;QACR,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;gBACZ,GAAG,EAAE,GAAG;aACT;SACF;KACF;CACF,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;SACF;KACF;IACD;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;aACb;SACF;KACF;CACF,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAC,OAAO,EAAE,QAAQ,EAAC;KAC3B;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;KACnB;CACa,CAAC;AAEjB,eAAe,SAAS,CAAC;AAEzB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAkB,EAAE;IACxC,OAAO,IAAI,CAAA,sBAAsB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC;AAC/E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAa;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;KACnB;IACD,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAa;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;KACjB;IACD,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAa;IACjC,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc;KACtB;IACD,MAAM,EAAE,QAAQ;CACjB,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {TemplateResult, html} from \"lit\";\nimport \"./index\";\n\nconst sampleItems = [\n  {\n    name: \"Parent 1\",\n    icon: \"folder\",\n    children: [\n      {\n        name: \"Child 1.1\",\n        icon: \"book\",\n      },\n      {\n        name: \"Child 1.2\",\n        icon: \"book\",\n      },\n    ],\n  },\n  {\n    name: \"Parent 2\",\n    icon: \"folder\",\n    children: [\n      {\n        name: \"Child 2.1\",\n        icon: \"book\",\n      },\n    ],\n  },\n];\n\nconst clickableItems = [\n  {\n    name: \"Parent 1\",\n    icon: \"folder\",\n    url: \"#\",\n    children: [\n      {\n        name: \"Child 1.1\",\n        icon: \"book\",\n        url: \"#\",\n      },\n      {\n        name: \"Child 1.2\",\n        icon: \"book\",\n        url: \"#\",\n      },\n    ],\n  },\n  {\n    name: \"Parent 2\",\n    icon: \"folder\",\n    url: \"#\",\n    children: [\n      {\n        name: \"Child 2.1\",\n        icon: \"book\",\n        url: \"#\",\n      },\n    ],\n  },\n];\n\nconst boldItems = [\n  {\n    name: \"Parent 1\",\n    icon: \"folder\",\n    bold: true,\n    children: [\n      {\n        name: \"Child 1.1\",\n        icon: \"book\",\n      },\n      {\n        name: \"Child 1.2\",\n        icon: \"book\",\n      },\n    ],\n  },\n  {\n    name: \"Parent 2\",\n    icon: \"folder\",\n    bold: true,\n    children: [\n      {\n        name: \"Child 2.1\",\n        icon: \"book\",\n      },\n    ],\n  },\n];\n\nconst StoryMeta = {\n  title: \"ZList/ZTreeList\",\n  component: \"z-tree-list\",\n  argTypes: {\n    items: {control: \"object\"},\n  },\n  args: {\n    items: sampleItems,\n  },\n} satisfies Meta;\n\nexport default StoryMeta;\n\nconst Template = (args): TemplateResult => {\n  return html`<z-tree-list items=${JSON.stringify(args.items)}></z-tree-list>`;\n};\n\nexport const Base: StoryObj = {\n  args: {\n    items: sampleItems,\n  },\n  render: Template,\n};\n\nexport const Bold: StoryObj = {\n  args: {\n    items: boldItems,\n  },\n  render: Template,\n};\n\nexport const Clickable: StoryObj = {\n  args: {\n    items: clickableItems,\n  },\n  render: Template,\n};\n"]}

package/dist/collection/components/list/z-tree-list/styles.css

@@ -0,0 +1,142 @@
+: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);
+  }
+}

package/dist/collection/components/table/cells/z-td/index.js

@@ -29,7 +29,7 @@ export class ZTd {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '62da2e2ff59095eed2e2d9fa62cfecc371ee091c', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: '4feece4471859c28bad82efc66e3e272a714814e', class: "cell--content" }, h("slot", { key: '8e1907d6cbdc3a4f67c58f020adc92607eb054a0' }), this.showMenu && (h("div", { key: 'de58da09bc31daf6494be8422bdc7addaebcfc43', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'ff18111bf4942839c0b6b79e7333fcb134d9b79a', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '0ce86c3f81f2384a02003cbafda2a814b6d9e73a', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '00931199a470f98c2bb2e32fc5341989fe5238aa', name: "contextual-menu" })))))));
+        return (h(Host, { key: '9c7d03779f5c51ed26cd794d62f6fe489afa557c', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: '71494ed002d042d686248cc9382e6b8f98ec4f18', class: "cell--content" }, h("slot", { key: 'd4d89e6814b00e5e120468727205cff474201d00' }), this.showMenu && (h("div", { key: '60a3e28f42528ea07f9fed652f645397f949d197', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '5bc9cfaa9f5215eb4068a6243c80131a1ea8b5c3', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: 'f9d6370971330f8fe989a59c5adeaecfa9d66180', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '7e14e87932afb69dc68ffa04a874981770368c5e', name: "contextual-menu" })))))));
     }
     static get is() { return "z-td"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/cells/z-th/index.js

@@ -50,7 +50,7 @@ export class ZTh {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: 'c2e95b78edf95ed99c3525375980189a1a128106', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: '38d6c8f9e3acc9b8bcc97501479361eae3c85f52', class: "cell--content" }, h("slot", { key: 'b8594f3aa2e863d7aa4fcd0d86dce6f756e79dc1' }), this.showSorting && (h("button", { key: '1f236dc2b9eabfbd7f8d48240ea459c495468c28', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '136552edd38529b090be67649f5cc34791a86e4b', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '70d8ebf7c5f1810a0787c004ecc09d9ebe8ac5e8', class: "cell--menu-container" }, h("z-button", { key: 'ae13ca15faf29ec53f01b2a0b49c2695623ed7b1', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: '451a61903e29a99aeb74de7b36729b7acb689e15', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'dc6b3863a4f1e5b22bdbe106be954c87c68dac93', name: "contextual-menu" })))))));
+        return (h(Host, { key: 'e8bf215c5bdf5c0486d0de3768919d54a94b8b46', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'e7dfc68ddaeac9f1f763eb62e2717ea5e166df16', class: "cell--content" }, h("slot", { key: '96edba7522e8e43bcfecea9d305ffc9840548020' }), this.showSorting && (h("button", { key: '81cef37216c2c823b1027df224ddb905d3c9d412', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: 'b00db383bf202b9f774781551a6e59329fed10b2', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '2762feca4feeff61aa673d2a3535f91c9ee7db03', class: "cell--menu-container" }, h("z-button", { key: 'e91a00179db0075255b57d5f946e3c321883faf6', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { key: 'c632eb1071f2533aa86251e8e345eda845512693', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'bc3aa447b61972c3299352d49f27c9a060a2ce4d', name: "contextual-menu" })))))));
     }
     static get is() { return "z-th"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-table/index.js

@@ -36,7 +36,7 @@ export class ZTable {
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '2bb52e3fc888013ff58b5f47d365b321857c9151', expandable: this.expandable }, h("div", { key: 'dbeadb1c170166590a3409fd2c8a9187ef1dad8e', class: "table", role: "table" }, h("slot", { key: 'eabc792f58c1653315c31d84a5611b940c4ee0ae' }))));
+        return (h(Host, { key: '18f6152b1942c333fb95a9f7e7a23715bf27675d', expandable: this.expandable }, h("div", { key: 'fc7084c01d72828d9d2d8a565a1498a111504992', class: "table", role: "table" }, h("slot", { key: '78d5bf7370f5497868f2277e29d9ad8191123c5e' }))));
     }
     static get is() { return "z-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tbody/index.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ZTbody {
     render() {
-        return (h(Host, { key: 'be28c87b33bf92cfb4881c23d9c35516b80dc14d', role: "rowgroup" }, h("slot", { key: 'dc99f0e26b8338d0882d7a2ef4ab8703b294b6c6' })));
+        return (h(Host, { key: 'b489d32d81a796eafef0fa82f9bb24c53db9e7f7', role: "rowgroup" }, h("slot", { key: '89b11f845de05e0a40dc0180fa45a23c2fd281c7' })));
     }
     static get is() { return "z-tbody"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tfoot/index.js

@@ -8,7 +8,7 @@ export class ZTfoot {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: '55e54fcb261d7c4f9834f0e2c8870c4b723177c5', role: "rowgroup" }, h("slot", { key: 'a5c476a478ae821b85d70ab6b79f16bf0d96dcbe' })));
+        return (h(Host, { key: '441a3e0656da274193c4a12681b9e9d641690982', role: "rowgroup" }, h("slot", { key: '5e80207cbf1238b2141fcd657cb10fc18be7bccb' })));
     }
     static get is() { return "z-tfoot"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-thead/index.js

@@ -8,7 +8,7 @@ export class ZThead {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: '8422b1bac73aecf43290f11794fea07e13c953c1', role: "rowgroup" }, h("slot", { key: '1738b80a1970b980f18ecb3bbed74415b5f8b009' })));
+        return (h(Host, { key: '96a3a467d89c4de659693e31c46f8aee89497140', role: "rowgroup" }, h("slot", { key: 'd1af4ab3b7b484f5de8b16a9d4a74e93ae65ee60' })));
     }
     static get is() { return "z-thead"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tr/index.js

@@ -43,7 +43,7 @@ export class ZTr {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: 'd2576e0a5f2b45e91ca7b00038c2e9fa981af3ec', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: 'afe9257fd987b55938ce873d6f5b31129d471857', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '72d42882c3d1e1c1ad45819afce93a3bc76f7413', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'a3f5fa4753b9b654ff3edf17d52b273b80d20a34', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'b3ac438bb68da8d038616ce41a70beabd1d31139', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: '5ce42271810a5e186701cef65ba6d0e4b7f044fe', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: 'e699c444b5d3f21e5468e895a1b4f39829077cc9', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '9f4dee6f1fd647c40fe3612ed52ccff4f8231778', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '572c95ff115f9c00c07a2e84130020e2f03031c5', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '97c0be024dde1cf6e218ddaaef53a2b4ca723d37', onSlotchange: this.updateColumns.bind(this) })));
     }
     static get is() { return "z-tr"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-accordion/index.js

@@ -47,7 +47,7 @@ export class ZAccordion {
         this.toggled.emit(this.open);
     }
     render() {
-        return (h("details", { key: 'd1318774dc57fc255b5b12a0370e47bb5fdbca31', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: 'fd895d877d016eb2b8024dbe9230033d3fec3532', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '85c12e219895050623788822f080f6b4389dab64', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '4b2e6d5e241f464ba9e38797ace01f5e233b040a', class: "z-accordion-label" }, this.label), h("span", { key: '048c71dcc1a4dc1ad87e5b6d3d48c1725dc21844', class: "z-accordion-tags" }, h("slot", { key: '15655230f848df138b22260344078d5de885b3d8', name: "tag" })), h("z-icon", { key: '72abc36244ec43949db45a453b45f33b1f7d37a4', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '7bd1d01b388515b177992086d34466473e594e4d', class: "z-accordion-content", part: "content" }, h("slot", { key: '98f86ed93a3f3056047794ff6e4c12dfc44aec3f' })))));
+        return (h("details", { key: 'f80c216aa80312c7e7d0d1a2e6455e111d056c03', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '3076d9672b211e3cec6911aa32daa90a66097f6f', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '3f371f4256ef04736a5c76d82f3a33510ea0f6fe', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '8199a59843cbb1886b66136f2a24c31f785599d9', class: "z-accordion-label" }, this.label), h("span", { key: '0dbc1cfadcb621ded4c5cd3221eb71896947d312', class: "z-accordion-tags" }, h("slot", { key: '505459b0e6445e2b66123d3e2e44d8ddeb9c40cb', name: "tag" })), h("z-icon", { key: 'b9f917868715376dbd71f94f0604616070940daa', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '9e0682e6b49dadc028e720cfb6565d87e082d15a', class: "z-accordion-content", part: "content" }, h("slot", { key: 'd09024cbcf07bd1a54f1095a96a6519cebfc91eb' })))));
     }
     static get is() { return "z-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-anchor-navigation/index.js

@@ -49,7 +49,7 @@ export class ZAnchorNavigation {
         window.removeEventListener("hashchange", this.setCurrent);
     }
     render() {
-        return (h(Host, { key: 'd31a1987cf0536321a859a314760b1a4a906c843', collapsed: this.collapsed }, h("z-button", { key: 'cc7b52c84f5f4dfbd15aff76bd35048e23ecb2c6', class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { key: 'ac446bf4092ba524a5786c182ea3a740d7159c64', ref: (el) => (this.nav = el) }, h("slot", { key: '265daef0a3610cef591d90e0a16df64b666d2c75' }))));
+        return (h(Host, { key: '9822a919e14a9643ce66da7d4e24c8cc3e2f62af', collapsed: this.collapsed }, h("z-button", { key: '3996cbb3c1e449c1bd28b7e31b0a4de1b0863b7f', class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { key: '569d34c11dc979a00e89f75fb3ad3f830ff64982', ref: (el) => (this.nav = el) }, h("slot", { key: 'a23248eaf941da66c5160e335eb1e6acb286fe80' }))));
     }
     static get is() { return "z-anchor-navigation"; }
     static get originalStyleUrls() {

package/dist/collection/components/z-app-header/index.js

@@ -256,7 +256,7 @@ export class ZAppHeader {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: 'c581eb6ba90e0ba820f2585757909b4e31e0d26f', "menu-length": this.menuLength }, h("div", { key: '0784330861f875d530a886ace7e1b6b535790187', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '3bb4a709956fdcd9871f85d74fa309a76d6e43ce', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '836c12142e78e7fe2b85022f35d2f8910a0bad75', class: "top-subtitle" }, h("slot", { key: '54891726347880ae252f2168223273ab0cad1a46', name: "top-subtitle" }))), h("div", { key: '81333471f5210087d44457a1fd44b483dfb2a57f', class: "heading-title" }, this.renderMenuButton(), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: '68d0b7682f4de8827b0a52988167f0be2ac21d19', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '388c1487fc487b57485209f128531e142db91f0e', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '9fd0390674dafc1c28cd1ab40d35beb82e06f2b5', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '47e56e491971f4b7c03458e4117878e356294baa', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: '451b6acd7b53a5f3cae55dc7c0004b22ade0aa41', "menu-length": this.menuLength }, h("div", { key: 'e97dc023c06d7c1eada472e98e744f47f5633b36', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '1aa75f7514bafc871755fa69995dfb459f6380a1', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '0d6db048a85956f68e906658d6302003cb9b2c48', class: "top-subtitle" }, h("slot", { key: '5cb024fd28e76d7152a7e6c77f983ecbfdfbb415', name: "top-subtitle" }))), h("div", { key: '595a01015699c9457b6358fbade05c511b41e601', class: "heading-title" }, this.renderMenuButton(), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: '5ddfea601bbbed4fa9f8471d609f9eaf64ad1311', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '7971c0a2e1d014a62675fbddb2e712b19c6dc79f', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: 'ffd0f44061f20897bba3ae34a3d3e26bde993206', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '2ddbfb789b028464ae5583c6f592f1be629bbb73', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     static get is() { return "z-app-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-aria-alert/index.js

@@ -5,7 +5,7 @@ export class ZAriaAlert {
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: 'dba84aee69431be780e76cab58cb3aef34d0d22e', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: 'fdb6f5f6f4ef2f424a589b44ab97db436928141b' })));
+        return (h(Host, { key: 'b96543cd05e1193c3a29f08cd69955c1d1c1ea16', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '60b6386226385a2b10d51723b7b8715215f6ebbf' })));
     }
     static get is() { return "z-aria-alert"; }
     static get properties() {

package/dist/collection/components/z-avatar/index.js

@@ -24,10 +24,10 @@ export class ZAvatar {
         }
     }
     render() {
-        return (h(Host, { key: '688337d77c969d1bd766c9c49229b02f72188132', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (h(Host, { key: 'e0add69dac51838abc394ce3f3b631ab07d15435', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
                 color: `var(--${this.textColor})`,
                 backgroundColor: `var(--${this.backgroundColor})`,
-            } }, this.text && !this.image && h("span", { key: 'b3a2ec4a0f2cade4ab74d6a03e02d9c1382ed7c7' }, this.text.substring(0, 2)), this.image && (h("img", { key: '9b68953eebce40ec9f423d3c30f85e4fe665882b', src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && h("span", { key: '4ee1d5f0c7f25ee0491d9c05ed5990a4fff368fd' }, this.text.substring(0, 2)), this.image && (h("img", { key: '9e49a43d942830fecee2f60a6521d3b908455893', src: this.image, onError: () => (this.image = "") }))));
     }
     static get is() { return "z-avatar"; }
     static get encapsulation() { return "shadow"; }