@zanichelli/albe-web-components 2.33.5-rc1 → 2.34.1

package/dist/collection/components/panel/z-panel-elem/styles.css

@@ -0,0 +1,39 @@
+:host {
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
+  width: inherit;
+}
+
+.panel-elem-container {
+  width: 100%;
+}
+
+.panel-elem-icon {
+  margin: auto calc(var(--space-unit) * 3);
+}
+
+.panel-elem-icon img {
+  display: block;
+  object-fit: contain;
+  max-width: 96px;
+  height: 32px;
+  margin: auto;
+}
+
+.panel-elem-link {
+  border-radius: var(--border-no-radius);
+  margin: var(--space-unit) auto 0;
+  text-align: center;
+  font-size: 12px;
+}
+
+.panel-elem-link > z-link {
+  font-weight: var(--font-sb);
+}
+
+.panel-elem-desc {
+  letter-spacing: 0.16px;
+  text-align: center;
+  margin: 0;
+  padding-top: var(--space-unit);
+}

package/dist/collection/components/typography/z-body/index.js

@@ -0,0 +1,66 @@
+import { Component, Prop, h } from "@stencil/core";
+export class ZBody {
+  constructor() {
+    this.variant = "regular";
+  }
+  render() {
+    return (h("z-typography", { component: this.component || "span", level: `b${this.level}`, variant: this.variant },
+      h("slot", null)));
+  }
+  static get is() { return "z-body"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "level": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "1 | 2 | 3 | 4 | 5",
+        "resolved": "1 | 2 | 3 | 4 | 5",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "level",
+      "reflect": false
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"regular\" | \"semibold\"",
+        "resolved": "\"regular\" | \"semibold\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "\"regular\""
+    },
+    "component": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "component",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/typography/z-heading/index.js

@@ -0,0 +1,66 @@
+import { Component, Prop, h } from "@stencil/core";
+export class ZHeading {
+  constructor() {
+    this.variant = "regular";
+  }
+  render() {
+    return (h("z-typography", { component: this.component || `h${this.level}`, level: `h${this.level}`, variant: this.variant },
+      h("slot", null)));
+  }
+  static get is() { return "z-heading"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "level": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "1 | 2 | 3 | 4",
+        "resolved": "1 | 2 | 3 | 4",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "level",
+      "reflect": false
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"regular\" | \"semibold\" | \"light\"",
+        "resolved": "\"light\" | \"regular\" | \"semibold\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "\"regular\""
+    },
+    "component": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "component",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,84 @@
+import { Component, Element, Prop, h, Host } from "@stencil/core";
+export class ZTypography {
+  constructor() {
+    this.variant = "regular";
+  }
+  render() {
+    const el = document.createElement(this.component || "span");
+    el.innerHTML = `<slot />`;
+    this.hostElement.shadowRoot.appendChild(el);
+    return (h(Host, { class: {
+        [this.level]: Boolean(this.level),
+        regular: this.variant === "regular",
+        semibold: this.variant === "semibold",
+        light: this.variant === "light"
+      } }));
+  }
+  static get is() { return "z-typography"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "component": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "component",
+      "reflect": false
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"regular\" | \"semibold\" | \"light\"",
+        "resolved": "\"light\" | \"regular\" | \"semibold\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "\"regular\""
+    },
+    "level": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ZTypographyLevels",
+        "resolved": "\"b1\" | \"b2\" | \"b3\" | \"b4\" | \"b5\" | \"h1\" | \"h2\" | \"h3\" | \"h4\"",
+        "references": {
+          "ZTypographyLevels": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "level",
+      "reflect": false
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -0,0 +1,61 @@
+:host > * {
+  font-family: var(--dashboard-font);
+  margin: 0;
+}
+
+:host(.regular)>* {
+  font-weight: var(--font-rg);
+}
+
+:host(.semibold)>* {
+  font-weight: 600;
+}
+
+:host(.light)>* {
+  font-weight: 300;
+}
+
+:host(.h1)>* {
+  font-size: 32px;
+  line-height: 40px;
+}
+
+:host(.h2)>* {
+  font-size: 28px;
+  line-height: 36px;
+}
+
+:host(.h3)>* {
+  font-size: 24px;
+  line-height: 32px;
+}
+
+:host(.h4)>* {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+:host(.b1)>* {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+:host(.b2)>* {
+  font-size: 18px;
+  line-height: 28px;
+}
+
+:host(.b3)>* {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+:host(.b4)>* {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+:host(.b5)>* {
+  font-size: 12px;
+  line-height: 16px;
+}

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

@@ -0,0 +1,32 @@
+import { Component, Prop, h, Host } from "@stencil/core";
+import { ZAriaAlertMode } from "../../beans";
+export class ZAriaAlert {
+  constructor() {
+    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": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "mode",
+      "reflect": false,
+      "defaultValue": "ZAriaAlertMode.polite"
+    }
+  }; }
+}

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

@@ -0,0 +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
+    }
+  }; }
+}

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

@@ -0,0 +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;
+}

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

@@ -0,0 +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.\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
+    }]; }
+}