@zanichelli/albe-web-components 6.1.0-a1 → 6.1.0

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

@@ -1,9 +1,13 @@
 import { h, Host } from "@stencil/core";
+import { DividerSize, DividerOrientation } from "../../beans";
 export class ZDivider {
   constructor() {
-    this.size = "small" /* DividerSize.SMALL */;
+    /** [optional] Divider size */
+    this.size = DividerSize.SMALL;
+    /** [optional] Divider color */
     this.color = "gray200";
-    this.orientation = "horizontal" /* DividerOrientation.HORIZONTAL */;
+    /** [optional] Divider orintation */
+    this.orientation = DividerOrientation.HORIZONTAL;
   }
   render() {
     return (h(Host, { class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));

package/dist/collection/components/z-info-reveal/index.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { InfoRevealPosition } from "../../beans";
 /**
  * Info reveal component.
  *
@@ -11,10 +12,13 @@ import { h, Host } from "@stencil/core";
  */
 export class ZInfoReveal {
   constructor() {
+    /** Name of the icon for the open button */
     this.icon = "informationsource";
-    this.position = "bottom_right" /* InfoRevealPosition.BOTTOM_RIGHT */;
-    this.label = undefined;
+    /** Info reveal's position */
+    this.position = InfoRevealPosition.BOTTOM_RIGHT;
+    /** Whether the info panel is open. */
     this.open = false;
+    /** Current index for the info queue. */
     this.currentIndex = null;
   }
   watchItems() {

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

@@ -1,12 +1,20 @@
 import { h, Host } from "@stencil/core";
+import { OffCanvasVariant, TransitionDirection } from "../../beans";
 /**
  * @slot canvasContent - set the content of the canvas
  */
 export class ZOffcanvas {
   constructor() {
-    this.variant = "pushcontent" /* OffCanvasVariant.PUSHCONTENT */;
+    /**
+     * Offcanvas variant.
+     * Can be one of "overlay", "pushcontent"
+     * Default variant: pushcontent
+     */
+    this.variant = OffCanvasVariant.PUSHCONTENT;
+    /** open component. Default: false */
     this.open = false;
-    this.transitiondirection = "left" /* TransitionDirection.LEFT */;
+    /** open content transitioning in a specified direction left | right. Default: left */
+    this.transitiondirection = TransitionDirection.LEFT;
   }
   componentWillLoad() {
     this.handleOpenStatus();
@@ -19,7 +27,7 @@ export class ZOffcanvas {
     if (this.open) {
       this.hostElement.style.display = "flex";
     }
-    else if (this.variant === "pushcontent" /* OffCanvasVariant.PUSHCONTENT */) {
+    else if (this.variant === OffCanvasVariant.PUSHCONTENT) {
       this.hostElement.style.display = "none";
       document.body.style.overflowX = "hidden";
     }
@@ -28,7 +36,7 @@ export class ZOffcanvas {
     if (this.hostElement.hasAttribute("open")) {
       this.hostElement.querySelector(`.canvas-content`).focus();
     }
-    else if (this.variant === "overlay" /* OffCanvasVariant.OVERLAY */) {
+    else if (this.variant === OffCanvasVariant.OVERLAY) {
       this.hostElement.style.display = "none";
       document.body.style.overflowX = "initial";
     }

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

@@ -1,20 +1,28 @@
 import { h, Host } from "@stencil/core";
+import { InputType } from "../../beans";
 /**
  * Pagination bar component.
  */
 export class ZPagination {
   constructor() {
-    this.label = undefined;
+    /** Enable navigation arrows. */
     this.navArrows = true;
-    this.totalPages = undefined;
+    /** Number of pages to skip. */
     this.skip = 0;
+    /** Enable buttons to go to the first and last pages. */
     this.edges = false;
-    this.split = undefined;
-    this.visiblePages = undefined;
+    /** Current page. */
     this.currentPage = 1;
-    this.goToPage = undefined;
+    /**
+     * Internal visible pages variable.
+     * Needed to better handle conflicting props like `visiblePages` and `split`.
+     * This state will change based on props values and validation,
+     * keeping original `visiblePages` value intact.
+     */
     this._visiblePages = this.visiblePages;
+    /** Used to hides/change some functionalities on smaller screen sizes */
     this.isMobile = false;
+    /** Value of the go to page input */
     this.goToPageValue = null;
   }
   /**
@@ -179,7 +187,7 @@ export class ZPagination {
         pagesChunks.map((chunk) => h("div", { class: "pages-chunk" }, chunk.map((page) => this.renderPage(page)))))), this.goToPage && (h("form", { class: "mobile-go-to-page", onSubmit: (ev) => {
           ev.preventDefault();
           this.selectPage(this.goToPageValue);
-        } }, h("z-input", { class: "go-to-page-input", type: "number" /* InputType.NUMBER */, min: 1, max: this.totalPages, message: false, onInput: (ev) => {
+        } }, h("z-input", { class: "go-to-page-input", type: InputType.NUMBER, min: 1, max: this.totalPages, message: false, onInput: (ev) => {
           this.goToPageValue = ev.target.value;
         }, placeholder: this.currentPage.toString(), hasclearicon: false }), h("span", null, `/${this.totalPages}`))), this.renderForwardButton()),
     ];
@@ -198,7 +206,7 @@ export class ZPagination {
     if (this.isMobile) {
       return h(Host, null, this.renderMobile());
     }
-    return (h(Host, null, h("div", { class: "pagination-bar" }, this.label && h("span", { class: "page-label body-1-sb" }, this.label), this.edges && (h("button", { class: "pagination-button", type: "button", title: "Vai alla pagina 1", disabled: this.currentPage === 1, onClick: () => this.selectPage(1) }, "Pagina 1")), this.skip < this.totalPages && this.skip > 1 && (h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage - this.skip}`, disabled: this.currentPage <= this.skip, onClick: () => this.selectPage(this.currentPage - this.skip) }, "-", this.skip)), this.navArrows && this.renderBackButton(), h("div", { class: "pages-container", role: "navigation", tabIndex: -1 }, this.split ? this.renderSplitPages() : this.renderPages()), this.navArrows && this.renderForwardButton(), this.skip < this.totalPages && this.skip > 1 && (h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage + this.skip}`, disabled: this.currentPage > this.totalPages - this.skip, onClick: () => this.selectPage(this.currentPage + this.skip) }, "+", this.skip)), this.edges && (h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.totalPages}`, disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.totalPages) }, "Pagina ", this.totalPages))), this.goToPage && (h("div", { class: "go-to-page" }, h("span", { class: "label body-5-sb" }, "Vai a pagina:"), h("div", { class: "inputs" }, h("z-input", { class: "go-to-page-input", type: "number" /* InputType.NUMBER */, min: 1, max: this.totalPages, message: false, placeholder: "2", hasclearicon: false, onInput: (ev) => {
+    return (h(Host, null, h("div", { class: "pagination-bar" }, this.label && h("span", { class: "page-label body-1-sb" }, this.label), this.edges && (h("button", { class: "pagination-button", type: "button", title: "Vai alla pagina 1", disabled: this.currentPage === 1, onClick: () => this.selectPage(1) }, "Pagina 1")), this.skip < this.totalPages && this.skip > 1 && (h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage - this.skip}`, disabled: this.currentPage <= this.skip, onClick: () => this.selectPage(this.currentPage - this.skip) }, "-", this.skip)), this.navArrows && this.renderBackButton(), h("div", { class: "pages-container", role: "navigation", tabIndex: -1 }, this.split ? this.renderSplitPages() : this.renderPages()), this.navArrows && this.renderForwardButton(), this.skip < this.totalPages && this.skip > 1 && (h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage + this.skip}`, disabled: this.currentPage > this.totalPages - this.skip, onClick: () => this.selectPage(this.currentPage + this.skip) }, "+", this.skip)), this.edges && (h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.totalPages}`, disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.totalPages) }, "Pagina ", this.totalPages))), this.goToPage && (h("div", { class: "go-to-page" }, h("span", { class: "label body-5-sb" }, "Vai a pagina:"), h("div", { class: "inputs" }, h("z-input", { class: "go-to-page-input", type: InputType.NUMBER, min: 1, max: this.totalPages, message: false, placeholder: "2", hasclearicon: false, onInput: (ev) => {
         this.goToPageValue = ev.target.value;
       }, onKeyDown: (ev) => ev.key === "Enter" && this.selectPage(this.goToPageValue) }), h("z-button", { disabled: !this.goToPageValue, title: "Vai alla pagina inserita", onClick: () => this.selectPage(this.goToPageValue) }, "vai"))))));
   }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { PopoverPositions, KeyboardCode } from "../../beans";
 import { getElementTree } from "../../utils/utils";
 const DOCUMENT_ELEMENT = document.documentElement;
 function getParentElement(element) {
@@ -91,16 +92,27 @@ function computeOffset(element, targetParentOffset) {
  */
 export class ZPopover {
   constructor() {
-    this.position = "auto" /* PopoverPositions.AUTO */;
+    /** Popover position. */
+    this.position = PopoverPositions.AUTO;
+    /**
+     * The open state of the popover.
+     */
     this.open = false;
-    this.bindTo = undefined;
+    /**
+     * Whether to show popover's arrow.
+     */
     this.showArrow = false;
+    /**
+     * Whether to center the popup on the main side (according to "position").
+     */
     this.center = false;
+    /**
+     * Whether the popover should be closed when the user clicks outside of it or hit "ESC".
+     */
     this.closable = true;
-    this.currentPosition = undefined;
   }
   closePopoverWithKeyboard(e) {
-    if (this.closable && e.key === "Escape" /* KeyboardCode.ESC */) {
+    if (this.closable && e.key === KeyboardCode.ESC) {
       this.open = false;
     }
   }
@@ -116,15 +128,8 @@ export class ZPopover {
     }
   }
   validatePosition(newValue) {
-    // FIXME: avoid this check and treat "AUTO" as the default case when modifying popover position
-    if (newValue && newValue !== "auto" /* PopoverPositions.AUTO */ && newValue !== "bottom" /* PopoverPositions.BOTTOM */
-      && newValue !== "bottom_left" /* PopoverPositions.BOTTOM_LEFT */ && newValue !== "bottom_right" /* PopoverPositions.BOTTOM_RIGHT */
-      && newValue !== "left" /* PopoverPositions.LEFT */ && newValue !== "left_bottom" /* PopoverPositions.LEFT_BOTTOM */
-      && newValue !== "left_top" /* PopoverPositions.LEFT_TOP */ && newValue !== "right" /* PopoverPositions.RIGHT */
-      && newValue !== "right_bottom" /* PopoverPositions.RIGHT_BOTTOM */ && newValue !== "right_top" /* PopoverPositions.RIGHT_TOP */
-      && newValue !== "top" /* PopoverPositions.TOP */ && newValue !== "top_left" /* PopoverPositions.TOP_LEFT */
-      && newValue !== "top_right" /* PopoverPositions.TOP_RIGHT */) {
-      this.position = "auto" /* PopoverPositions.AUTO */;
+    if (newValue && !Object.values(PopoverPositions).includes(newValue)) {
+      this.position = PopoverPositions.AUTO;
     }
     this.currentPosition = this.position;
     this.positionChange.emit({ position: this.currentPosition });
@@ -190,28 +195,28 @@ export class ZPopover {
     const availableWidth = availableLeft + availableRight + boundingRect.width;
     let position = this.currentPosition;
     const positions = [];
-    if (this.position === "auto" /* PopoverPositions.AUTO */) {
+    if (this.position === PopoverPositions.AUTO) {
       /**
        * The `AUTO` position tries to place the popover in the 'safest' area,
        * where there's more space available.
        */
       if (availableLeft / availableWidth > 0.6) {
-        positions.push("left" /* PopoverPositions.LEFT */);
+        positions.push(PopoverPositions.LEFT);
       }
       else if (availableLeft / availableWidth < 0.4) {
-        positions.push("right" /* PopoverPositions.RIGHT */);
+        positions.push(PopoverPositions.RIGHT);
       }
       if (availableTop / availableHeight > 0.9) {
-        positions.unshift("top" /* PopoverPositions.TOP */);
+        positions.unshift(PopoverPositions.TOP);
       }
       else if (availableTop / availableHeight > 0.6) {
-        positions.push("top" /* PopoverPositions.TOP */);
+        positions.push(PopoverPositions.TOP);
       }
       else if (availableTop / availableHeight < 0.1) {
-        positions.unshift("bottom" /* PopoverPositions.BOTTOM */);
+        positions.unshift(PopoverPositions.BOTTOM);
       }
       else {
-        positions.push("bottom" /* PopoverPositions.BOTTOM */);
+        positions.push(PopoverPositions.BOTTOM);
       }
       position = positions.join("_");
     }
@@ -223,17 +228,17 @@ export class ZPopover {
     const offsetLeft = boundingRect.left - relativeBoundingRect.left;
     const offsetModifier = this.center ? 0.5 : 0;
     const sizeModifier = this.center ? 0.5 : 0;
-    if (position === "top" /* PopoverPositions.TOP */ || position === "top_right" /* PopoverPositions.TOP_RIGHT */) {
+    if (position === PopoverPositions.TOP || position === PopoverPositions.TOP_RIGHT) {
       style.top = "auto";
       style.right = "auto";
       style.bottom = `${offsetBottom + boundingRect.height}px`;
       style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
       style.maxHeight = `${availableTop}px`;
-      if (position === "top_right" /* PopoverPositions.TOP_RIGHT */) {
+      if (position === PopoverPositions.TOP_RIGHT) {
         style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
       }
     }
-    else if (position === "top_left" /* PopoverPositions.TOP_LEFT */) {
+    else if (position === PopoverPositions.TOP_LEFT) {
       style.top = "auto";
       style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
       style.bottom = `${offsetBottom + boundingRect.height}px`;
@@ -241,17 +246,17 @@ export class ZPopover {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableTop}px`;
     }
-    else if (position === "bottom" /* PopoverPositions.BOTTOM */ || position === "bottom_right" /* PopoverPositions.BOTTOM_RIGHT */) {
+    else if (position === PopoverPositions.BOTTOM || position === PopoverPositions.BOTTOM_RIGHT) {
       style.top = `${offsetTop + boundingRect.height}px`;
       style.right = "auto";
       style.bottom = "auto";
       style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
       style.maxHeight = `${availableBottom}px`;
-      if (position === "bottom_right" /* PopoverPositions.BOTTOM_RIGHT */) {
+      if (position === PopoverPositions.BOTTOM_RIGHT) {
         style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
       }
     }
-    else if (position === "bottom_left" /* PopoverPositions.BOTTOM_LEFT */) {
+    else if (position === PopoverPositions.BOTTOM_LEFT) {
       style.top = `${offsetTop + boundingRect.height}px`;
       style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
       style.bottom = "auto";
@@ -259,7 +264,7 @@ export class ZPopover {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableBottom}px`;
     }
-    else if (position === "right" /* PopoverPositions.RIGHT */ || position === "right_bottom" /* PopoverPositions.RIGHT_BOTTOM */) {
+    else if (position === PopoverPositions.RIGHT || position === PopoverPositions.RIGHT_BOTTOM) {
       style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
       style.right = "auto";
       style.bottom = "auto";
@@ -267,7 +272,7 @@ export class ZPopover {
       style.maxWidth = `${availableRight}px`;
       style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === "right_top" /* PopoverPositions.RIGHT_TOP */) {
+    else if (position === PopoverPositions.RIGHT_TOP) {
       style.top = "auto";
       style.right = "auto";
       style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
@@ -275,7 +280,7 @@ export class ZPopover {
       style.maxWidth = `${availableRight}px`;
       style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === "left" /* PopoverPositions.LEFT */ || position === "left_bottom" /* PopoverPositions.LEFT_BOTTOM */) {
+    else if (position === PopoverPositions.LEFT || position === PopoverPositions.LEFT_BOTTOM) {
       style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
       style.right = `${offsetRight + boundingRect.width}px`;
       style.bottom = "auto";
@@ -283,7 +288,7 @@ export class ZPopover {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === "left_top" /* PopoverPositions.LEFT_TOP */) {
+    else if (position === PopoverPositions.LEFT_TOP) {
       style.top = "auto";
       style.right = `${offsetRight + boundingRect.width}px`;
       style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;

package/dist/collection/components/z-section-title/index.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { DividerSize, ZSectionTitleDividerPosition } from "../../beans";
 /**
  * Section title component.
  * An optional secondary title can be put over the primary one.
@@ -10,14 +11,21 @@ import { h, Host } from "@stencil/core";
  */
 export class ZSectionTitle {
   constructor() {
-    this.dividerPosition = "before" /* ZSectionTitleDividerPosition.BEFORE */;
+    /**
+     * Divider position for the primary title.
+     * This prop only works if the secondary title is not set.
+     */
+    this.dividerPosition = ZSectionTitleDividerPosition.BEFORE;
+    /**
+     * Whether the primary title text is uppercase.
+     */
     this.uppercase = true;
   }
   componentWillRender() {
     this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
   }
   render() {
-    return (h(Host, null, h("slot", { name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === "before" /* ZSectionTitleDividerPosition.BEFORE */ && (h("z-divider", { size: "large" /* DividerSize.LARGE */, color: "z-section-title--divider-color" })), h("slot", { name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === "after" /* ZSectionTitleDividerPosition.AFTER */ && (h("z-divider", { size: "large" /* DividerSize.LARGE */, color: "z-section-title--divider-color" }))));
+    return (h(Host, null, h("slot", { name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
   }
   static get is() { return "z-section-title"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-skip-to-content/index.js

@@ -1,11 +1,12 @@
 import { h, Host } from "@stencil/core";
 import { getElementTree, handleKeyboardSubmit } from "../../utils/utils";
+import { ThemeVariant } from "../../beans";
 /**
  * Component short description.
  */
 export class ZSkipToContent {
   constructor() {
-    this.variant = undefined;
+    /** Array to fill link into skip-content */
     this.links = [];
     this.visible = false;
     this.visibleLink = "";
@@ -49,7 +50,7 @@ export class ZSkipToContent {
         "skip-to-content-visible": this.visible,
       } }, this.links.map((link, i) => {
       const id = `skip-to-content-${i}`;
-      return (h("z-link", { id: id, underline: true, "aria-label": link.ariaLabel || link.label, class: `body-1-sb ${id == this.visibleLink ? "link-visible" : "link-invisible"}`, href: link.href, textcolor: this.variant === "dark" /* ThemeVariant.DARK */ ? "white" : "black", onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label));
+      return (h("z-link", { id: id, underline: true, "aria-label": link.ariaLabel || link.label, class: `body-1-sb ${id == this.visibleLink ? "link-visible" : "link-invisible"}`, href: link.href, textcolor: this.variant === ThemeVariant.DARK ? "white" : "black", onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label));
     })));
   }
   static get is() { return "z-skip-to-content"; }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { ButtonSize, ButtonVariant } from "../../../beans";
 import { mobileBreakpoint } from "../../../constants/breakpoints";
 /**
  * @slot - table elements
@@ -6,20 +7,22 @@ import { mobileBreakpoint } from "../../../constants/breakpoints";
  */
 export class ZTable {
   constructor() {
-    this.lines = undefined;
+    /** Error message */
     this.errorMessage = "Siamo spiacenti, non siamo riusciti a caricare il contenuto richiesto";
+    /** Sets table with border */
     this.bordered = false;
-    this.callToActionLabel = undefined;
-    this.callToActionTwoLabel = undefined;
+    /** Sets first column sticky */
     this.columnSticky = false;
+    /** Sets empty table */
     this.empty = false;
+    /** Set error status */
     this.error = false;
-    this.errorLink = undefined;
+    /** Sets header sticky */
     this.headerSticky = false;
+    /** Set message */
     this.message = "Siamo spiacenti, al momento non sono presenti dati da visualizzare";
+    /** Set subtitle */
     this.subtitle = "";
-    this.hasTableBody = undefined;
-    this.isMobile = undefined;
   }
   handleResize() {
     this.isMobile = window.innerWidth <= mobileBreakpoint;
@@ -44,12 +47,12 @@ export class ZTable {
     return (h(Host, null, h("div", { class: tableClass }, h("slot", { name: "table-header" })), h("z-table-error", null, h("div", { class: "error-content", style: { minHeight } }, h("slot", { name: "error-image" }), h("div", { class: "text" }, h("z-body", { class: "error-message", level: 3, variant: "semibold" }, this.errorMessage), h("slot", { name: "error-action" }))))));
   }
   renderEmpty(tableClass) {
-    const buttonSize = this.isMobile ? "small" /* ButtonSize.SMALL */ : "big" /* ButtonSize.BIG */;
+    const buttonSize = this.isMobile ? ButtonSize.SMALL : ButtonSize.BIG;
     const tableContentClass = `${this.hasTableBody ? "table-content" : ""}`;
     if (this.hasTableBody) {
-      return (h(Host, null, h("div", { class: tableClass }, h("slot", { name: "table-header" }), h("div", { class: tableContentClass }, h("slot", { name: "table-body" }), h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle }, !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: "tertiary" /* ButtonVariant.TERTIARY */, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)), !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: "tertiary" /* ButtonVariant.TERTIARY */, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))))));
+      return (h(Host, null, h("div", { class: tableClass }, h("slot", { name: "table-header" }), h("div", { class: tableContentClass }, h("slot", { name: "table-body" }), h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle }, !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: ButtonVariant.TERTIARY, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)), !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: ButtonVariant.TERTIARY, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))))));
     }
-    return (h(Host, null, h("div", { class: tableClass }, h("slot", { name: "table-header" })), h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle }, !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: "tertiary" /* ButtonVariant.TERTIARY */, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)), !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: "tertiary" /* ButtonVariant.TERTIARY */, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))));
+    return (h(Host, null, h("div", { class: tableClass }, h("slot", { name: "table-header" })), h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle }, !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: ButtonVariant.TERTIARY, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)), !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: ButtonVariant.TERTIARY, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))));
   }
   render() {
     const tableClass = `table ${this.empty ? "table-empty" : ""} ${this.bordered ? "table-bordered" : ""}

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

@@ -1,8 +1,9 @@
 import { h, Host } from "@stencil/core";
+import { ButtonVariant, ButtonSize, Size } from "../../../beans";
 export class ZTableCell {
   constructor() {
-    this.showButton = undefined;
-    this.padding = "medium" /* Size.MEDIUM */;
+    /** Set padding size of cell, if special 0px padding will be set */
+    this.padding = Size.MEDIUM;
     this.isMenuOpened = false;
   }
   handleMenu() {
@@ -15,7 +16,7 @@ export class ZTableCell {
     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: "tertiary" /* ButtonVariant.TERTIARY */, size: "x-small" /* ButtonSize.X_SMALL */, onClick: () => this.handleMenu() }), h("div", { class: {
+      } }, 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)));

package/dist/collection/components/z-table/z-table-empty-box/index.js

@@ -1,7 +1,9 @@
 import { h, Host } from "@stencil/core";
 export class ZTableEmptyBox {
   constructor() {
+    /** Sets main title message*/
     this.message = "Siamo spiacenti, al momento non sono presenti dati da visualizzare.";
+    /** Sets message */
     this.subtitle = "";
   }
   componentWillLoad() {

package/dist/collection/components/z-table/z-table-expanded-row/index.js

@@ -1,8 +1,5 @@
 import { h } from "@stencil/core";
 export class ZTableExpandedRow {
-  constructor() {
-    this.colSpan = undefined;
-  }
   render() {
     return (h("td", { colSpan: this.colSpan }, h("div", { class: "content-container" }, h("slot", null))));
   }

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

@@ -1,13 +1,14 @@
 import { h, Host } from "@stencil/core";
+import { ButtonSize, ButtonVariant, PopoverPositions, Size, SortDirection } from "../../../beans";
 import { getElementTree } from "../../../utils/utils";
 export class ZTableHeader {
   constructor() {
-    this.columnId = undefined;
-    this.padding = "medium" /* Size.MEDIUM */;
-    this.sortable = undefined;
-    this.showButton = undefined;
-    this.defaultSortDirection = "asc" /* SortDirection.ASC */;
-    this.sortDirection = "none" /* SortDirection.NONE */;
+    /** Set padding size of cell, if special 0px padding will be set */
+    this.padding = Size.MEDIUM;
+    /** [Optional] Default sort order */
+    this.defaultSortDirection = SortDirection.ASC;
+    /** Sort direction */
+    this.sortDirection = SortDirection.NONE;
     this.emitOnSort = this.emitOnSort.bind(this);
   }
   emitOnSort() {
@@ -22,14 +23,14 @@ export class ZTableHeader {
     }
     this.sortDirection = (() => {
       switch (this.sortDirection) {
-        case "asc" /* SortDirection.ASC */:
-          return "desc" /* SortDirection.DESC */;
-        case "desc" /* SortDirection.DESC */:
-          return "asc" /* SortDirection.ASC */;
-        case "none" /* SortDirection.NONE */:
+        case SortDirection.ASC:
+          return SortDirection.DESC;
+        case SortDirection.DESC:
+          return SortDirection.ASC;
+        case SortDirection.NONE:
           return this.defaultSortDirection;
         default:
-          return "none" /* SortDirection.NONE */;
+          return SortDirection.NONE;
       }
     })();
     this.emitOnSort();
@@ -53,7 +54,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 = "none" /* SortDirection.NONE */;
+      this.sortDirection = SortDirection.NONE;
     }
   }
   componentWillRender() {
@@ -62,7 +63,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 !== "none" /* SortDirection.NONE */ && (h("z-icon", { name: this.sortDirection === "asc" /* 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: "tertiary" /* ButtonVariant.TERTIARY */, size: "x-small" /* ButtonSize.X_SMALL */, onClick: () => this.handleMenuClick() }), h("z-popover", { ref: (el) => (this.popover = el), position: "bottom" /* PopoverPositions.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 !== 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: PopoverPositions.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"; }

package/dist/collection/components/z-table/z-table-header-row/index.js

@@ -1,8 +1,5 @@
 import { Host, h } from "@stencil/core";
 export class ZTableHeaderRow {
-  constructor() {
-    this.expandable = undefined;
-  }
   renderExpandHeader() {
     return h("z-table-header", null);
   }

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

@@ -1,7 +1,9 @@
 import { Host, h } from "@stencil/core";
+import { ZTableRowExpandedType } from "../../../beans";
 export class ZTableRow {
   constructor() {
-    this.expandedType = "none" /* ZTableRowExpandedType.NONE */;
+    /** Table row expanded type */
+    this.expandedType = ZTableRowExpandedType.NONE;
     this.expanded = false;
   }
   emitOnExpand() {
@@ -12,7 +14,7 @@ export class ZTableRow {
     this.emitOnExpand();
   }
   renderExpandButton() {
-    if (this.expandedType == "expandable" /* ZTableRowExpandedType.EXPANDABLE */) {
+    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" })));
@@ -20,11 +22,11 @@ export class ZTableRow {
   render() {
     return (h(Host, { role: "row", expanded: this.expanded, onClick: (event) => {
         const contextualMenuClick = event.target.nodeName === "Z-CONTEXTUAL-MENU";
-        const isExpandable = this.expandedType === "expandable" /* ZTableRowExpandedType.EXPANDABLE */;
+        const isExpandable = this.expandedType === ZTableRowExpandedType.EXPANDABLE;
         if (isExpandable && !contextualMenuClick) {
           this.handleExpand();
         }
-      } }, this.expandedType !== "none" /* ZTableRowExpandedType.NONE */ && this.renderExpandButton(), h("slot", null)));
+      } }, this.expandedType !== ZTableRowExpandedType.NONE && this.renderExpandButton(), h("slot", null)));
   }
   static get is() { return "z-table-row"; }
   static get originalStyleUrls() {

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

@@ -6,10 +6,6 @@ import { h, Host } from "@stencil/core";
  * @cssprop --z-tag-bg - background color of the z-tag.
  */
 export class ZTag {
-  constructor() {
-    this.icon = undefined;
-    this.expandable = undefined;
-  }
   render() {
     return (h(Host, { class: {
         "body-5-sb": true,

package/dist/collection/deprecated/pagination/z-pagination-bar/index.js

@@ -3,14 +3,14 @@ import Hammer from "hammerjs";
 import { handleKeyboardSubmit } from "../../../utils/utils";
 export class ZPaginationBar {
   constructor() {
-    this.velocityConstantMultiplier = 2;
-    this.pages = undefined;
-    this.visiblepages = undefined;
+    /** current displayed page (mutable) */
     this.currentpage = 1;
+    /** initial page (mutable) */
     this.startpage = 1;
-    this.historyraw = undefined;
+    /** array of history of visited pages (mutable, optional) */
     this.listhistoryrow = [];
     this.currentPages = [];
+    this.velocityConstantMultiplier = 2;
     this.navigateRight = this.navigateRight.bind(this);
     this.navigateLeft = this.navigateLeft.bind(this);
     this.emitGoToPage = this.emitGoToPage.bind(this);

package/dist/collection/deprecated/pagination/z-pagination-page/index.js

@@ -1,11 +1,13 @@
 import { h } from "@stencil/core";
 export class ZPaginationPage {
   constructor() {
-    this.pageid = undefined;
-    this.value = undefined;
+    /** selected status flag */
     this.isselected = false;
+    /** disabled status flag */
     this.isdisabled = false;
+    /** visited status flag */
     this.isvisited = false;
+    /** aria-label string */
     this.ariaLabel = "";
   }
   render() {