@zanichelli/albe-web-components 12.4.0 → 12.4.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-anchor-navigation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,iBAAiB;;8BAMX,KAAK;yBAMV,KAAK;;IAKjB;;OAEG;IACK,cAAc;QACpB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC7C,MAAM,MAAM,GAAG,IAAI,YAAY,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAClF,MAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,CAAC;YACvD,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC1D,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IACnC,CAAC;IAED,gBAAgB;QACd,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAChE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,SAAS,EAAE,IAAI,CAAC,SAAS;YAC7B,iEACE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EACpD,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,cAG/B;YACX,4DAAK,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;gBAC/B,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant} from \"../../beans\";\n\n/**\n * * Anchor navigation component.\n * @slot Main slot. Put some `<a>` tags inside. If you need an action button/icon, wrap it and the <a> inside another tag.\n * @example\n * ```\n * <z-anchor-navigation>\n *  <div>\n *    <a href=\"#section-id\">Section name</a>\n *    <button type=\"button\">\n *      <z-icon name=\"share\" />\n *    </button>\n *  </div>\n * </z-anchor-navigation>\n * ```\n */\n@Component({\n  tag: \"z-anchor-navigation\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n})\nexport class ZAnchorNavigation {\n  /**\n   * If enabled, the text of each anchor will be hidden unless\n   * for the current one or the one the user is hovering.\n   */\n  @Prop({reflect: true})\n  hideUnselected = false;\n\n  /**\n   * Whether the mobile list is collapsed.\n   */\n  @State()\n  collapsed = false;\n\n  /** Reference to the nav element. */\n  private nav: HTMLElement;\n\n  /**\n   * Set aria-current attribute to the anchors and `current` to nav children.\n   */\n  private setAriaCurrent(): void {\n    Array.from(this.nav.children).forEach((item) => {\n      const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n      const isCurrent = window.location.href === anchor.href;\n      anchor.setAttribute(\"aria-current\", isCurrent.toString());\n      item.toggleAttribute(\"current\", isCurrent);\n    });\n  }\n\n  /**\n   * Toggle collapsed state.\n   */\n  private toggleCollapsed(): void {\n    this.collapsed = !this.collapsed;\n  }\n\n  componentDidLoad(): void {\n    window.addEventListener(\"hashchange\", this.setAriaCurrent.bind(this));\n    this.setAriaCurrent();\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"hashchange\", this.setAriaCurrent);\n  }\n\n  render(): HTMLZAnchorNavigationElement {\n    return (\n      <Host collapsed={this.collapsed}>\n        <z-button\n          class=\"toggle\"\n          variant={ButtonVariant.SECONDARY}\n          icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n          onClick={this.toggleCollapsed.bind(this)}\n        >\n          salta a\n        </z-button>\n        <nav ref={(el) => (this.nav = el)}>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,39 +1,40 @@
 import { h, Host } from "@stencil/core";
 import { ZAriaAlertMode } from "../../beans";
 export class ZAriaAlert {
-  constructor() {
-    /** Aria live mode */
-    this.mode = ZAriaAlertMode.POLITE;
-  }
-  render() {
-    return (h(Host, { "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", null)));
-  }
-  static get is() { return "z-aria-alert"; }
-  static get properties() {
-    return {
-      "mode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ZAriaAlertMode",
-          "resolved": "ZAriaAlertMode.ASSERTIVE | ZAriaAlertMode.POLITE",
-          "references": {
-            "ZAriaAlertMode": {
-              "location": "import",
-              "path": "../../beans"
+    constructor() {
+        this.mode = ZAriaAlertMode.POLITE;
+    }
+    render() {
+        return (h(Host, { key: 'a3275876421862b2b2c80c044ca50f50464cfd55', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '3767d930ccea80abbd79b4f3ee6d1733df29b934' })));
+    }
+    static get is() { return "z-aria-alert"; }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ZAriaAlertMode",
+                    "resolved": "ZAriaAlertMode.ASSERTIVE | ZAriaAlertMode.POLITE",
+                    "references": {
+                        "ZAriaAlertMode": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::ZAriaAlertMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria live mode"
+                },
+                "attribute": "mode",
+                "reflect": false,
+                "defaultValue": "ZAriaAlertMode.POLITE"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Aria live mode"
-        },
-        "attribute": "mode",
-        "reflect": false,
-        "defaultValue": "ZAriaAlertMode.POLITE"
-      }
-    };
-  }
+        };
+    }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-aria-alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAM3C,MAAM,OAAO,UAAU;;oBAGE,cAAc,CAAC,MAAM;;IAE5C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,kEACQ,IAAI,CAAC,IAAI,iBACR,MAAM,mBACJ,WAAW;YAEzB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, Host} from \"@stencil/core\";\nimport {ZAriaAlertMode} from \"../../beans\";\n\n@Component({\n  tag: \"z-aria-alert\",\n  shadow: false,\n})\nexport class ZAriaAlert {\n  /** Aria live mode */\n  @Prop()\n  mode: ZAriaAlertMode = ZAriaAlertMode.POLITE;\n\n  render(): HTMLZAriaAlertElement {\n    return (\n      <Host\n        aria-live={this.mode}\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,14 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ZAriaAlert } from "./index";
+describe("Suite test ZAriaAlert", () => {
+    it("Test render ZAriaAlert", async () => {
+        const page = await newSpecPage({
+            components: [ZAriaAlert],
+            html: `<z-aria-alert>testo</z-aria-alert>`,
+        });
+        expect(page.root).toEqualHtml(`<z-aria-alert aria-atomic="true" aria-live="polite" aria-relevant="additions">
+         testo
+       </z-aria-alert>`);
+    });
+});
+//# sourceMappingURL=index.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../src/components/z-aria-alert/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AAEnC,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;QACtC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,oCAAoC;SAC3C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAC3B;;uBAEiB,CAClB,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZAriaAlert} from \"./index\";\n\ndescribe(\"Suite test ZAriaAlert\", () => {\n  it(\"Test render ZAriaAlert\", async () => {\n    const page = await newSpecPage({\n      components: [ZAriaAlert],\n      html: `<z-aria-alert>testo</z-aria-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(\n      `<z-aria-alert aria-atomic=\"true\" aria-live=\"polite\" aria-relevant=\"additions\">\n         testo\n       </z-aria-alert>`\n    );\n  });\n});\n"]}

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

@@ -1,142 +1,143 @@
 import { h, Host } from "@stencil/core";
 import { AvatarSize } from "../../beans";
 export class ZAvatar {
-  constructor() {
-    var _a, _b;
-    /** [optional] Avatar size */
-    this.size = AvatarSize.MEDIUM;
-    /** [optional] Avatar text color */
-    this.textColor = "color-white";
-    /** [optional] Avatar background color */
-    this.backgroundColor = "gray700";
-    if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.length) === 0 && ((_b = this.image) === null || _b === void 0 ? void 0 : _b.length) === 0) {
-      console.warn("z-avatar must contain at least one prop between text and image");
+    constructor() {
+        var _a, _b;
+        this.size = AvatarSize.MEDIUM;
+        this.text = undefined;
+        this.textColor = "color-white";
+        this.backgroundColor = "gray700";
+        this.image = undefined;
+        if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.length) === 0 && ((_b = this.image) === null || _b === void 0 ? void 0 : _b.length) === 0) {
+            console.warn("z-avatar must contain at least one prop between text and image");
+        }
     }
-  }
-  getTextSize() {
-    if (this.size === AvatarSize.SMALL) {
-      return "5";
+    getTextSize() {
+        if (this.size === AvatarSize.SMALL) {
+            return "5";
+        }
+        else if (this.size === AvatarSize.MEDIUM) {
+            return "4";
+        }
+        else if (this.size === AvatarSize.LARGE) {
+            return "2";
+        }
     }
-    else if (this.size === AvatarSize.MEDIUM) {
-      return "4";
+    render() {
+        return (h(Host, { key: 'de60cf77cb859ea6ba50222aa625dc9e35e1cf08', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+                color: `var(--${this.textColor})`,
+                backgroundColor: `var(--${this.backgroundColor})`,
+            } }, this.text && !this.image && h("span", null, this.text.substring(0, 2)), this.image && (h("img", { src: this.image, onError: () => (this.image = "") }))));
     }
-    else if (this.size === AvatarSize.LARGE) {
-      return "2";
+    static get is() { return "z-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
     }
-  }
-  render() {
-    return (h(Host, { class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
-        color: `var(--${this.textColor})`,
-        backgroundColor: `var(--${this.backgroundColor})`,
-      } }, this.text && !this.image && h("span", null, this.text.substring(0, 2)), this.image && (h("img", { src: this.image, onError: () => (this.image = "") }))));
-  }
-  static get is() { return "z-avatar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "AvatarSize",
-          "resolved": "AvatarSize.LARGE | AvatarSize.MEDIUM | AvatarSize.SMALL",
-          "references": {
-            "AvatarSize": {
-              "location": "import",
-              "path": "../../beans"
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarSize",
+                    "resolved": "AvatarSize.LARGE | AvatarSize.MEDIUM | AvatarSize.SMALL",
+                    "references": {
+                        "AvatarSize": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::AvatarSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Avatar size"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "AvatarSize.MEDIUM"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Avatar text"
+                },
+                "attribute": "text",
+                "reflect": false
+            },
+            "textColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Avatar text color"
+                },
+                "attribute": "text-color",
+                "reflect": false,
+                "defaultValue": "\"color-white\""
+            },
+            "backgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Avatar background color"
+                },
+                "attribute": "background-color",
+                "reflect": false,
+                "defaultValue": "\"gray700\""
+            },
+            "image": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "[optional] Avatar image"
+                },
+                "attribute": "image",
+                "reflect": false
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Avatar size"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "AvatarSize.MEDIUM"
-      },
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Avatar text"
-        },
-        "attribute": "text",
-        "reflect": false
-      },
-      "textColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Avatar text color"
-        },
-        "attribute": "text-color",
-        "reflect": false,
-        "defaultValue": "\"color-white\""
-      },
-      "backgroundColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Avatar background color"
-        },
-        "attribute": "background-color",
-        "reflect": false,
-        "defaultValue": "\"gray700\""
-      },
-      "image": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Avatar image"
-        },
-        "attribute": "image",
-        "reflect": false
-      }
-    };
-  }
+        };
+    }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,UAAU,EAAC,MAAM,aAAa,CAAC;AAOvC,MAAM,OAAO,OAAO;IAqBlB;;oBAlBoB,UAAU,CAAC,MAAM;;yBAQhB,aAAa;+BAIP,SAAS;;QAOlC,IAAI,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,MAAK,CAAC,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,MAAK,CAAC,EAAE,CAAC;YACxD,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAC;QACjF,CAAC;KACF;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE,CAAC;YACnC,OAAO,GAAG,CAAC;QACb,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM,EAAE,CAAC;YAC3C,OAAO,GAAG,CAAC;QACb,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE,CAAC;YAC1C,OAAO,GAAG,CAAC;QACb,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,QAAQ,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,IAAI,EAAC,EACnE,KAAK,EAAE;gBACL,KAAK,EAAE,SAAS,IAAI,CAAC,SAAS,GAAG;gBACjC,eAAe,EAAE,SAAS,IAAI,CAAC,eAAe,GAAG;aAClD;YAEA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,gBAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAQ;YACpE,IAAI,CAAC,KAAK,IAAI,CACb,WACE,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAChC,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, Host} from \"@stencil/core\";\nimport {AvatarSize} from \"../../beans\";\n\n@Component({\n  tag: \"z-avatar\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAvatar {\n  /** [optional] Avatar size */\n  @Prop()\n  size?: AvatarSize = AvatarSize.MEDIUM;\n\n  /** [optional] Avatar text */\n  @Prop()\n  text?: string;\n\n  /** [optional] Avatar text color */\n  @Prop()\n  textColor?: string = \"color-white\";\n\n  /** [optional] Avatar background color */\n  @Prop()\n  backgroundColor?: string = \"gray700\";\n\n  /** [optional] Avatar image */\n  @Prop({mutable: true})\n  image?: string;\n\n  constructor() {\n    if (this.text?.length === 0 && this.image?.length === 0) {\n      console.warn(\"z-avatar must contain at least one prop between text and image\");\n    }\n  }\n\n  private getTextSize(): string {\n    if (this.size === AvatarSize.SMALL) {\n      return \"5\";\n    } else if (this.size === AvatarSize.MEDIUM) {\n      return \"4\";\n    } else if (this.size === AvatarSize.LARGE) {\n      return \"2\";\n    }\n  }\n\n  render(): HTMLZAvatarElement {\n    return (\n      <Host\n        class={{[this.size]: true, [`body-${this.getTextSize()}-sb`]: true}}\n        style={{\n          color: `var(--${this.textColor})`,\n          backgroundColor: `var(--${this.backgroundColor})`,\n        }}\n      >\n        {this.text && !this.image && <span>{this.text.substring(0, 2)}</span>}\n        {this.image && (\n          <img\n            src={this.image}\n            onError={() => (this.image = \"\")}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,98 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ZAvatar } from "./index";
+describe("Suite test ZAvatar", () => {
+    it("Test render ZAvatar default", async () => {
+        const page = await newSpecPage({
+            components: [ZAvatar],
+            html: `<z-avatar></z-avatar>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-avatar class="body-4-sb medium" style="color: var(--color-white); background-color: var(--gray700)">
+        <mock:shadow-root></mock:shadow-root>
+      </z-avatar>
+    `);
+    });
+    it("Test render ZAvatar size prop", async () => {
+        const page = await newSpecPage({
+            components: [ZAvatar],
+            html: `<z-avatar size="small"></z-avatar>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-avatar class="body-5-sb small" style="color: var(--color-white); background-color: var(--gray700)" size="small">
+        <mock:shadow-root></mock:shadow-root>
+      </z-avatar>
+    `);
+    });
+    it("Test render ZAvatar text prop", async () => {
+        const page = await newSpecPage({
+            components: [ZAvatar],
+            html: `<z-avatar text="ABCDE"></z-avatar>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-avatar class="body-4-sb medium" style="color: var(--color-white); background-color: var(--gray700)" text="ABCDE">
+        <mock:shadow-root>
+          <span>
+            AB
+          </span>
+        </mock:shadow-root>
+      </z-avatar>
+    `);
+    });
+    it("Test render ZAvatar text-color prop", async () => {
+        const page = await newSpecPage({
+            components: [ZAvatar],
+            html: `<z-avatar text="ABCDE" text-color="blue500" size="small"></z-avatar>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-avatar
+        class="body-5-sb small"
+        style="color: var(--blue500); background-color: var(--gray700)"
+        text-color="blue500"
+        text="ABCDE"
+        size="small">
+          <mock:shadow-root>
+            <span>
+              AB
+            </span>
+          </mock:shadow-root>
+      </z-avatar>
+    `);
+    });
+    it("Test render ZAvatar background-color prop", async () => {
+        const page = await newSpecPage({
+            components: [ZAvatar],
+            html: `<z-avatar text="ABCDE" background-color="blue500" size="large"></z-avatar>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-avatar
+      class="body-2-sb large"
+        style="color: var(--color-white); background-color: var(--blue500)"
+        background-color="blue500"
+        text="ABCDE"
+        size="large">
+          <mock:shadow-root>
+            <span>
+              AB
+            </span>
+          </mock:shadow-root>
+      </z-avatar>
+    `);
+    });
+    it("Test render ZAvatar image prop", async () => {
+        const page = await newSpecPage({
+            components: [ZAvatar],
+            html: `<z-avatar image="https://cdn.eso.org/images/thumb700x/eso1907a.jpg"></z-avatar>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-avatar
+        class="body-4-sb medium"
+        style="color: var(--color-white); background-color: var(--gray700)"
+        image="https://cdn.eso.org/images/thumb700x/eso1907a.jpg">
+          <mock:shadow-root>
+            <img src="https://cdn.eso.org/images/thumb700x/eso1907a.jpg">
+          </mock:shadow-root>
+      </z-avatar>
+    `);
+    });
+});
+//# sourceMappingURL=index.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../src/components/z-avatar/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,OAAO,EAAC,MAAM,SAAS,CAAC;AAEhC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,uBAAuB;SAC9B,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,oCAAoC;SAC3C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;KAI7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,oCAAoC;SAC3C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,sEAAsE;SAC7E,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,4EAA4E;SACnF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,iFAAiF;SACxF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZAvatar} from \"./index\";\n\ndescribe(\"Suite test ZAvatar\", () => {\n  it(\"Test render ZAvatar default\", async () => {\n    const page = await newSpecPage({\n      components: [ZAvatar],\n      html: `<z-avatar></z-avatar>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-avatar class=\"body-4-sb medium\" style=\"color: var(--color-white); background-color: var(--gray700)\">\n        <mock:shadow-root></mock:shadow-root>\n      </z-avatar>\n    `);\n  });\n\n  it(\"Test render ZAvatar size prop\", async () => {\n    const page = await newSpecPage({\n      components: [ZAvatar],\n      html: `<z-avatar size=\"small\"></z-avatar>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-avatar class=\"body-5-sb small\" style=\"color: var(--color-white); background-color: var(--gray700)\" size=\"small\">\n        <mock:shadow-root></mock:shadow-root>\n      </z-avatar>\n    `);\n  });\n\n  it(\"Test render ZAvatar text prop\", async () => {\n    const page = await newSpecPage({\n      components: [ZAvatar],\n      html: `<z-avatar text=\"ABCDE\"></z-avatar>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-avatar class=\"body-4-sb medium\" style=\"color: var(--color-white); background-color: var(--gray700)\" text=\"ABCDE\">\n        <mock:shadow-root>\n          <span>\n            AB\n          </span>\n        </mock:shadow-root>\n      </z-avatar>\n    `);\n  });\n\n  it(\"Test render ZAvatar text-color prop\", async () => {\n    const page = await newSpecPage({\n      components: [ZAvatar],\n      html: `<z-avatar text=\"ABCDE\" text-color=\"blue500\" size=\"small\"></z-avatar>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-avatar\n        class=\"body-5-sb small\"\n        style=\"color: var(--blue500); background-color: var(--gray700)\"\n        text-color=\"blue500\"\n        text=\"ABCDE\"\n        size=\"small\">\n          <mock:shadow-root>\n            <span>\n              AB\n            </span>\n          </mock:shadow-root>\n      </z-avatar>\n    `);\n  });\n\n  it(\"Test render ZAvatar background-color prop\", async () => {\n    const page = await newSpecPage({\n      components: [ZAvatar],\n      html: `<z-avatar text=\"ABCDE\" background-color=\"blue500\" size=\"large\"></z-avatar>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-avatar\n      class=\"body-2-sb large\"\n        style=\"color: var(--color-white); background-color: var(--blue500)\"\n        background-color=\"blue500\"\n        text=\"ABCDE\"\n        size=\"large\">\n          <mock:shadow-root>\n            <span>\n              AB\n            </span>\n          </mock:shadow-root>\n      </z-avatar>\n    `);\n  });\n\n  it(\"Test render ZAvatar image prop\", async () => {\n    const page = await newSpecPage({\n      components: [ZAvatar],\n      html: `<z-avatar image=\"https://cdn.eso.org/images/thumb700x/eso1907a.jpg\"></z-avatar>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-avatar\n        class=\"body-4-sb medium\"\n        style=\"color: var(--color-white); background-color: var(--gray700)\"\n        image=\"https://cdn.eso.org/images/thumb700x/eso1907a.jpg\">\n          <mock:shadow-root>\n            <img src=\"https://cdn.eso.org/images/thumb700x/eso1907a.jpg\">\n          </mock:shadow-root>\n      </z-avatar>\n    `);\n  });\n});\n"]}