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

package/CHANGELOG.md

@@ -2,6 +2,37 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [9.0.0](https://github.com/ZanichelliEditore/design-system/compare/v8.0.1...v9.0.0) (2023-07-05)
+
+
+### Features
+
+* menu button of cells can now be displayed always instead of only on hover ([c132e93](https://github.com/ZanichelliEditore/design-system/commit/c132e937e2551d579ff30cf01ab345667b009ff0))
+
+
+### Bug Fixes
+
+* some style and stories ([906f5c8](https://github.com/ZanichelliEditore/design-system/commit/906f5c86c703633d52e4185d4009a30521f59dce))
+
+### [8.0.1](https://github.com/ZanichelliEditore/design-system/compare/v8.0.0...v8.0.1) (2023-07-04)
+
+
+### Bug Fixes
+
+* hide the button in order to avoid safari autocomplete problem ([f86e6d8](https://github.com/ZanichelliEditore/design-system/commit/f86e6d8de73019f930ab67151af9639a84770ee1))
+* z-card stories ([3325ade](https://github.com/ZanichelliEditore/design-system/commit/3325adefcf323e918e9a012c7c3fa4dd479e5af9))
+
+## [8.0.0](https://github.com/ZanichelliEditore/design-system/compare/v7.5.0...v8.0.0) (2023-06-22)
+
+
+### Bug Fixes
+
+* build ([590c02a](https://github.com/ZanichelliEditore/design-system/commit/590c02ae0e827671a4d16bb80b55625d5e1e38dc))
+* camelCase ([f1f193a](https://github.com/ZanichelliEditore/design-system/commit/f1f193ad9330d9409a909bc8a6ec9228fc7c58cf))
+* popover reference name ([abc66e5](https://github.com/ZanichelliEditore/design-system/commit/abc66e53a5335b52fe5dcbfc60b5159ec6551ec4))
+* styles and migration guide ([726da49](https://github.com/ZanichelliEditore/design-system/commit/726da49fe4462ce485d162576fd2445e22a270df))
+* tests ([43246ce](https://github.com/ZanichelliEditore/design-system/commit/43246ce34e92cd7cf99da5780fb0d6d71ac43da7))
+
 ## [7.5.0](https://github.com/ZanichelliEditore/design-system/compare/v7.4.3...v7.5.0) (2023-06-08)
 
 

package/dist/cjs/index-06609e4d.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const index = require('./index-e3299e0a.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) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return index.h("slot", null);
+  }
+};
+ZTableStickyFooter.style = stylesCss;
+
+exports.ZTableStickyFooter = ZTableStickyFooter;

package/dist/cjs/index-23d8692f.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const index = require('./index-e3299e0a.js');
+
+const stylesCss = ":host{--z-table--cells-bottom-border-size:var(\n    --border-size-medium\n  );--z-table--cells-background:var(\n    --color-surface02\n  );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)}";
+
+const ZThead = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * If true, the header will be stuck to the top of the table.
+     */
+    this.sticky = false;
+  }
+  render() {
+    return (index.h(index.Host, { role: "rowgroup" }, index.h("slot", null)));
+  }
+};
+ZThead.style = stylesCss;
+
+exports.ZThead = ZThead;

package/dist/cjs/{index-10e0d8b7.js → index-28bcd719.js}

@@ -136,7 +136,6 @@ exports.SortDirection = void 0;
 (function (SortDirection) {
   SortDirection["ASC"] = "asc";
   SortDirection["DESC"] = "desc";
-  SortDirection["NONE"] = "none";
 })(exports.SortDirection || (exports.SortDirection = {}));
 exports.AvatarSize = void 0;
 (function (AvatarSize) {
@@ -151,14 +150,6 @@ exports.ListSize = void 0;
   ListSize["LARGE"] = "large";
   ListSize["X_LARGE"] = "x-large";
 })(exports.ListSize || (exports.ListSize = {}));
-exports.Size = void 0;
-(function (Size) {
-  Size["X_SMALL"] = "x-small";
-  Size["SMALL"] = "small";
-  Size["MEDIUM"] = "medium";
-  Size["LARGE"] = "large";
-  Size["SPECIAL"] = "special";
-})(exports.Size || (exports.Size = {}));
 exports.ExpandableListStyle = void 0;
 (function (ExpandableListStyle) {
   ExpandableListStyle["ACCORDION"] = "accordion";
@@ -336,6 +327,11 @@ exports.BreadcrumbHomepageVariant = void 0;
   BreadcrumbHomepageVariant["TEXT"] = "text";
   BreadcrumbHomepageVariant["ICON"] = "icon";
 })(exports.BreadcrumbHomepageVariant || (exports.BreadcrumbHomepageVariant = {}));
+exports.VisibilityCondition = void 0;
+(function (VisibilityCondition) {
+  VisibilityCondition["HOVER"] = "hover";
+  VisibilityCondition["ALWAYS"] = "always";
+})(exports.VisibilityCondition || (exports.VisibilityCondition = {}));
 exports.BookCardVariant = void 0;
 (function (BookCardVariant) {
   BookCardVariant["EXPANDED"] = "expanded";

package/dist/cjs/index-2b53b57b.js

@@ -0,0 +1,22 @@
+'use strict';
+
+const index = require('./index-e3299e0a.js');
+
+const stylesCss = ".sc-z-table-body-h{display:table-row-group;font-family:var(--dashboard-font);font-weight:var(--font-rg)}.sc-z-table-body-h>z-table-row[expanded].sc-z-table-body+z-table-expanded-row.sc-z-table-body{display:table-row}";
+
+const ZTableBody = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentWillRender() {
+    this.host.setAttribute("role", "rowgroup");
+    Array.from(this.host.children).forEach((child, index) => child.setAttribute("aria-rowindex", `${index}`));
+  }
+  render() {
+    return index.h("slot", null);
+  }
+  get host() { return index.getElement(this); }
+};
+ZTableBody.style = stylesCss;
+
+exports.ZTableBody = ZTableBody;

package/dist/cjs/index-804d0ec8.js

@@ -0,0 +1,79 @@
+'use strict';
+
+const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-28bcd719.js');
+const utils = require('./utils-1b75af6b.js');
+
+const stylesCss = ":host{position:relative;display:table-cell;border-bottom:var(--border-size-medium) solid var(--gray200);background-color:var(--gray50);font-family:var(--dashboard-font);font-weight:var(--font-sb);text-align:start}.container{display:flex;align-items:flex-end}:host(.sortable){cursor:pointer}:host([padding=\"x-small\"]){padding:calc(var(--space-unit) * 0.5)}:host([padding=\"small\"]){padding:calc(var(--space-unit))}:host([padding=\"medium\"]){padding:calc(var(--space-unit) * 2)}:host([padding=\"large\"]){padding:calc(var(--space-unit) * 2.5)}:host([padding=\"special\"]){padding:0}.arrow{padding-left:var(--space-unit);opacity:1}.popover-container{position:absolute;top:var(--space-unit);right:var(--space-unit);display:none}.popover-container z-popover{--z-popover-theme--surface:var(--gray200);position:relative;z-index:1}.popover-container.visible{display:block}:host(:hover) .popover-container{display:block}";
+
+const ZTableHeader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sort = index.createEvent(this, "sort", 7);
+    /** Set padding size of cell, if special 0px padding will be set */
+    this.padding = "medium";
+    /** [Optional] Default sort order */
+    this.defaultSortDirection = "asc";
+    /** Sort direction */
+    this.sortDirection = "none";
+    this.emitOnSort = this.emitOnSort.bind(this);
+  }
+  emitOnSort() {
+    this.sort.emit({
+      columnId: this.columnId,
+      sortDirection: this.sortDirection,
+    });
+  }
+  handleSort() {
+    if (!this.sortable) {
+      return;
+    }
+    this.sortDirection = (() => {
+      switch (this.sortDirection) {
+        case "asc":
+          return "desc";
+        case "desc":
+          return "asc";
+        case "none":
+          return this.defaultSortDirection;
+        default:
+          return "none";
+      }
+    })();
+    this.emitOnSort();
+  }
+  handleMenuClick() {
+    this.popover.open = !this.popover.open;
+  }
+  handleOutsideClick(e) {
+    const tree = utils.getElementTree(e.target);
+    const parent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-popover");
+    if (!parent && this.popover) {
+      this.popover.open = false;
+    }
+  }
+  handleClickHeaders(e) {
+    const target = e.target;
+    const parent = utils.getElementTree(target).find((elem) => elem.nodeName.toLowerCase() === "z-table-header");
+    if (!this.sortable || !parent) {
+      return;
+    }
+    const parentColumnId = parent.attributes.getNamedItem("column-id").value;
+    const isSortable = target.parentNode.sortable || target.sortable;
+    if (parentColumnId !== this.columnId && isSortable) {
+      this.sortDirection = "none";
+    }
+  }
+  componentWillRender() {
+    this.host.setAttribute("role", "columnheader");
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        sortable: this.sortable,
+      }, onClick: () => this.handleSort() }, index.h("div", { class: "container" }, index.h("slot", null), this.sortable && this.sortDirection !== "none" && (index.h("z-icon", { name: this.sortDirection === "asc" ? "arrow-up" : "arrow-down", class: "arrow" }))), this.showButton && (index.h("div", { class: "popover-container" }, index.h("z-button", { ref: (el) => (this.triggerButton = el), class: "contextual-popover-button", icon: "contextual-menu", variant: index$1.ButtonVariant.TERTIARY, size: index$1.ButtonSize.X_SMALL, onClick: () => this.handleMenuClick() }), index.h("z-popover", { ref: (el) => (this.popover = el), position: index$1.PopoverPosition.BOTTOM, center: true, bindTo: this.triggerButton }, index.h("div", null, index.h("slot", { name: "contextual-menu" })))))));
+  }
+  get host() { return index.getElement(this); }
+};
+ZTableHeader.style = stylesCss;
+
+exports.ZTableHeader = ZTableHeader;

package/dist/cjs/index-8f188526.js

@@ -0,0 +1,67 @@
+'use strict';
+
+const index = require('./index-e3299e0a.js');
+const utils = require('./utils-1b75af6b.js');
+require('./index-c6b48307.js');
+require('./index-f438d147.js');
+
+const stylesCss = ":host{--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;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}";
+
+const ZTr = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.expand = index.createEvent(this, "expand", 7);
+    /**
+     * 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-${utils.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 (index.h(index.Host, { role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, index.h("div", { class: "z-tr--expand-button-container" }, this.expandable && (index.h("button", { "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, index.h("z-icon", { name: this.expanded ? "minus-circled" : "plus-circled" })))), index.h("slot", { onSlotchange: this.updateColumns.bind(this) })));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "expandable": ["updateColumns"]
+  }; }
+};
+ZTr.style = stylesCss;
+
+exports.ZTr = ZTr;

package/dist/cjs/index-92a9f89e.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const index = require('./index-e3299e0a.js');
+
+const stylesCss = ":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)}";
+
+const ZTfoot = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * If true, the footer will be stuck to the bottom of the table.
+     */
+    this.sticky = false;
+  }
+  render() {
+    return (index.h(index.Host, { role: "rowgroup" }, index.h("slot", null)));
+  }
+};
+ZTfoot.style = stylesCss;
+
+exports.ZTfoot = ZTfoot;

package/dist/cjs/index-9648272b.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const index = require('./index-e3299e0a.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) {
+    index.registerInstance(this, hostRef);
+  }
+  componentWillRender() {
+    this.host.setAttribute("role", "rowgroup");
+  }
+  render() {
+    return index.h("slot", null);
+  }
+  get host() { return index.getElement(this); }
+};
+ZTableHead.style = stylesCss;
+
+exports.ZTableHead = ZTableHead;

package/dist/cjs/index-a9764c98.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const index = require('./index-e3299e0a.js');
+
+const stylesCss = ":host{display:block;box-sizing:border-box}";
+
+const ZTbody = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { role: "rowgroup" }, index.h("slot", null)));
+  }
+};
+ZTbody.style = stylesCss;
+
+exports.ZTbody = ZTbody;

package/dist/cjs/index-bbd48475.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const index = require('./index-e3299e0a.js');
+
+const stylesCss = "z-table-header-row{display:table-row}z-table-header-row[expandable]>z-table-header:first-child{width:40px;box-sizing:border-box;user-select:none}z-table-header-row[expandable]>z-table-header:nth-child(2){padding-left:8px}";
+
+const ZTableHeaderRow = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  renderExpandHeader() {
+    return index.h("z-table-header", null);
+  }
+  render() {
+    return (index.h(index.Host, { role: "row" }, this.expandable && this.renderExpandHeader(), index.h("slot", null)));
+  }
+};
+ZTableHeaderRow.style = stylesCss;
+
+exports.ZTableHeaderRow = ZTableHeaderRow;

package/dist/cjs/index-c6b48307.js

@@ -0,0 +1,49 @@
+'use strict';
+
+const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-28bcd719.js');
+
+const stylesCss = ":host{position:relative;display:flex;min-width:128px;box-sizing:border-box;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([show-menu])::after{display:inline-block;height:100%;margin-right:calc(var(--space-unit) * 4);background:transparent;content:\"\";user-select:none}.cell--menu-container{position:absolute;z-index:1;top:var(--space-unit);right:var(--space-unit)}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}@media (min-width: 768px) and (hover: hover){:host([show-menu=\"hover\"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu=\"hover\"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}";
+
+const ZTd = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.colspanChange = index.createEvent(this, "colspanChange", 6);
+    /**
+     * Whether the cell should stick.
+     */
+    this.sticky = false;
+    /**
+     * Enables the contextual menu.
+     * Can be set to "hover" or "always" to show the button only on cell hover or always.
+     * Set a nullish value to hide the menu button.
+     */
+    this.showMenu = null;
+    /**
+     * Store the open state of the menu.
+     */
+    this.isMenuOpen = false;
+  }
+  updateColspan() {
+    if (this.colspan) {
+      this.host.style.gridColumn = `span ${this.colspan}`;
+    }
+    else {
+      this.host.style.removeProperty("grid-column");
+    }
+    this.colspanChange.emit(this.colspan || 1);
+  }
+  componentWillLoad() {
+    this.updateColspan();
+  }
+  render() {
+    return (index.h(index.Host, { role: "cell", "menu-open": this.isMenuOpen }, index.h("slot", null), this.showMenu && (index.h("div", { class: "cell--menu-container prevent-expand" }, index.h("z-button", { variant: index$1.ButtonVariant.TERTIARY, icon: "contextual-menu", size: index$1.ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), index.h("z-popover", { ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open) }, index.h("slot", { name: "contextual-menu" }))))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "colspan": ["updateColspan"]
+  }; }
+};
+ZTd.style = stylesCss;
+
+exports.ZTd = ZTd;

package/dist/cjs/index-ccadf53b.js

@@ -0,0 +1,34 @@
+'use strict';
+
+const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-28bcd719.js');
+
+const stylesCss = ":host{display:table-cell;border-bottom:var(--border-size-small) solid var(--bg-grey-200);background-color:var(--color-white);font-family:var(--dashboard-font);font-weight:var(--font-rg)}:host>.button-container{display:none}:host:hover>.button-container{display:initial}.button-container{position:absolute;z-index:5;top:8px;right:8px}.button-content{position:relative}.contextual-menu-container{position:absolute;top:calc(100% - var(--space-unit));right:0;display:none}.button-container.visible,.contextual-menu-container.visible{display:initial}:host([padding=\"x-small\"]){padding:calc(var(--space-unit) * 0.5)}:host([padding=\"small\"]){padding:calc(var(--space-unit))}:host([padding=\"medium\"]){padding:calc(var(--space-unit) * 2)}:host([padding=\"large\"]){padding:calc(var(--space-unit) * 2.5)}:host([padding=\"special\"]){padding:0}";
+
+const ZTableCell = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Set padding size of cell, if special 0px padding will be set */
+    this.padding = "medium";
+    this.isMenuOpened = false;
+  }
+  handleMenu() {
+    this.isMenuOpened = !this.isMenuOpened;
+  }
+  componentWillRender() {
+    this.host.setAttribute("role", "cell");
+  }
+  render() {
+    return (index.h(index.Host, null, this.showButton && (index.h("div", { class: {
+        "button-container": true,
+        "visible": this.isMenuOpened,
+      } }, index.h("div", { class: "button-content" }, index.h("z-button", { icon: "contextual-menu", variant: index$1.ButtonVariant.TERTIARY, size: index$1.ButtonSize.X_SMALL, onClick: () => this.handleMenu() }), index.h("div", { class: {
+        "contextual-menu-container": true,
+        "visible": this.isMenuOpened,
+      } }, index.h("slot", { name: "contextual-menu" }))))), index.h("slot", null)));
+  }
+  get host() { return index.getElement(this); }
+};
+ZTableCell.style = stylesCss;
+
+exports.ZTableCell = ZTableCell;

package/dist/cjs/index-d308b5b5.js

@@ -0,0 +1,41 @@
+'use strict';
+
+const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-28bcd719.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) {
+    index.registerInstance(this, hostRef);
+    this.expand = index.createEvent(this, "expand", 7);
+    /** Table row expanded type */
+    this.expandedType = index$1.ZTableRowExpandedType.NONE;
+    this.expanded = false;
+  }
+  emitOnExpand() {
+    this.expand.emit({ expanded: this.expanded });
+  }
+  handleExpand() {
+    this.expanded = !this.expanded;
+    this.emitOnExpand();
+  }
+  renderExpandButton() {
+    if (this.expandedType == index$1.ZTableRowExpandedType.EXPANDABLE) {
+      return (index.h("z-table-cell", { style: { borderRight: "none" } }, index.h("z-icon", { name: this.expanded ? "minus-circled" : "plus-circled" })));
+    }
+    return (index.h("z-table-cell", { style: { borderRight: "none" } }, index.h("div", { class: "z-icon-placeholder" })));
+  }
+  render() {
+    return (index.h(index.Host, { role: "row", expanded: this.expanded, onClick: (event) => {
+        const preventExpand = event.target.classList.contains("prevent-expand");
+        const isExpandable = this.expandedType === index$1.ZTableRowExpandedType.EXPANDABLE;
+        if (isExpandable && !preventExpand) {
+          this.handleExpand();
+        }
+      } }, this.expandedType !== index$1.ZTableRowExpandedType.NONE && this.renderExpandButton(), index.h("slot", null)));
+  }
+};
+ZTableRow.style = stylesCss;
+
+exports.ZTableRow = ZTableRow;

package/dist/cjs/index-e3299e0a.js

@@ -2106,6 +2106,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './z-table-body.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'z-table-deprecated.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './z-table-deprecated.cjs.entry.js')); }).then(processMod, consoleError);
         case 'z-table-expanded-row.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2134,6 +2138,26 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './z-tag.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'z-tbody.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './z-tbody.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'z-td.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './z-td.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'z-tfoot.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './z-tfoot.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'z-th.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './z-th.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'z-thead.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './z-thead.cjs.entry.js')); }).then(processMod, consoleError);
         case 'z-toast-notification.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2154,6 +2178,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './z-tooltip.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'z-tr.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './z-tr.cjs.entry.js')); }).then(processMod, consoleError);
         case 'z-visually-hidden.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */

package/dist/cjs/index-e5daa5a5.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const index = require('./index-e3299e0a.js');
+
+const stylesCss = ":host{display:none;background-color:var(--gray50)}:host>td>div.content-container{margin-bottom:calc(var(--space-unit) / 2);box-shadow:var(--shadow-2)}";
+
+const ZTableExpandedRow = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("td", { colSpan: this.colSpan }, index.h("div", { class: "content-container" }, index.h("slot", null))));
+  }
+};
+ZTableExpandedRow.style = stylesCss;
+
+exports.ZTableExpandedRow = ZTableExpandedRow;

package/dist/cjs/index-ebbadaf8.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const index = require('./index-e3299e0a.js');
+
+const stylesCss = ".sc-z-table-footer-h{display:table-footer-group;font-family:var(--dashboard-font);font-weight:var(--font-rg)}";
+
+const ZTableFooter = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentWillRender() {
+    this.host.setAttribute("role", "rowgroup");
+  }
+  render() {
+    return index.h("slot", null);
+  }
+  get host() { return index.getElement(this); }
+};
+ZTableFooter.style = stylesCss;
+
+exports.ZTableFooter = ZTableFooter;

package/dist/cjs/index-f43320ff.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const index = require('./index-e3299e0a.js');
+
+const stylesCss = ".sc-z-table-empty-box-h{display:block;padding:calc(var(--space-unit)) calc(var(--space-unit) * 3) calc(var(--space-unit) * 3) calc(var(--space-unit) * 3);background-color:var(--bg-white)}.sc-z-table-empty-box-s>*{margin-top:var(--space-unit)}.cta.sc-z-table-empty-box{display:flex;flex-direction:row;margin-top:calc(var(--space-unit) / 2)}.cta.has-2-cta.sc-z-table-empty-box{flex-direction:column}@media only screen and (min-width: 768px){.sc-z-table-empty-box-h{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 7) calc(var(--space-unit) * 3)\n      calc(var(--space-unit) * 7)}.sc-z-table-empty-box-s>*{margin-right:calc(var(--space-unit) * 2)}.cta.sc-z-table-empty-box{margin-top:var(--space-unit)}.cta.has-2-cta.sc-z-table-empty-box{flex-direction:row}}";
+
+const ZTableEmptyBox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Sets main title message*/
+    this.message = "Siamo spiacenti, al momento non sono presenti dati da visualizzare.";
+    /** Sets message */
+    this.subtitle = "";
+  }
+  componentWillLoad() {
+    this.hasCta1Slot = !!this.hostElement.querySelector('[slot="cta1"]');
+    this.hasCta2Slot = !!this.hostElement.querySelector('[slot="cta2"]');
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("span", { class: "body-3-sb" }, this.message), index.h("br", null), !!this.subtitle && index.h("span", { class: "body-4" }, this.subtitle), (!!this.hasCta1Slot || !!this.hasCta2Slot) && (index.h("div", { class: {
+        "cta": true,
+        "has-2-cta": !!this.hasCta1Slot && !!this.hasCta2Slot,
+      } }, index.h("slot", { name: "cta1" }), index.h("slot", { name: "cta2" })))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+ZTableEmptyBox.style = stylesCss;
+
+exports.ZTableEmptyBox = ZTableEmptyBox;