@zanichelli/albe-web-components 8.1.0-RC1 → 9.0.0

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

@@ -0,0 +1,50 @@
+import { Host, h } from "@stencil/core";
+/**
+ * ZTFoot component.
+ * @slot - ZTFoot content (`z-tr`).
+ */
+export class ZTfoot {
+  constructor() {
+    /**
+     * If true, the footer will be stuck to the bottom of the table.
+     */
+    this.sticky = false;
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+  static get is() { return "z-tfoot"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "sticky": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true, the footer will be stuck to the bottom of the table."
+        },
+        "attribute": "sticky",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

package/dist/collection/components/table/z-tfoot/styles.css

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  border-top: 1px solid var(--color-surface03);
+  border-bottom: 1px solid var(--color-surface03);
+}
+
+:host([sticky]) {
+  position: sticky;
+  z-index: 1;
+  bottom: 0;
+  background-color: var(--color-surface01);
+}

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

@@ -0,0 +1,50 @@
+import { Host, h } from "@stencil/core";
+/**
+ * ZThead component.
+ * @slot - ZThead content (`z-tr`).
+ */
+export class ZThead {
+  constructor() {
+    /**
+     * If true, the header will be stuck to the top of the table.
+     */
+    this.sticky = false;
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+  static get is() { return "z-thead"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "sticky": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true, the header will be stuck to the top of the table."
+        },
+        "attribute": "sticky",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

package/dist/collection/components/table/z-thead/styles.css

@@ -0,0 +1,19 @@
+:host {
+  --z-table--cells-bottom-border-size: var(
+    --border-size-medium
+  ); /* Needed to handle the border of the expand button cell */
+
+  --z-table--cells-background: var(
+    --color-surface02
+  ); /* Needed to handle the background-color of the expand button cell */
+
+  display: block;
+  box-sizing: border-box;
+}
+
+:host([sticky]) {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+  box-shadow: 0 2px 4px -2px var(--shadow-color-base);
+}

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

@@ -0,0 +1,133 @@
+import { Host, h } from "@stencil/core";
+import { randomId } from "../../../utils/utils";
+import "../cells/z-td/index";
+import "../cells/z-th/index";
+/**
+ * ZTr component.
+ * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row
+ * to prevent the row from expanding.
+ * @slot - ZTr content (`z-td` or `z-th`).
+ */
+export class ZTr {
+  constructor() {
+    /**
+     * Whether the row is expandable.
+     * Use a `z-td` as the last cell of the row for the additional content.
+     * It will show a button to expand/collapse the row.
+     * The last cell will be hidden until the button or row is clicked.
+     *
+     * If some element inside the expandable row contains the `prevent-expand` css class,
+     * the row will not expand by clicking that element.
+     */
+    this.expandable = false;
+    /**
+     * Whether the row is currently expanded.
+     */
+    this.expanded = false;
+  }
+  updateColumns() {
+    const cells = Array.from(this.host.querySelectorAll("z-td, z-th"));
+    if (this.expandable) {
+      cells.pop();
+    }
+    const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);
+    this.host.style.setProperty("--columns", `${columns}`);
+    if (this.expandable) {
+      const expandableContent = cells.pop();
+      expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;
+      this.expandableContentId = expandableContent.id;
+    }
+  }
+  /**
+   * Handle click on row.
+   * Skip expansion if the click is on a element with `prevent-expand` css class.
+   */
+  onRowClick(event) {
+    const preventExpand = event.target.closest(".prevent-expand");
+    if (!this.expandable || preventExpand) {
+      return;
+    }
+    this.expanded = !this.expanded;
+    this.expand.emit({ expanded: this.expanded });
+  }
+  componentWillLoad() {
+    this.updateColumns();
+  }
+  render() {
+    return (h(Host, { role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { class: "z-tr--expand-button-container" }, this.expandable && (h("button", { "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { onSlotchange: this.updateColumns.bind(this) })));
+  }
+  static get is() { return "z-tr"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "expandable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the row is expandable.\nUse a `z-td` as the last cell of the row for the additional content.\nIt will show a button to expand/collapse the row.\nThe last cell will be hidden until the button or row is clicked.\n\nIf some element inside the expandable row contains the `prevent-expand` css class,\nthe row will not expand by clicking that element."
+        },
+        "attribute": "expandable",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "expanded": {},
+      "expandableContentId": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "expand",
+        "name": "expand",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Row has been expanded"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "expandable",
+        "methodName": "updateColumns"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "colspanchange",
+        "method": "updateColumns",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/table/z-tr/styles.css

@@ -0,0 +1,87 @@
+:host {
+  /* number of columns of the row. will be set in component's ts code */
+  --columns: 1;
+
+  display: grid;
+  min-width: max-content;
+  box-sizing: border-box;
+  grid-auto-flow: column;
+  grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.z-tr--expand-button-container,
+::slotted(*) {
+  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);
+}
+
+::slotted(*:not(:last-child)) {
+  border-right: var(--z-table--cell-left-border, none);
+}
+
+:host([expandable]) {
+  --show-expandable-button: visible;
+
+  cursor: pointer;
+}
+
+:host([expandable]) ::slotted(*) {
+  grid-row: 1;
+}
+
+:host([expandable]) ::slotted(:nth-last-child(2)) {
+  border-right: none;
+}
+
+:host([expandable]) ::slotted(*:last-child) {
+  border-left: 0;
+  grid-column: 1 / span calc(var(--columns) + 1);
+  grid-row: 2;
+}
+
+:host([expandable]:not([expanded])) ::slotted(*:last-child) {
+  display: none;
+}
+
+:host([expanded]) {
+  margin-bottom: 4px; /* prevents shadow to be cut by the next element */
+  box-shadow: 0 4px 4px -2px var(--shadow-color-base);
+}
+
+:host([expanded]) .z-tr--expand-button-container,
+:host([expanded]) ::slotted(*) {
+  background-color: var(--color-surface02);
+}
+
+.z-tr--expand-button-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--z-table--cells-background, var(--color-surface01));
+}
+
+.z-tr--expand-button-container button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  margin: auto;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  visibility: var(--show-expandable-button, hidden);
+}
+
+.z-tr--expand-button-container button:focus {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+.z-tr--expand-button-container button z-icon {
+  --z-icon-width: 16px;
+  --z-icon-height: 16px;
+}

package/dist/collection/{components/z-table → deprecated/z-table-deprecated}/z-table-body/index.js

@@ -1,4 +1,7 @@
 import { h } from "@stencil/core";
+/**
+ * @deprecated
+ */
 export class ZTableBody {
   componentWillRender() {
     this.host.setAttribute("role", "rowgroup");

package/dist/collection/{components/z-table → deprecated/z-table-deprecated}/z-table-cell/index.js

@@ -1,9 +1,12 @@
 import { h, Host } from "@stencil/core";
-import { ButtonVariant, ButtonSize, Size } from "../../../beans";
+import { ButtonVariant, ButtonSize } from "../../../beans";
+/**
+ * @deprecated
+ */
 export class ZTableCell {
   constructor() {
     /** Set padding size of cell, if special 0px padding will be set */
-    this.padding = Size.MEDIUM;
+    this.padding = "medium";
     this.isMenuOpened = false;
   }
   handleMenu() {
@@ -56,14 +59,9 @@ export class ZTableCell {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "Size",
-          "resolved": "Size.LARGE | Size.MEDIUM | Size.SMALL | Size.SPECIAL | Size.X_SMALL",
-          "references": {
-            "Size": {
-              "location": "import",
-              "path": "../../../beans"
-            }
-          }
+          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | \"special\"",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"special\" | \"x-small\"",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -73,7 +71,7 @@ export class ZTableCell {
         },
         "attribute": "padding",
         "reflect": true,
-        "defaultValue": "Size.MEDIUM"
+        "defaultValue": "\"medium\""
       }
     };
   }

package/dist/collection/{components/z-table/z-table → deprecated/z-table-deprecated/z-table-deprecated}/index.js

@@ -1,11 +1,22 @@
 import { Host, h } from "@stencil/core";
 import { ButtonSize, ButtonVariant } from "../../../beans";
 import { mobileBreakpoint } from "../../../constants/breakpoints";
+import "../z-table-body/index";
+import "../z-table-cell/index";
+import "../z-table-empty-box/index";
+import "../z-table-expanded-row/index";
+import "../z-table-footer/index";
+import "../z-table-head/index";
+import "../z-table-header/index";
+import "../z-table-header-row/index";
+import "../z-table-row/index";
+import "../z-table-sticky-footer/index";
 /**
  * @slot - table elements
  * @slot sticky-footer - set the content of the sticky footer
+ * @deprecated
  */
-export class ZTable {
+export class ZTableDeprecated {
   constructor() {
     /** Error message */
     this.errorMessage = "Siamo spiacenti, non siamo riusciti a caricare il contenuto richiesto";
@@ -66,7 +77,7 @@ export class ZTable {
     }
     return (h(Host, null, h("div", { class: tableClass }, h("slot", null)), h("slot", { name: "sticky-footer" })));
   }
-  static get is() { return "z-table"; }
+  static get is() { return "z-table-deprecated"; }
   static get originalStyleUrls() {
     return {
       "$": ["styles.css"]

package/dist/collection/{components/z-table/z-table → deprecated/z-table-deprecated/z-table-deprecated}/styles.css

@@ -1,4 +1,4 @@
-z-table {
+z-table-deprecated {
   display: block;
   width: 100%;
   background-color: var(--color-white);
@@ -7,40 +7,40 @@ z-table {
   overflow-x: auto;
 }
 
-z-table > div.table {
+z-table-deprecated > div.table {
   display: table;
   width: 100%;
   border-collapse: separate;
 }
 
-z-table > div.table-bordered > z-table-body > z-table-row > z-table-cell:not(:last-child),
-z-table > div.table-bordered > z-table-head > z-table-header-row > z-table-header:not(:last-child) {
+z-table-deprecated > div.table-bordered > z-table-body > z-table-row > z-table-cell:not(:last-child),
+z-table-deprecated > div.table-bordered > z-table-head > z-table-header-row > z-table-header:not(:last-child) {
   border-right: var(--border-size-small) solid var(--bg-grey-200);
 }
 
 /** Remove border right to first cell if row is expandable */
-z-table > div > z-table-body > z-table-row[expandable] > z-table-cell:first-child,
-z-table > div > z-table-head > z-table-header-row[expandable] > z-table-header:first-child {
+z-table-deprecated > div > z-table-body > z-table-row[expandable] > z-table-cell:first-child,
+z-table-deprecated > div > z-table-head > z-table-header-row[expandable] > z-table-header:first-child {
   border-right: none;
 }
 
-z-table > div > z-table-body > z-table-row[expanded] > z-table-cell {
+z-table-deprecated > div > z-table-body > z-table-row[expanded] > z-table-cell {
   background-color: var(--gray50);
 }
 
-z-table > div > z-table-body > z-table-row[expanded] + z-table-expanded-row {
+z-table-deprecated > div > z-table-body > z-table-row[expanded] + z-table-expanded-row {
   border-bottom: 1px solid var(--gray200);
 }
 
-z-table > div.table-column-sticky > z-table-body > z-table-row > z-table-cell:first-child,
-z-table > div.table-column-sticky > z-table-head > z-table-header-row > z-table-header:first-child {
+z-table-deprecated > div.table-column-sticky > z-table-body > z-table-row > z-table-cell:first-child,
+z-table-deprecated > div.table-column-sticky > z-table-head > z-table-header-row > z-table-header:first-child {
   position: sticky;
   z-index: 1;
   left: 0;
   box-shadow: 1px 0 4px -1px rgb(66 69 72 / 40%);
 }
 
-z-table > div.table-header-sticky > z-table-head > z-table-header-row > z-table-header {
+z-table-deprecated > div.table-header-sticky > z-table-head > z-table-header-row > z-table-header {
   position: sticky;
   z-index: 2; /* L'ombra delle celle sticky non va sopra all'header fisso. */
   top: 0;
@@ -50,8 +50,8 @@ z-table > div.table-header-sticky > z-table-head > z-table-header-row > z-table-
 /**
  * La cella in alto a sinistra rimane sempre sopra alle cell durante lo scroll.
  */
-z-table > div.table-header-sticky > z-table-head > z-table-header-row > z-table-header:first-child,
-z-table > div.table-column-sticky > z-table-head > z-table-header-row > z-table-header:first-child {
+z-table-deprecated > div.table-header-sticky > z-table-head > z-table-header-row > z-table-header:first-child,
+z-table-deprecated > div.table-column-sticky > z-table-head > z-table-header-row > z-table-header:first-child {
   z-index: 5;
 }
 
@@ -95,7 +95,7 @@ z-table-empty-box.bordered {
 
 /* Mobile */
 @media only screen and (max-width: 768px) {
-  z-table > div.table-empty {
+  z-table-deprecated > div.table-empty {
     display: none;
   }
 

package/dist/collection/{components/z-table → deprecated/z-table-deprecated}/z-table-empty-box/index.js

@@ -1,4 +1,7 @@
 import { h, Host } from "@stencil/core";
+/**
+ * @deprecated
+ */
 export class ZTableEmptyBox {
   constructor() {
     /** Sets main title message*/

package/dist/collection/{components/z-table → deprecated/z-table-deprecated}/z-table-expanded-row/index.js

@@ -1,4 +1,7 @@
 import { h } from "@stencil/core";
+/**
+ * @deprecated
+ */
 export class ZTableExpandedRow {
   render() {
     return (h("td", { colSpan: this.colSpan }, h("div", { class: "content-container" }, h("slot", null))));

package/dist/collection/{components/z-table → deprecated/z-table-deprecated}/z-table-footer/index.js

@@ -1,4 +1,7 @@
 import { h } from "@stencil/core";
+/**
+ * @deprecated
+ */
 export class ZTableFooter {
   componentWillRender() {
     this.host.setAttribute("role", "rowgroup");

package/dist/collection/{components/z-table → deprecated/z-table-deprecated}/z-table-head/index.js

@@ -1,4 +1,7 @@
 import { h } from "@stencil/core";
+/**
+ * @deprecated
+ */
 export class ZTableHead {
   componentWillRender() {
     this.host.setAttribute("role", "rowgroup");