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

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,22 +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 });
@@ -197,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("_");
     }
@@ -230,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`;
@@ -248,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";
@@ -266,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";
@@ -274,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`;
@@ -282,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";
@@ -290,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() {

package/dist/collection/deprecated/z-button-deprecated/index.js

@@ -1,17 +1,23 @@
 import { h } from "@stencil/core";
+import { ButtonVariant, ButtonType, ButtonSize } from "../../beans";
 /**
  * @slot - button label
  */
 export class ZButtonDeprecated {
   constructor() {
-    this.htmlid = undefined;
-    this.name = undefined;
+    /** HTML button disabled attribute. */
     this.disabled = false;
-    this.type = "button" /* ButtonType.BUTTON */;
-    this.variant = "primary" /* ButtonVariant.PRIMARY */;
-    this.icon = undefined;
-    this.size = "big" /* ButtonSize.BIG */;
+    /** HTML button type attribute. */
+    this.type = ButtonType.BUTTON;
+    /** Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`. */
+    this.variant = ButtonVariant.PRIMARY;
+    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    this.size = ButtonSize.BIG;
+    /** Reduce button size (deprecated).
+     * @deprecated Use `size` prop.
+     */
     this.issmall = false;
+    /** Spy to render square button. */
     this.square = false;
   }
   render() {

package/dist/collection/deprecated/z-button-filter/index.js

@@ -1,10 +1,11 @@
 import { h } from "@stencil/core";
 export class ZButtonFilter {
   constructor() {
-    this.filtername = undefined;
+    /** disable action on button */
     this.isfixed = false;
+    /** add icon to button */
     this.hasicon = true;
-    this.filterid = undefined;
+    /** reduce button size (optional) */
     this.issmall = false;
     this.handleRemovingFilterClick = this.handleRemovingFilterClick.bind(this);
   }

package/dist/collection/deprecated/z-chip-deprecated/index.js

@@ -1,9 +1,5 @@
 import { h } from "@stencil/core";
 export class ZChipDeprecated {
-  constructor() {
-    this.regulartext = undefined;
-    this.boldtext = undefined;
-  }
   renderLegacyChip() {
     return (h("div", null, h("span", { class: "boldtext" }, this.boldtext), " ", this.regulartext));
   }