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

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 };

package/dist/esm/index-272fc060.js

@@ -0,0 +1,32 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { B as ButtonVariant, d as ButtonSize } from './index-9c5d63ea.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) {
+    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 (h(Host, null, this.showButton && (h("div", { class: {
+        "button-container": true,
+        "visible": this.isMenuOpened,
+      } }, h("div", { class: "button-content" }, h("z-button", { icon: "contextual-menu", variant: ButtonVariant.TERTIARY, size: ButtonSize.X_SMALL, onClick: () => this.handleMenu() }), h("div", { class: {
+        "contextual-menu-container": true,
+        "visible": this.isMenuOpened,
+      } }, h("slot", { name: "contextual-menu" }))))), h("slot", null)));
+  }
+  get host() { return getElement(this); }
+};
+ZTableCell.style = stylesCss;
+
+export { ZTableCell as Z };

package/dist/esm/index-2c800f19.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, h, g as getElement } from './index-a2ca4b97.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) {
+    registerInstance(this, hostRef);
+  }
+  componentWillRender() {
+    this.host.setAttribute("role", "rowgroup");
+    Array.from(this.host.children).forEach((child, index) => child.setAttribute("aria-rowindex", `${index}`));
+  }
+  render() {
+    return h("slot", null);
+  }
+  get host() { return getElement(this); }
+};
+ZTableBody.style = stylesCss;
+
+export { ZTableBody as Z };

package/dist/esm/index-2cdac489.js

@@ -0,0 +1,27 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-a2ca4b97.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) {
+    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 (h(Host, null, h("span", { class: "body-3-sb" }, this.message), h("br", null), !!this.subtitle && h("span", { class: "body-4" }, this.subtitle), (!!this.hasCta1Slot || !!this.hasCta2Slot) && (h("div", { class: {
+        "cta": true,
+        "has-2-cta": !!this.hasCta1Slot && !!this.hasCta2Slot,
+      } }, h("slot", { name: "cta1" }), h("slot", { name: "cta2" })))));
+  }
+  get hostElement() { return getElement(this); }
+};
+ZTableEmptyBox.style = stylesCss;
+
+export { ZTableEmptyBox as Z };

package/dist/esm/index-6d83248c.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, H as Host } from './index-a2ca4b97.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) {
+    registerInstance(this, hostRef);
+    /**
+     * 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)));
+  }
+};
+ZThead.style = stylesCss;
+
+export { ZThead as Z };

package/dist/esm/index-77b7d7ae.js

@@ -0,0 +1,47 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { B as ButtonVariant, e as ControlSize } from './index-9c5d63ea.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) {
+    registerInstance(this, hostRef);
+    this.colspanChange = 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 (h(Host, { role: "cell", "menu-open": this.isMenuOpen }, h("slot", null), this.showMenu && (h("div", { class: "cell--menu-container prevent-expand" }, h("z-button", { variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open) }, h("slot", { name: "contextual-menu" }))))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "colspan": ["updateColspan"]
+  }; }
+};
+ZTd.style = stylesCss;
+
+export { ZTd as Z };

package/dist/esm/index-83736b34.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h } from './index-a2ca4b97.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) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("td", { colSpan: this.colSpan }, h("div", { class: "content-container" }, h("slot", null))));
+  }
+};
+ZTableExpandedRow.style = stylesCss;
+
+export { ZTableExpandedRow as Z };

package/dist/esm/index-8c7b48bc.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, H as Host } from './index-a2ca4b97.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) {
+    registerInstance(this, hostRef);
+    /**
+     * 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)));
+  }
+};
+ZTfoot.style = stylesCss;
+
+export { ZTfoot as Z };

package/dist/esm/{index-c53ca6bc.js → index-9c5d63ea.js}

@@ -134,7 +134,6 @@ var SortDirection;
 (function (SortDirection) {
   SortDirection["ASC"] = "asc";
   SortDirection["DESC"] = "desc";
-  SortDirection["NONE"] = "none";
 })(SortDirection || (SortDirection = {}));
 var AvatarSize;
 (function (AvatarSize) {
@@ -149,14 +148,6 @@ var ListSize;
   ListSize["LARGE"] = "large";
   ListSize["X_LARGE"] = "x-large";
 })(ListSize || (ListSize = {}));
-var Size;
-(function (Size) {
-  Size["X_SMALL"] = "x-small";
-  Size["SMALL"] = "small";
-  Size["MEDIUM"] = "medium";
-  Size["LARGE"] = "large";
-  Size["SPECIAL"] = "special";
-})(Size || (Size = {}));
 var ExpandableListStyle;
 (function (ExpandableListStyle) {
   ExpandableListStyle["ACCORDION"] = "accordion";
@@ -334,11 +325,10 @@ var BreadcrumbHomepageVariant;
   BreadcrumbHomepageVariant["TEXT"] = "text";
   BreadcrumbHomepageVariant["ICON"] = "icon";
 })(BreadcrumbHomepageVariant || (BreadcrumbHomepageVariant = {}));
-var BookCardVariant;
-(function (BookCardVariant) {
-  BookCardVariant["EXPANDED"] = "expanded";
-  BookCardVariant["COMPACT"] = "compact";
-  BookCardVariant["SEARCH"] = "search";
-})(BookCardVariant || (BookCardVariant = {}));
+var VisibilityCondition;
+(function (VisibilityCondition) {
+  VisibilityCondition["HOVER"] = "hover";
+  VisibilityCondition["ALWAYS"] = "always";
+})(VisibilityCondition || (VisibilityCondition = {}));
 
-export { AvatarSize as A, ButtonVariant as B, CardVariant as C, DividerSize as D, ExpandableListStyle as E, ZDatePickerMode as F, ZDatePickerModeValue as G, ZDatePickerPosition as H, InputType as I, ZRangePickerMode as J, KeyboardKeyCode as K, LicenseType as L, InfoRevealPosition as M, NavigationTabsOrientation as N, OffCanvasVariant as O, PopoverPosition as P, CoverHeroVariant as Q, CoverHeroContentPosition as R, SortDirection as S, ThemeVariant as T, CarouselArrowsPosition as U, CarouselProgressMode as V, BreadcrumbPathStyle as W, BreadcrumbHomepageVariant as X, BookCardVariant as Y, ZTableRowExpandedType as Z, NavigationTabsSize as a, NavigationTabsKeyboardEvents as b, ButtonType as c, ButtonSize as d, ControlSize as e, InputStatus as f, KeyboardCode as g, DividerOrientation as h, ListSize as i, Size as j, ExpandableListButtonAlign as k, LabelPosition as l, ListDividerType as m, ListType as n, NotificationType as o, AlertType as p, Device as q, PocketStatus as r, ToastNotification as s, ToastNotificationTransition as t, ToastNotificationPosition as u, ZAriaAlertMode as v, TransitionDirection as w, ZFileUploadType as x, ZChipType as y, ZSectionTitleDividerPosition as z };
+export { AvatarSize as A, ButtonVariant as B, CardVariant as C, DividerSize as D, ExpandableListStyle as E, ZDatePickerModeValue as F, ZDatePickerPosition as G, ZRangePickerMode as H, InputType as I, InfoRevealPosition as J, KeyboardKeyCode as K, LicenseType as L, CoverHeroVariant as M, NavigationTabsOrientation as N, OffCanvasVariant as O, PopoverPosition as P, CoverHeroContentPosition as Q, CarouselArrowsPosition as R, SortDirection as S, ThemeVariant as T, CarouselProgressMode as U, BreadcrumbPathStyle as V, BreadcrumbHomepageVariant as W, VisibilityCondition as X, ZTableRowExpandedType as Z, NavigationTabsSize as a, NavigationTabsKeyboardEvents as b, ButtonType as c, ButtonSize as d, ControlSize as e, InputStatus as f, KeyboardCode as g, DividerOrientation as h, ListSize as i, ExpandableListButtonAlign as j, LabelPosition as k, ListDividerType as l, ListType as m, NotificationType as n, AlertType as o, Device as p, PocketStatus as q, ToastNotification as r, ToastNotificationTransition as s, ToastNotificationPosition as t, ZAriaAlertMode as u, TransitionDirection as v, ZFileUploadType as w, ZChipType as x, ZSectionTitleDividerPosition as y, ZDatePickerMode as z };

package/dist/esm/index-a2ca4b97.js

@@ -1912,10 +1912,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-body.entry.js').then(processMod, consoleError);
-        case 'z-book-card':
-          return import(
-            /* webpackMode: "lazy" */
-            './z-book-card.entry.js').then(processMod, consoleError);
         case 'z-breadcrumb':
           return import(
             /* webpackMode: "lazy" */
@@ -2084,6 +2080,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-table-body.entry.js').then(processMod, consoleError);
+        case 'z-table-deprecated':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-table-deprecated.entry.js').then(processMod, consoleError);
         case 'z-table-expanded-row':
           return import(
             /* webpackMode: "lazy" */
@@ -2112,6 +2112,26 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-tag.entry.js').then(processMod, consoleError);
+        case 'z-tbody':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-tbody.entry.js').then(processMod, consoleError);
+        case 'z-td':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-td.entry.js').then(processMod, consoleError);
+        case 'z-tfoot':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-tfoot.entry.js').then(processMod, consoleError);
+        case 'z-th':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-th.entry.js').then(processMod, consoleError);
+        case 'z-thead':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-thead.entry.js').then(processMod, consoleError);
         case 'z-toast-notification':
           return import(
             /* webpackMode: "lazy" */
@@ -2132,6 +2152,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-tooltip.entry.js').then(processMod, consoleError);
+        case 'z-tr':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-tr.entry.js').then(processMod, consoleError);
         case 'z-visually-hidden':
           return import(
             /* webpackMode: "lazy" */
@@ -2172,6 +2196,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-table-header.entry.js').then(processMod, consoleError);
+        case 'z-link':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-link.entry.js').then(processMod, consoleError);
         case 'z-myz-list-item':
           return import(
             /* webpackMode: "lazy" */
@@ -2180,10 +2208,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-typography.entry.js').then(processMod, consoleError);
-        case 'z-link':
-          return import(
-            /* webpackMode: "lazy" */
-            './z-link.entry.js').then(processMod, consoleError);
         case 'z-popover':
           return import(
             /* webpackMode: "lazy" */

package/dist/esm/index-a66b7e8a.js

@@ -0,0 +1,65 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { r as randomId } from './utils-d7278f26.js';
+import './index-77b7d7ae.js';
+import './index-fff6ed17.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) {
+    registerInstance(this, hostRef);
+    this.expand = 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-${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) })));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "expandable": ["updateColumns"]
+  }; }
+};
+ZTr.style = stylesCss;
+
+export { ZTr as Z };