@zanichelli/albe-web-components 8.0.1 → 9.0.0

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");

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

@@ -1,14 +1,17 @@
 import { h, Host } from "@stencil/core";
-import { ButtonSize, ButtonVariant, PopoverPosition, Size, SortDirection } from "../../../beans";
+import { ButtonSize, ButtonVariant, PopoverPosition } from "../../../beans";
 import { getElementTree } from "../../../utils/utils";
+/**
+ * @deprecated
+ */
 export class ZTableHeader {
   constructor() {
     /** Set padding size of cell, if special 0px padding will be set */
-    this.padding = Size.MEDIUM;
+    this.padding = "medium";
     /** [Optional] Default sort order */
-    this.defaultSortDirection = SortDirection.ASC;
+    this.defaultSortDirection = "asc";
     /** Sort direction */
-    this.sortDirection = SortDirection.NONE;
+    this.sortDirection = "none";
     this.emitOnSort = this.emitOnSort.bind(this);
   }
   emitOnSort() {
@@ -23,14 +26,14 @@ export class ZTableHeader {
     }
     this.sortDirection = (() => {
       switch (this.sortDirection) {
-        case SortDirection.ASC:
-          return SortDirection.DESC;
-        case SortDirection.DESC:
-          return SortDirection.ASC;
-        case SortDirection.NONE:
+        case "asc":
+          return "desc";
+        case "desc":
+          return "asc";
+        case "none":
           return this.defaultSortDirection;
         default:
-          return SortDirection.NONE;
+          return "none";
       }
     })();
     this.emitOnSort();
@@ -54,7 +57,7 @@ export class ZTableHeader {
     const parentColumnId = parent.attributes.getNamedItem("column-id").value;
     const isSortable = target.parentNode.sortable || target.sortable;
     if (parentColumnId !== this.columnId && isSortable) {
-      this.sortDirection = SortDirection.NONE;
+      this.sortDirection = "none";
     }
   }
   componentWillRender() {
@@ -63,7 +66,7 @@ export class ZTableHeader {
   render() {
     return (h(Host, { class: {
         sortable: this.sortable,
-      }, onClick: () => this.handleSort() }, h("div", { class: "container" }, h("slot", null), this.sortable && this.sortDirection !== SortDirection.NONE && (h("z-icon", { name: this.sortDirection === SortDirection.ASC ? "arrow-up" : "arrow-down", class: "arrow" }))), this.showButton && (h("div", { class: "popover-container" }, h("z-button", { ref: (el) => (this.triggerButton = el), class: "contextual-popover-button", icon: "contextual-menu", variant: ButtonVariant.TERTIARY, size: ButtonSize.X_SMALL, onClick: () => this.handleMenuClick() }), h("z-popover", { ref: (el) => (this.popover = el), position: PopoverPosition.BOTTOM, center: true, bindTo: this.triggerButton }, h("div", null, h("slot", { name: "contextual-menu" })))))));
+      }, onClick: () => this.handleSort() }, h("div", { class: "container" }, h("slot", null), this.sortable && this.sortDirection !== "none" && (h("z-icon", { name: this.sortDirection === "asc" ? "arrow-up" : "arrow-down", class: "arrow" }))), this.showButton && (h("div", { class: "popover-container" }, h("z-button", { ref: (el) => (this.triggerButton = el), class: "contextual-popover-button", icon: "contextual-menu", variant: ButtonVariant.TERTIARY, size: ButtonSize.X_SMALL, onClick: () => this.handleMenuClick() }), h("z-popover", { ref: (el) => (this.popover = el), position: PopoverPosition.BOTTOM, center: true, bindTo: this.triggerButton }, h("div", null, h("slot", { name: "contextual-menu" })))))));
   }
   static get is() { return "z-table-header"; }
   static get encapsulation() { return "shadow"; }
@@ -100,14 +103,9 @@ export class ZTableHeader {
         "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,
@@ -117,7 +115,7 @@ export class ZTableHeader {
         },
         "attribute": "padding",
         "reflect": true,
-        "defaultValue": "Size.MEDIUM"
+        "defaultValue": "\"medium\""
       },
       "sortable": {
         "type": "boolean",
@@ -157,14 +155,9 @@ export class ZTableHeader {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "SortDirection",
-          "resolved": "SortDirection.ASC | SortDirection.DESC | SortDirection.NONE",
-          "references": {
-            "SortDirection": {
-              "location": "import",
-              "path": "../../../beans"
-            }
-          }
+          "original": "\"asc\" | \"desc\" | \"none\"",
+          "resolved": "\"asc\" | \"desc\" | \"none\"",
+          "references": {}
         },
         "required": false,
         "optional": true,
@@ -174,20 +167,15 @@ export class ZTableHeader {
         },
         "attribute": "default-sort-direction",
         "reflect": false,
-        "defaultValue": "SortDirection.ASC"
+        "defaultValue": "\"asc\""
       },
       "sortDirection": {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "SortDirection",
-          "resolved": "SortDirection.ASC | SortDirection.DESC | SortDirection.NONE",
-          "references": {
-            "SortDirection": {
-              "location": "import",
-              "path": "../../../beans"
-            }
-          }
+          "original": "\"asc\" | \"desc\" | \"none\"",
+          "resolved": "\"asc\" | \"desc\" | \"none\"",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -197,7 +185,7 @@ export class ZTableHeader {
         },
         "attribute": "sort-direction",
         "reflect": false,
-        "defaultValue": "SortDirection.NONE"
+        "defaultValue": "\"none\""
       }
     };
   }

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

@@ -1,4 +1,7 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @deprecated
+ */
 export class ZTableHeaderRow {
   renderExpandHeader() {
     return h("z-table-header", null);

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

@@ -1,5 +1,8 @@
 import { Host, h } from "@stencil/core";
 import { ZTableRowExpandedType } from "../../../beans";
+/**
+ * @deprecated
+ */
 export class ZTableRow {
   constructor() {
     /** Table row expanded type */

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 /**
+ * @deprecated
  * @slot - table sticky footer content
  */
 export class ZTableStickyFooter {

package/dist/esm/index-0e0fa88d.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, g as getElement } from './index-a2ca4b97.js';
+
+const stylesCss = ".sc-z-table-head-h{display:table-header-group;font-family:var(--dashboard-font);font-weight:var(--font-rg)}";
+
+const ZTableHead = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentWillRender() {
+    this.host.setAttribute("role", "rowgroup");
+  }
+  render() {
+    return h("slot", null);
+  }
+  get host() { return getElement(this); }
+};
+ZTableHead.style = stylesCss;
+
+export { ZTableHead as Z };

package/dist/esm/index-16d8ed5b.js

@@ -0,0 +1,39 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-a2ca4b97.js';
+import { Z as ZTableRowExpandedType } from './index-9c5d63ea.js';
+
+const stylesCss = "z-table-row{display:table-row;font-family:var(--font-family-sans)}z-table-row[expanded-type=\"expandable\"]:hover{cursor:pointer}z-table-row[expanded-type=\"expandable\"]>z-table-cell:first-child,z-table-row[expanded-type=\"padding\"]>z-table-cell:first-child{--z-icon-width:16px;--z-icon-height:16px;width:24px;box-sizing:border-box;padding-right:0;padding-left:16px;fill:var(--gray800);text-align:center;user-select:none}.z-icon-placeholder{width:24px;padding-right:0}z-table-row[expanded-type=\"expandable\"]>z-table-cell:nth-child(2),z-table-row[expanded-type=\"padding\"]>z-table-cell:nth-child(2){padding-left:8px}z-table-row[expanded-type]:hover>z-table-cell:first-child{fill:var(--myz-blue-dark)}z-table-row[expanded]>z-table-cell{border-bottom:none;background-color:var(--gray50)}z-table-row[expanded]+z-table-expanded-row{display:table-row}";
+
+const ZTableRow = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.expand = createEvent(this, "expand", 7);
+    /** Table row expanded type */
+    this.expandedType = ZTableRowExpandedType.NONE;
+    this.expanded = false;
+  }
+  emitOnExpand() {
+    this.expand.emit({ expanded: this.expanded });
+  }
+  handleExpand() {
+    this.expanded = !this.expanded;
+    this.emitOnExpand();
+  }
+  renderExpandButton() {
+    if (this.expandedType == ZTableRowExpandedType.EXPANDABLE) {
+      return (h("z-table-cell", { style: { borderRight: "none" } }, h("z-icon", { name: this.expanded ? "minus-circled" : "plus-circled" })));
+    }
+    return (h("z-table-cell", { style: { borderRight: "none" } }, h("div", { class: "z-icon-placeholder" })));
+  }
+  render() {
+    return (h(Host, { role: "row", expanded: this.expanded, onClick: (event) => {
+        const preventExpand = event.target.classList.contains("prevent-expand");
+        const isExpandable = this.expandedType === ZTableRowExpandedType.EXPANDABLE;
+        if (isExpandable && !preventExpand) {
+          this.handleExpand();
+        }
+      } }, this.expandedType !== ZTableRowExpandedType.NONE && this.renderExpandButton(), h("slot", null)));
+  }
+};
+ZTableRow.style = stylesCss;
+
+export { ZTableRow as Z };

package/dist/esm/index-1ae1c122.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h } from './index-a2ca4b97.js';
+
+const stylesCss = ".sc-z-table-sticky-footer-h{position:sticky;left:0;display:block;padding:var(--basex2);border-width:var(--border-size-small) 0 var(--border-base);border-style:solid;border-color:var(--gray200);background-color:var(--bg-white);font-weight:var(--font-rg)}";
+
+const ZTableStickyFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h("slot", null);
+  }
+};
+ZTableStickyFooter.style = stylesCss;
+
+export { ZTableStickyFooter as Z };