@zanichelli/albe-web-components 6.3.2 → 6.3.3

package/dist/cjs/z-toggle-button.cjs.entry.js

@@ -10,9 +10,9 @@ const ZToggleButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.toggleClick = index.createEvent(this, "toggleClick", 7);
-    this.label = undefined;
+    /** disabled status flag (optional) */
     this.isdisabled = false;
-    this.avoidclick = undefined;
+    /** open by default (optional) */
     this.opened = false;
   }
   emitToggleClick() {

package/dist/cjs/z-toggle-switch.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const utils = require('./utils-73ead59e.js');
-const index$1 = require('./index-f08f7171.js');
+const utils = require('./utils-600bad93.js');
+const index$1 = require('./index-fa110f37.js');
 require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ".sc-z-toggle-switch-h{position:relative;display:inline-flex;font-family:var(--font-family-sans);font-weight:var(--font-rg)}label.sc-z-toggle-switch{display:flex;flex-direction:row;align-items:center;cursor:pointer}label.disabled.sc-z-toggle-switch{cursor:default}label.right.sc-z-toggle-switch{flex-direction:row-reverse}label.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{color:var(--color-text01);letter-spacing:0}label.left.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-right:var(--space-unit)}label.right.sc-z-toggle-switch>span.sc-z-toggle-switch:first-child{margin-left:var(--space-unit)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch{position:relative;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 4);height:18px;align-items:center;background-color:var(--gray500);border-radius:var(--space-unit);color:var(--gray500);cursor:pointer}label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch,label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch{background-color:var(--color-disabled01);cursor:default}label.sc-z-toggle-switch>span.container.checked.disabled.sc-z-toggle-switch>span.circle.sc-z-toggle-switch>z-icon.sc-z-toggle-switch{fill:var(--color-disabled01)}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch{background-color:var(--color-primary01);fill:var(--color-primary01)}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled){box-shadow:var(--shadow-focus-primary);outline:none}input.sc-z-toggle-switch:focus:focus-visible+label.sc-z-toggle-switch>span.container.disabled.sc-z-toggle-switch{outline:none}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch:not(.disabled):hover{background-color:var(--color-hover-primary);fill:var(--color-hover-primary)}label.sc-z-toggle-switch>span.container.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{position:absolute;top:1px;left:1px;display:flex;width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);align-items:center;justify-content:center;margin:0;background-color:var(--color-white);border-radius:7px;box-shadow:var(--shadow-1);transition:transform 0.3s ease}label.sc-z-toggle-switch>span.container.checked.sc-z-toggle-switch>span.circle.sc-z-toggle-switch{transform:translateX(calc(100% - 2px))}input[type=\"checkbox\"].sc-z-toggle-switch{position:absolute;z-index:-1;opacity:0;pointer-events:none}";
@@ -13,9 +13,13 @@ const ZToggleSwitch = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.toggleClick = index.createEvent(this, "toggleClick", 7);
+    /** Disabled flag */
     this.disabled = false;
+    /** Label position */
     this.labelPosition = index$1.LabelPosition.LEFT;
+    /** Checked state */
     this.checked = false;
+    /** HTML id attribute to set to the internal checkbox */
     this.htmlid = `toggle-switch-id-${utils.randomId()}`;
   }
   emitToggleClick() {

package/dist/cjs/z-tooltip.cjs.entry.js

@@ -3,17 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-f08f7171.js');
+const index$1 = require('./index-fa110f37.js');
 
 const stylesCss = ":host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-text01);--z-tooltip-shadow-filter:drop-shadow(0 1px 2px var(--shadow-color-base))}:host([dark]) z-popover{--z-popover-theme--surface:var(--color-surface05)}z-popover{--z-popover-padding:var(--space-unit);--z-popover-theme--surface:var(--z-tooltip-theme--surface);--z-popover-theme--text:var(--z-tooltip-theme--text);--z-popover-shadow-filter:var(--z-tooltip-shadow-filter)}";
 
 const ZTooltip = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.position = index$1.PopoverPositions.AUTO;
+    /** Tooltip position. */
+    this.position = index$1.PopoverPosition.AUTO;
+    /** Enable tooltip dark mode. */
     this.dark = false;
+    /**
+     * The open state of the tooltip.
+     */
     this.open = false;
-    this.bindTo = undefined;
   }
   onPopoverOpenChange() {
     this.open = this.popover.open;

package/dist/cjs/z-user-dropdown.cjs.entry.js

@@ -12,13 +12,9 @@ const ZUserDropdown = class {
     index.registerInstance(this, hostRef);
     this.userButtonClick = index.createEvent(this, "userButtonClick", 7);
     this.dropdownMenuLinkClick = index.createEvent(this, "dropdownMenuLinkClick", 7);
-    this.logged = undefined;
-    this.userFullName = undefined;
-    this.userEmail = undefined;
-    this.menuContent = undefined;
+    /** if inner components colors are inverted, or not, default false */
     this.useInverseColors = false;
     this.isMenuOpen = false;
-    this.isMobile = undefined;
     this.handleLoggedButtonClick = this.handleLoggedButtonClick.bind(this);
     this.emitDropdownMenuLinkClick = this.emitDropdownMenuLinkClick.bind(this);
   }

package/dist/collection/beans/index.js

@@ -60,55 +60,22 @@ export var InputStatus;
   InputStatus["ERROR"] = "error";
   InputStatus["WARNING"] = "warning";
 })(InputStatus || (InputStatus = {}));
-export var PopoverPositions;
-(function (PopoverPositions) {
-  PopoverPositions["AUTO"] = "auto";
-  PopoverPositions["TOP"] = "top";
-  PopoverPositions["RIGHT"] = "right";
-  PopoverPositions["BOTTOM"] = "bottom";
-  PopoverPositions["LEFT"] = "left";
-  PopoverPositions["TOP_RIGHT"] = "top_right";
-  PopoverPositions["TOP_LEFT"] = "top_left";
-  PopoverPositions["BOTTOM_RIGHT"] = "bottom_right";
-  PopoverPositions["BOTTOM_LEFT"] = "bottom_left";
-  PopoverPositions["RIGHT_TOP"] = "right_top";
-  PopoverPositions["RIGHT_BOTTOM"] = "right_bottom";
-  PopoverPositions["LEFT_TOP"] = "left_top";
-  PopoverPositions["LEFT_BOTTOM"] = "left_bottom";
-})(PopoverPositions || (PopoverPositions = {}));
 export var PopoverPosition;
 (function (PopoverPosition) {
-  PopoverPosition["AFTER_DOWN"] = "after-down";
-  PopoverPosition["AFTER_CENTER"] = "after-center";
-  PopoverPosition["AFTER_UP"] = "after-up";
-  PopoverPosition["BELOW_RIGHT"] = "below-right";
-  PopoverPosition["BELOW_CENTER"] = "below-center";
-  PopoverPosition["BELOW_LEFT"] = "below-left";
-  PopoverPosition["BEFORE_DOWN"] = "before-down";
-  PopoverPosition["BEFORE_CENTER"] = "before-center";
-  PopoverPosition["BEFORE_UP"] = "before-up";
-  PopoverPosition["ABOVE_RIGHT"] = "above-right";
-  PopoverPosition["ABOVE_CENTER"] = "above-center";
-  PopoverPosition["ABOVE_LEFT"] = "above-left";
+  PopoverPosition["AUTO"] = "auto";
+  PopoverPosition["TOP"] = "top";
+  PopoverPosition["RIGHT"] = "right";
+  PopoverPosition["BOTTOM"] = "bottom";
+  PopoverPosition["LEFT"] = "left";
+  PopoverPosition["TOP_RIGHT"] = "top_right";
+  PopoverPosition["TOP_LEFT"] = "top_left";
+  PopoverPosition["BOTTOM_RIGHT"] = "bottom_right";
+  PopoverPosition["BOTTOM_LEFT"] = "bottom_left";
+  PopoverPosition["RIGHT_TOP"] = "right_top";
+  PopoverPosition["RIGHT_BOTTOM"] = "right_bottom";
+  PopoverPosition["LEFT_TOP"] = "left_top";
+  PopoverPosition["LEFT_BOTTOM"] = "left_bottom";
 })(PopoverPosition || (PopoverPosition = {}));
-export var PopoverBorderRadius;
-(function (PopoverBorderRadius) {
-  PopoverBorderRadius["NONE"] = "none";
-  PopoverBorderRadius["SMALL"] = "small";
-  PopoverBorderRadius["MEDIUM"] = "medium";
-})(PopoverBorderRadius || (PopoverBorderRadius = {}));
-export var PopoverShadow;
-(function (PopoverShadow) {
-  PopoverShadow["SHADOW_1"] = "shadow-1";
-  PopoverShadow["SHADOW_2"] = "shadow-2";
-  PopoverShadow["SHADOW_3"] = "shadow-3";
-  PopoverShadow["SHADOW_4"] = "shadow-4";
-  PopoverShadow["SHADOW_6"] = "shadow-6";
-  PopoverShadow["SHADOW_8"] = "shadow-8";
-  PopoverShadow["SHADOW_12"] = "shadow-12";
-  PopoverShadow["SHADOW_16"] = "shadow-16";
-  PopoverShadow["SHADOW_24"] = "shadow-24";
-})(PopoverShadow || (PopoverShadow = {}));
 export var KeyboardKeyCode;
 (function (KeyboardKeyCode) {
   KeyboardKeyCode[KeyboardKeyCode["TAB"] = 9] = "TAB";
@@ -313,14 +280,6 @@ export var ZRangePickerMode;
   ZRangePickerMode["DATE"] = "date";
   ZRangePickerMode["DATE_TIME"] = "date-time";
 })(ZRangePickerMode || (ZRangePickerMode = {}));
-export var StatusTagStatus;
-(function (StatusTagStatus) {
-  StatusTagStatus["WARNING"] = "warning";
-  StatusTagStatus["ERROR"] = "error";
-  StatusTagStatus["SUCCESS"] = "success";
-  StatusTagStatus["NEUTRAL"] = "neutral";
-  StatusTagStatus["DEFAULT"] = "default";
-})(StatusTagStatus || (StatusTagStatus = {}));
 export var InfoRevealPosition;
 (function (InfoRevealPosition) {
   InfoRevealPosition["TOP_RIGHT"] = "top_right";

package/dist/collection/collection-manifest.json

@@ -11,10 +11,6 @@
     "./components/file-upload/z-dragdrop-area/index.js",
     "./components/file-upload/z-file/index.js",
     "./components/file-upload/z-file-upload/index.js",
-    "./components/footer/z-footer/index.js",
-    "./components/footer/z-footer-link/index.js",
-    "./components/footer/z-footer-section/index.js",
-    "./components/footer/z-footer-social/index.js",
     "./components/icons/z-icon/index.js",
     "./components/icons/z-icon-package/index.js",
     "./components/indicators/z-stepper/index.js",
@@ -41,8 +37,6 @@
     "./components/navigation/z-menu-dropdown/index.js",
     "./components/navigation/z-menu-section/index.js",
     "./components/navigation/z-user-dropdown/index.js",
-    "./components/notification/z-candybar/index.js",
-    "./components/notification/z-cookiebar/index.js",
     "./components/notification/z-info-box/index.js",
     "./components/notification/z-notification/index.js",
     "./components/notification/z-toast-notification/index.js",
@@ -78,16 +72,6 @@
     "./components/z-table/z-table-sticky-footer/index.js",
     "./components/z-tag/index.js",
     "./components/z-visually-hidden/index.js",
-    "./deprecated/pagination/z-pagination-bar/index.js",
-    "./deprecated/pagination/z-pagination-page/index.js",
-    "./deprecated/z-button-deprecated/index.js",
-    "./deprecated/z-button-filter/index.js",
-    "./deprecated/z-chip-deprecated/index.js",
-    "./deprecated/z-input-deprecated/index.js",
-    "./deprecated/z-input-label/index.js",
-    "./deprecated/z-popover-deprecated/index.js",
-    "./deprecated/z-status-tag/index.js",
-    "./deprecated/z-tooltip-deprecated/index.js",
     "./snowflakes/myz/card/z-myz-card/index.js",
     "./snowflakes/myz/card/z-myz-card-alert/index.js",
     "./snowflakes/myz/card/z-myz-card-body/index.js",
@@ -106,14 +90,13 @@
     "./snowflakes/myz/pocket/z-pocket-body/index.js",
     "./snowflakes/myz/pocket/z-pocket-header/index.js",
     "./snowflakes/myz/pocket/z-pocket-message/index.js",
-    "./snowflakes/myz/topbar/index.js",
     "./snowflakes/myz/z-alert/index.js",
     "./snowflakes/myz/z-otp/index.js",
     "./snowflakes/myz/z-slideshow/index.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.19.2",
+    "version": "2.18.1",
     "typescriptVersion": "4.7.4"
   },
   "collections": [],

package/dist/collection/components/buttons/z-button/index.js

@@ -5,15 +5,15 @@ import { ButtonVariant, ButtonType, ButtonSize } from "../../../beans";
  */
 export class ZButton {
   constructor() {
+    /** defines a string value that labels an interactive element, used for accessibility. */
     this.ariaLabel = "";
-    this.href = undefined;
-    this.target = undefined;
-    this.htmlid = undefined;
-    this.name = undefined;
+    /** HTML button disabled attribute. */
     this.disabled = false;
+    /** HTML button type attribute. */
     this.type = ButtonType.BUTTON;
+    /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
     this.variant = ButtonVariant.PRIMARY;
-    this.icon = undefined;
+    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
     this.size = ButtonSize.BIG;
   }
   getAttributes() {

package/dist/collection/components/buttons/z-button-sort/index.js

@@ -2,13 +2,13 @@ import { h } from "@stencil/core";
 import { tabletBreakpoint } from "../../../constants/breakpoints";
 export class ZButtonSort {
   constructor() {
-    this.buttonid = undefined;
-    this.label = undefined;
-    this.desclabel = undefined;
-    this.counter = undefined;
+    /** sort label content (ascending) (optional) */
     this.sortlabelasc = "A-Z";
+    /** sort label content (descending) (optional) */
     this.sortlabeldesc = "Z-A";
+    /** selected flag (optional) */
     this.isselected = false;
+    /** sortable flag (optional) */
     this.sortasc = true;
     this.allowTooltip = false;
   }

package/dist/collection/components/buttons/z-chip/index.js

@@ -3,9 +3,9 @@ import { Device, ZChipType } from "../../../beans";
 import { getDevice, handleKeyboardSubmit } from "../../../utils/utils";
 export class ZChip {
   constructor() {
-    this.icon = undefined;
+    /** z-chip size type, can be default, medium or small */
     this.type = ZChipType.DEFAULT;
-    this.interactiveIcon = undefined;
+    /** set z-chip as disabled  */
     this.disabled = false;
   }
   emitinteractiveIconClick() {

package/dist/collection/components/buttons/z-toggle-button/index.js

@@ -1,9 +1,9 @@
 import { h } from "@stencil/core";
 export class ZToggleButton {
   constructor() {
-    this.label = undefined;
+    /** disabled status flag (optional) */
     this.isdisabled = false;
-    this.avoidclick = undefined;
+    /** open by default (optional) */
     this.opened = false;
   }
   emitToggleClick() {

package/dist/collection/components/buttons/z-toggle-switch/index.js

@@ -3,9 +3,13 @@ import { randomId } from "../../../utils/utils";
 import { LabelPosition } from "../../../beans";
 export class ZToggleSwitch {
   constructor() {
+    /** Disabled flag */
     this.disabled = false;
+    /** Label position */
     this.labelPosition = LabelPosition.LEFT;
+    /** Checked state */
     this.checked = false;
+    /** HTML id attribute to set to the internal checkbox */
     this.htmlid = `toggle-switch-id-${randomId()}`;
   }
   emitToggleClick() {

package/dist/collection/components/date-picker/z-date-picker/index.js

@@ -6,9 +6,9 @@ import { InputType, ZDatePickerMode, ZDatePickerPosition } from "../../../beans"
 import { setAriaOptions, setFlatpickrPosition, validateDate } from "../utils";
 export class ZDatePicker {
   constructor() {
-    this.datePickerId = undefined;
+    /** z-input aria label */
     this.ariaLabel = "";
-    this.label = undefined;
+    /** [Optional] datepicker mode: date, datetime, only months */
     this.mode = ZDatePickerMode.DATE;
     this.flatpickrPosition = ZDatePickerPosition.BOTTOM;
     this.inputError = false;

package/dist/collection/components/date-picker/z-range-picker/index.js

@@ -5,11 +5,7 @@ import { ZRangePickerMode, ZDatePickerPosition, InputType, InputStatus } from ".
 import { setAriaOptions, setFlatpickrPosition, validateDate } from "../utils";
 export class ZRangePicker {
   constructor() {
-    this.rangePickerId = undefined;
-    this.firstAriaLabel = undefined;
-    this.firstLabel = undefined;
-    this.secondAriaLabel = undefined;
-    this.secondLabel = undefined;
+    /** [Optional] datepicker mode: date or datetime */
     this.mode = ZRangePickerMode.DATE;
     this.flatpickrPosition = ZDatePickerPosition.BOTTOM;
     this.activeInput = "start-input";

package/dist/collection/components/file-upload/z-file/index.js

@@ -1,10 +1,8 @@
 import { h, Host } from "@stencil/core";
-import { PopoverPositions, ZChipType } from "../../../beans";
+import { PopoverPosition, ZChipType } from "../../../beans";
 import { tabletBreakpoint } from "../../../constants/breakpoints";
 export class ZFile {
   constructor() {
-    this.fileNumber = undefined;
-    this.fileName = undefined;
     this.allowPopover = false;
     this.popoverVisible = false;
   }
@@ -32,7 +30,7 @@ export class ZFile {
     return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
   }
   render() {
-    return (h(Host, null, this.allowPopover && (h("z-popover", { open: this.popoverVisible, position: PopoverPositions.AUTO, bindTo: this.chip }, h("span", { class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+    return (h(Host, null, this.allowPopover && (h("z-popover", { open: this.popoverVisible, position: PopoverPosition.AUTO, bindTo: this.chip }, h("span", { class: "body-5 tooltip-content" }, this.ellipsis.innerText))), h("z-chip", { ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: ZChipType.DEFAULT }, h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
   }
   static get is() { return "z-file"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/file-upload/z-file-upload/index.js

@@ -3,19 +3,15 @@ import { Device, DividerSize, ZFileUploadType } from "../../../beans";
 import { getDevice } from "../../../utils/utils";
 export class ZFileUpload {
   constructor() {
+    /** Prop indicating the file upload type - can be default or dragdrop */
+    this.type = ZFileUploadType.DEFAULT;
+    /** Files added by the user */
+    this.files = [];
     this.inputAttributes = {
       type: "file",
       id: "file-elem",
       multiple: true,
     };
-    this.type = ZFileUploadType.DEFAULT;
-    this.buttonVariant = undefined;
-    this.acceptedFormat = undefined;
-    this.fileMaxSize = undefined;
-    this.mainTitle = undefined;
-    this.description = undefined;
-    this.files = [];
-    this.invalidFiles = undefined;
   }
   /** Listen removeFile event sent from z-file component */
   removeFileListener(e) {

package/dist/collection/components/icons/z-icon/index.js

@@ -1,13 +1,6 @@
 import { h } from "@stencil/core";
 import { ICONS } from "../icons";
 export class ZIcon {
-  constructor() {
-    this.name = undefined;
-    this.height = undefined;
-    this.width = undefined;
-    this.iconid = undefined;
-    this.fill = undefined;
-  }
   selectPathOrPolygon(iconValue) {
     if (iconValue === null || iconValue === void 0 ? void 0 : iconValue.startsWith("M")) {
       return h("path", { d: ICONS[this.name] });

package/dist/collection/components/indicators/z-stepper-item/index.js

@@ -1,11 +1,5 @@
 import { h } from "@stencil/core";
 export class ZStepperItem {
-  constructor() {
-    this.index = undefined;
-    this.href = undefined;
-    this.pressed = undefined;
-    this.disabled = undefined;
-  }
   render() {
     if (this.href) {
       return (h("a", { href: !this.disabled && this.href, class: "stepper-item" }, h("div", { class: "indicator" }, this.index), h("span", null, h("slot", null))));

package/dist/collection/components/inputs/z-combobox/index.js

@@ -3,26 +3,27 @@ import { InputType, KeyboardKeyCode } from "../../../beans";
 import { handleKeyboardSubmit } from "../../../utils/utils";
 export class ZCombobox {
   constructor() {
-    this.itemsList = [];
-    this.inputType = InputType.TEXT;
-    this.inputid = undefined;
-    this.items = undefined;
-    this.label = undefined;
+    /** show search input flag (optional) */
     this.hassearch = false;
-    this.searchlabel = undefined;
-    this.searchplaceholder = undefined;
-    this.searchtitle = undefined;
+    /** no result text message */
     this.noresultslabel = "Nessun risultato";
+    /** toggle combo list opening flag */
     this.isopen = false;
+    /** fixed style flag */
     this.isfixed = false;
+    /** close combobox list text */
     this.closesearchtext = "Chiudi";
+    /** show "check all" checkbox (optional) */
     this.hascheckall = false;
+    /** check all label (optional) */
     this.checkalltext = "Seleziona tutti";
+    /** uncheck all label (optional) */
     this.uncheckalltext = "Deseleziona tutti";
+    /** max number of checkable items (0 = unlimited) */
     this.maxcheckableitems = 0;
-    this.searchValue = undefined;
-    this.selectedCounter = undefined;
-    this.renderItemsList = [];
+    this.renderItemsList = []; // used for render only
+    this.itemsList = [];
+    this.inputType = InputType.TEXT;
     this.toggleComboBox = this.toggleComboBox.bind(this);
     this.closeFilterItems = this.closeFilterItems.bind(this);
   }

package/dist/collection/components/inputs/z-input/index.js

@@ -3,31 +3,27 @@ import { InputType, LabelPosition } from "../../../beans";
 import { boolean, randomId } from "../../../utils/utils";
 export class ZInput {
   constructor() {
-    this.typingtimeout = 300;
+    /** the id of the input element */
     this.htmlid = `id-${randomId()}`;
-    this.type = undefined;
-    this.name = undefined;
-    this.label = undefined;
+    /** the input aria-label */
     this.ariaLabel = "";
-    this.value = undefined;
+    /** the input is disabled */
     this.disabled = false;
+    /** the input is readonly */
     this.readonly = false;
+    /** the input is required (optional): available for text, password, number, email, textarea, checkbox */
     this.required = false;
+    /** checked: available for checkbox, radio */
     this.checked = false;
-    this.placeholder = undefined;
-    this.htmltitle = undefined;
-    this.status = undefined;
+    /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */
     this.message = true;
+    /** the input label position: available for checkbox, radio */
     this.labelPosition = LabelPosition.RIGHT;
-    this.autocomplete = undefined;
+    /** render clear icon when typing (optional): available for text */
     this.hasclearicon = true;
-    this.icon = undefined;
-    this.min = undefined;
-    this.max = undefined;
-    this.step = undefined;
-    this.pattern = undefined;
     this.isTyping = false;
     this.passwordHidden = true;
+    this.typingtimeout = 300;
   }
   inputCheckListener(e) {
     const data = e.detail;

package/dist/collection/components/inputs/z-input-message/index.js

@@ -6,8 +6,6 @@ export class ZInputMessage {
       error: "multiply-circled",
       warning: "exclamation-circle",
     };
-    this.message = undefined;
-    this.status = undefined;
   }
   render() {
     return (h(Host, { role: "alert", "aria-label": this.message, tabindex: this.message ? 0 : -1 }, this.statusIcons[this.status] && this.message && h("z-icon", { name: this.statusIcons[this.status] }), h("span", { innerHTML: this.message })));

package/dist/collection/components/inputs/z-select/index.js

@@ -3,24 +3,23 @@ import { ListDividerType, KeyboardCode } from "../../../beans";
 import { randomId, handleKeyboardSubmit, getClickedElement, getElementTree, boolean } from "../../../utils/utils";
 export class ZSelect {
   constructor() {
-    this.itemsList = [];
+    /** the id of the input element */
     this.htmlid = `id-${randomId()}`;
-    this.items = undefined;
-    this.name = undefined;
-    this.label = undefined;
+    /** the input aria-label */
     this.ariaLabel = "";
+    /** the input is disabled */
     this.disabled = false;
+    /** the input is readonly */
     this.readonly = false;
-    this.placeholder = undefined;
-    this.htmltitle = undefined;
-    this.status = undefined;
+    /** input helper message (optional) - if set to `false` message won't be displayed */
     this.message = true;
+    /** the input has autocomplete option */
     this.autocomplete = false;
+    /** no result text message */
     this.noresultslabel = "Nessun risultato";
-    this.hasGroupItems = undefined;
     this.isOpen = false;
     this.selectedItem = null;
-    this.searchString = undefined;
+    this.itemsList = [];
     this.toggleSelectUl = this.toggleSelectUl.bind(this);
     this.selectItem = this.selectItem.bind(this);
     this.handleSelectFocus = this.handleSelectFocus.bind(this);

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

@@ -2,7 +2,13 @@ import { h, Host } from "@stencil/core";
 import { ListSize, ListType } from "../../../beans";
 export class ZList {
   constructor() {
+    /**
+     * [optional] Sets size of inside elements.
+     */
     this.size = ListSize.MEDIUM;
+    /**
+     * [optional] type of the list marker for each element
+     */
     this.listType = ListType.NONE;
   }
   setChildrenSizeType() {

package/dist/collection/components/list/z-list-element/index.js

@@ -5,31 +5,69 @@ export class ZListElement {
    * Constructor.
    */
   constructor() {
-    this.openElementConfig = {
-      accordion: {
-        open: "minus-circled",
-        close: "plus-circled",
-      },
-      menu: {
-        open: "chevron-up",
-        close: "chevron-down",
-      },
-    };
+    /**
+     * [optional] Align expandable button left or right.
+     */
     this.alignButton = ExpandableListButtonAlign.LEFT;
+    /**
+     * [optional] Sets element clickable.
+     */
     this.clickable = false;
+    /**
+     * [optional] Sets the divider color.
+     */
     this.dividerColor = "color-surface03";
+    /**
+     * [optional] Sets the position where to insert the divider.
+     */
     this.dividerType = ListDividerType.NONE;
+    /**
+     * [optional] Sets the divider size.
+     */
     this.dividerSize = DividerSize.SMALL;
+    /**
+     * [optional] Sets element as expandable.
+     */
     this.expandable = false;
+    /**
+     * [optional] Sets expandable style to element.
+     */
     this.expandableStyle = ExpandableListStyle.ACCORDION;
-    this.listElementId = undefined;
+    /**
+     * [optional] Sets size of inside elements.
+     */
     this.size = ListSize.MEDIUM;
+    /**
+     * [optional] Sets text color of the element.
+     */
     this.color = "none";
+    /**
+     * [optional] Sets disabled style of the element.
+     */
     this.disabled = false;
+    /**
+     * [optional] If is used in ZContextualMenu component
+     */
     this.isContextualMenu = false;
+    /**
+     * [optional] position of the list element inside the list or the group
+     */
     this.listElementPosition = "0";
+    /**
+     * [optional] type of the list marker for each element
+     */
     this.listType = ListType.NONE;
     this.showInnerContent = false;
+    this.openElementConfig = {
+      accordion: {
+        open: "minus-circled",
+        close: "plus-circled",
+      },
+      menu: {
+        open: "chevron-up",
+        close: "chevron-down",
+      },
+    };
     this.handleClick = this.handleClick.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
   }