@zanichelli/albe-web-components 2.31.0 → 2.31.1

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

@@ -1,137 +1,137 @@
-import { Component, Prop, h, Host } from "@stencil/core";
-import { AvatarSize } from "../../beans";
-export class ZAvatar {
-  constructor() {
-    /** [optional] Avatar size */
-    this.size = AvatarSize.medium;
-    /** [optional] Avatar text color */
-    this.textColor = "text-white";
-    /** [optional] Avatar background color */
-    this.backgroundColor = "bg-grey-700";
-    if (!this.text && !this.image) {
-      console.warn("z-avatar must contain at least one prop between text and image");
-    }
-  }
-  getTextSize() {
-    if (this.size === AvatarSize.small) {
-      return "5";
-    }
-    else if (this.size === AvatarSize.medium) {
-      return "4";
-    }
-    else if (this.size === AvatarSize.large) {
-      return "2";
-    }
-  }
-  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"
-          }
-        }
-      },
-      "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": "\"text-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": "\"bg-grey-700\""
-    },
-    "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
-    }
-  }; }
-}
+import { Component, Prop, h, Host } from "@stencil/core";
+import { AvatarSize } from "../../beans";
+export class ZAvatar {
+  constructor() {
+    /** [optional] Avatar size */
+    this.size = AvatarSize.medium;
+    /** [optional] Avatar text color */
+    this.textColor = "text-white";
+    /** [optional] Avatar background color */
+    this.backgroundColor = "bg-grey-700";
+    if (!this.text && !this.image) {
+      console.warn("z-avatar must contain at least one prop between text and image");
+    }
+  }
+  getTextSize() {
+    if (this.size === AvatarSize.small) {
+      return "5";
+    }
+    else if (this.size === AvatarSize.medium) {
+      return "4";
+    }
+    else if (this.size === AvatarSize.large) {
+      return "2";
+    }
+  }
+  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"
+          }
+        }
+      },
+      "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": "\"text-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": "\"bg-grey-700\""
+    },
+    "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
+    }
+  }; }
+}

package/dist/collection/components/z-avatar/styles.css

@@ -1,35 +1,35 @@
-:host {
-  font-family: var(--font-family-sans);
-
-  background-color: var(--bg-grey-700);
-
-  border-radius: 50%;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  text-transform: uppercase;
-}
-
-:host(.small),
-:host(.small) > img {
-  height: calc(var(--space-unit) * 3);
-  width: calc(var(--space-unit) * 3);
-}
-
-:host(.medium),
-:host(.medium) > img {
-  height: calc(var(--space-unit) * 4);
-  width: calc(var(--space-unit) * 4);
-}
-
-:host(.large),
-:host(.large) > img {
-  height: calc(var(--space-unit) * 5);
-  width: calc(var(--space-unit) * 5);
-}
-
-:host > img {
-  object-fit: cover;
-}
+:host {
+  font-family: var(--font-family-sans);
+
+  background-color: var(--bg-grey-700);
+
+  border-radius: 50%;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  text-transform: uppercase;
+}
+
+:host(.small),
+:host(.small) > img {
+  height: calc(var(--space-unit) * 3);
+  width: calc(var(--space-unit) * 3);
+}
+
+:host(.medium),
+:host(.medium) > img {
+  height: calc(var(--space-unit) * 4);
+  width: calc(var(--space-unit) * 4);
+}
+
+:host(.large),
+:host(.large) > img {
+  height: calc(var(--space-unit) * 5);
+  width: calc(var(--space-unit) * 5);
+}
+
+:host > img {
+  object-fit: cover;
+}

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

@@ -1,153 +1,153 @@
-import { Component, Prop, h, Element, State, Listen, Event } from '@stencil/core';
-import { CardVariants } from '../../beans';
-export class ZCard {
-  constructor() {
-    /** Enable click interactions on the card. Default: false */
-    this.clickable = false;
-  }
-  onClick(ev) {
-    // Do nothing for clicks on actions.
-    if (ev.target.getAttribute('slot') === 'action') {
-      return;
-    }
-    if (!this.clickable) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      return;
-    }
-    this.cardClicked.emit();
-  }
-  componentWillLoad() {
-    this.hasCoverImage = !!this.host.querySelector('[slot="cover"]');
-  }
-  /**
-   * Template for a card without image cover.
-   * A colored background replaces the image and some data is moved over it.
-   */
-  renderColorCoverCard() {
-    return [
-      h("div", { class: "cover-container" },
-        h("div", { class: "color-cover" },
-          h("div", { class: "cover-content" },
-            h("slot", { name: "metadata" }),
-            h("slot", { name: "title" })))),
-      h("div", { class: "content" },
-        h("slot", { name: "text" }),
-        h("div", { class: "actions" },
-          h("slot", { name: "action" })))
-    ];
-  }
-  render() {
-    if (this.variant === CardVariants.overlay || this.hasCoverImage) {
-      return [
-        h("div", { class: "cover-container" },
-          this.hasCoverImage && [
-            h("slot", { name: "cover" }),
-            (this.variant !== CardVariants.overlay) && this.coverIcon && h("z-icon", { name: this.coverIcon })
-          ],
-          !this.hasCoverImage && h("div", { class: "color-cover" })),
-        h("div", { class: "content" },
-          h("slot", { name: "metadata" }),
-          h("slot", { name: "title" }),
-          h("slot", { name: "text" }),
-          h("div", { class: "actions" },
-            h("slot", { name: "action" })))
-      ];
-    }
-    return this.renderColorCoverCard();
-  }
-  static get is() { return "z-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "CardVariants",
-        "resolved": "CardVariants.border | CardVariants.overlay | CardVariants.shadow",
-        "references": {
-          "CardVariants": {
-            "location": "import",
-            "path": "../../beans"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Card variant.\r\nCan be one of \"text\", \"border\", \"shadow\", \"overlay\".\r\nLeave it undefined for the default card."
-      },
-      "attribute": "variant",
-      "reflect": true
-    },
-    "coverIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Name of the icon to place over the image cover"
-      },
-      "attribute": "cover-icon",
-      "reflect": false
-    },
-    "clickable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enable click interactions on the card. Default: false"
-      },
-      "attribute": "clickable",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "hasCoverImage": {}
-  }; }
-  static get events() { return [{
-      "method": "cardClicked",
-      "name": "cardClicked",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Card click event.\r\nFired only if `clickable` is true."
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "host"; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "onClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}
+import { Component, Prop, h, Element, State, Listen, Event } from '@stencil/core';
+import { CardVariants } from '../../beans';
+export class ZCard {
+  constructor() {
+    /** Enable click interactions on the card. Default: false */
+    this.clickable = false;
+  }
+  onClick(ev) {
+    // Do nothing for clicks on actions.
+    if (ev.target.getAttribute('slot') === 'action') {
+      return;
+    }
+    if (!this.clickable) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      return;
+    }
+    this.cardClicked.emit();
+  }
+  componentWillLoad() {
+    this.hasCoverImage = !!this.host.querySelector('[slot="cover"]');
+  }
+  /**
+   * Template for a card without image cover.
+   * A colored background replaces the image and some data is moved over it.
+   */
+  renderColorCoverCard() {
+    return [
+      h("div", { class: "cover-container" },
+        h("div", { class: "color-cover" },
+          h("div", { class: "cover-content" },
+            h("slot", { name: "metadata" }),
+            h("slot", { name: "title" })))),
+      h("div", { class: "content" },
+        h("slot", { name: "text" }),
+        h("div", { class: "actions" },
+          h("slot", { name: "action" })))
+    ];
+  }
+  render() {
+    if (this.variant === CardVariants.overlay || this.hasCoverImage) {
+      return [
+        h("div", { class: "cover-container" },
+          this.hasCoverImage && [
+            h("slot", { name: "cover" }),
+            (this.variant !== CardVariants.overlay) && this.coverIcon && h("z-icon", { name: this.coverIcon })
+          ],
+          !this.hasCoverImage && h("div", { class: "color-cover" })),
+        h("div", { class: "content" },
+          h("slot", { name: "metadata" }),
+          h("slot", { name: "title" }),
+          h("slot", { name: "text" }),
+          h("div", { class: "actions" },
+            h("slot", { name: "action" })))
+      ];
+    }
+    return this.renderColorCoverCard();
+  }
+  static get is() { return "z-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "CardVariants",
+        "resolved": "CardVariants.border | CardVariants.overlay | CardVariants.shadow",
+        "references": {
+          "CardVariants": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Card variant.\nCan be one of \"text\", \"border\", \"shadow\", \"overlay\".\nLeave it undefined for the default card."
+      },
+      "attribute": "variant",
+      "reflect": true
+    },
+    "coverIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Name of the icon to place over the image cover"
+      },
+      "attribute": "cover-icon",
+      "reflect": false
+    },
+    "clickable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable click interactions on the card. Default: false"
+      },
+      "attribute": "clickable",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "hasCoverImage": {}
+  }; }
+  static get events() { return [{
+      "method": "cardClicked",
+      "name": "cardClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Card click event.\nFired only if `clickable` is true."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "onClick",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}