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

package/dist/cjs/z-date-picker.cjs.entry.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const utils = require('./utils-f681590c.js');
+const utils = require('./utils-ebe45309.js');
 const _commonjsHelpers = require('./_commonjsHelpers-537d719a.js');
+const index$1 = require('./index-199cd650.js');
 
 var monthSelect = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 (function (global, factory) {
@@ -313,11 +314,11 @@ const ZDatePicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.dateSelect = index.createEvent(this, "dateSelect", 7);
-    this.datePickerId = undefined;
+    /** z-input aria label */
     this.ariaLabel = "";
-    this.label = undefined;
-    this.mode = "date" /* ZDatePickerMode.DATE */;
-    this.flatpickrPosition = "bottom" /* ZDatePickerPosition.BOTTOM */;
+    /** [Optional] datepicker mode: date, datetime, only months */
+    this.mode = index$1.ZDatePickerMode.DATE;
+    this.flatpickrPosition = index$1.ZDatePickerPosition.BOTTOM;
     this.inputError = false;
   }
   emitDateSelect(date) {
@@ -341,7 +342,7 @@ const ZDatePicker = class {
       const isNextArrowEntered = document.activeElement.classList.contains("flatpickr-next-month");
       const arrowPressed = isPrevArrowEntered || isNextArrowEntered;
       arrowPressed && ev.key === " " && ev.preventDefault();
-      if (this.mode === "months" /* ZDatePickerMode.MONTHS */) {
+      if (this.mode === index$1.ZDatePickerMode.MONTHS) {
         isPrevArrowEntered && ((_d = this.picker) === null || _d === void 0 ? void 0 : _d.changeYear(this.picker.currentYear - 1));
         isNextArrowEntered && ((_e = this.picker) === null || _e === void 0 ? void 0 : _e.changeYear(this.picker.currentYear + 1));
         if (arrowPressed) {
@@ -386,11 +387,11 @@ const ZDatePicker = class {
     const classToAppend = this.hasChildren ? `${this.datePickerId}-hidden` : `${this.datePickerId}-container`;
     this.picker = utils.flatpickr(`.${classToAppend}`, {
       appendTo: this.element.children[0],
-      enableTime: this.mode === "date-time" /* ZDatePickerMode.DATE_TIME */,
+      enableTime: this.mode === index$1.ZDatePickerMode.DATE_TIME,
       locale: utils.it.Italian,
       allowInput: true,
-      dateFormat: this.mode === "date-time" /* ZDatePickerMode.DATE_TIME */ ? "d-m-Y - H:i" : "d-m-Y",
-      ariaDateFormat: this.mode === "months" /* ZDatePickerMode.MONTHS */ ? "F Y" : "d F Y",
+      dateFormat: this.mode === index$1.ZDatePickerMode.DATE_TIME ? "d-m-Y - H:i" : "d-m-Y",
+      ariaDateFormat: this.mode === index$1.ZDatePickerMode.MONTHS ? "F Y" : "d F Y",
       minuteIncrement: 1,
       // eslint-disable-next-line @typescript-eslint/naming-convention
       time_24hr: true,
@@ -405,7 +406,7 @@ const ZDatePicker = class {
         utils.setAriaOptions(this.element, this.mode);
       },
       wrap: true,
-      plugins: this.mode === "months" /* ZDatePickerMode.MONTHS */ && [
+      plugins: this.mode === index$1.ZDatePickerMode.MONTHS && [
         monthSelect({
           dateFormat: "m-Y",
           altFormat: "m-Y",
@@ -417,23 +418,23 @@ const ZDatePicker = class {
     });
   }
   formatDate(date) {
-    if (this.mode === "date" /* ZDatePickerMode.DATE */) {
+    if (this.mode === index$1.ZDatePickerMode.DATE) {
       return `${utils.flatpickr.formatDate(date, "d-m-Y")}`;
     }
-    else if (this.mode === "months" /* ZDatePickerMode.MONTHS */) {
+    else if (this.mode === index$1.ZDatePickerMode.MONTHS) {
       return `${utils.flatpickr.formatDate(date, "m-Y")}`;
     }
     return `${utils.flatpickr.formatDate(date, "d-m-Y - H:i")}`;
   }
   onStopTyping(value) {
     let text = value.detail.value;
-    if (this.mode === "months" /* ZDatePickerMode.MONTHS */) {
+    if (this.mode === index$1.ZDatePickerMode.MONTHS) {
       text = "01-".concat(value.detail.value);
     }
     const englishData = text.split("-");
-    const time = this.mode === "date-time" /* ZDatePickerMode.DATE_TIME */ ? `T${englishData[3]}:00` : "";
+    const time = this.mode === index$1.ZDatePickerMode.DATE_TIME ? `T${englishData[3]}:00` : "";
     const englishParsedData = `${englishData[2]}-${englishData[1]}-${englishData[0]}${time}`.split(" ").join("");
-    const isValidDate = utils.validateDate(englishParsedData, this.mode === "date-time" /* ZDatePickerMode.DATE_TIME */);
+    const isValidDate = utils.validateDate(englishParsedData, this.mode === index$1.ZDatePickerMode.DATE_TIME);
     if (text === "") {
       this.inputError = false;
       this.picker.setDate([]);
@@ -453,7 +454,7 @@ const ZDatePicker = class {
     return (index.h("div", { class: `${this.datePickerId}-hidden` }, index.h("input", { class: "hidden-input", "data-input": true }), index.h("slot", { name: "toggle" })));
   }
   renderZInput() {
-    return (index.h("div", { class: `${this.datePickerId}-container` }, index.h("z-input", { "data-input": "data-input", ariaLabel: this.ariaLabel, label: this.label, class: this.datePickerId, type: "text" /* InputType.TEXT */, icon: "event", message: false, tabindex: "0", value: "", onStopTyping: (value) => {
+    return (index.h("div", { class: `${this.datePickerId}-container` }, index.h("z-input", { "data-input": "data-input", ariaLabel: this.ariaLabel, label: this.label, class: this.datePickerId, type: index$1.InputType.TEXT, icon: "event", message: false, tabindex: "0", value: "", onStopTyping: (value) => {
         this.onStopTyping(value);
       }, onStartTyping: () => {
         this.inputError = false;

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

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-199cd650.js');
+
+const stylesCss = ".sc-z-divider-h{display:block;padding:0;margin:0}.divider-horizontal.sc-z-divider-h{width:100%}.divider-vertical.sc-z-divider-h{height:100%}.divider-small.divider-horizontal.sc-z-divider-h{height:var(--border-size-small)}.divider-medium.divider-horizontal.sc-z-divider-h{height:var(--border-size-medium)}.divider-large.divider-horizontal.sc-z-divider-h{height:var(--border-size-large)}.divider-small.divider-vertical.sc-z-divider-h{width:var(--border-size-small)}.divider-medium.divider-vertical.sc-z-divider-h{width:var(--border-size-medium)}.divider-large.divider-vertical.sc-z-divider-h{width:var(--border-size-large)}";
+
+const ZDivider = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** [optional] Divider size */
+    this.size = index$1.DividerSize.SMALL;
+    /** [optional] Divider color */
+    this.color = "gray200";
+    /** [optional] Divider orintation */
+    this.orientation = index$1.DividerOrientation.HORIZONTAL;
+  }
+  render() {
+    return (index.h(index.Host, { class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+  }
+};
+ZDivider.style = stylesCss;
+
+exports.z_divider = ZDivider;

package/dist/cjs/z-dragdrop-area_2.cjs.entry.js

@@ -37,9 +37,8 @@ ZDragdropArea.style = stylesCss;
 const ZHeading = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.level = undefined;
+    /** Font weight variant */
     this.variant = "regular";
-    this.component = undefined;
   }
   render() {
     return (index.h("z-typography", { tabIndex: 0, component: this.component || `h${this.level}`, level: `h${this.level}`, variant: this.variant }, index.h("slot", null)));

package/dist/cjs/z-file-upload.cjs.entry.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const utils = require('./utils-7c92be74.js');
+const index$1 = require('./index-199cd650.js');
+const utils = require('./utils-ce225fb3.js');
 require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ":host{color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.container{display:flex;flex-direction:column}:host .modal-wrapper{display:flex;align-items:center;justify-content:center}:host .modal-wrapper>.files-wrapper{display:flex;flex-direction:column;margin:calc(var(--space-unit) * 4);gap:var(--space-unit)}:host .text-container{display:flex;flex-direction:column;margin:auto}:host .text-container z-body{text-align:center}:host .text-container .upload-link{color:var(--color-link-primary);cursor:pointer}:host .text-container .upload-link-text{margin-bottom:var(--space-unit)}input#file-elem{display:none}#title{display:inline-block;margin-bottom:var(--space-unit)}:host>.container>z-button{display:inline-block;margin-top:calc(var(--space-unit) * 3)}:host>.container>.files-container.hidden{display:none}:host>.container>.files-container>z-heading{display:inline-block;margin:calc(var(--space-unit) * 3) 0}:host>.container>.files-container>.files-wrapper{display:flex;flex-wrap:wrap;column-gap:calc(var(--space-unit) * 2);row-gap:calc(var(--space-unit) * 2)}:host>.container>.files-container>z-divider{margin-top:calc(var(--space-unit) * 3);margin-bottom:0}@media only screen and (min-width: 768px){:host>.container>z-button{align-self:flex-start}}";
@@ -12,19 +13,15 @@ const ZFileUpload = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.fileInput = index.createEvent(this, "fileInput", 7);
+    /** Prop indicating the file upload type - can be default or dragdrop */
+    this.type = index$1.ZFileUploadType.DEFAULT;
+    /** Files added by the user */
+    this.files = [];
     this.inputAttributes = {
       type: "file",
       id: "file-elem",
       multiple: true,
     };
-    this.type = "default" /* 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) {
@@ -60,8 +57,8 @@ const ZFileUpload = class {
     return this.files;
   }
   getType() {
-    if (utils.getDevice() !== "desktop" /* Device.DESKTOP */)
-      return "default" /* ZFileUploadType.DEFAULT */;
+    if (utils.getDevice() !== index$1.Device.DESKTOP)
+      return index$1.ZFileUploadType.DEFAULT;
     return this.type;
   }
   handleAccessibility() {
@@ -70,7 +67,7 @@ const ZFileUpload = class {
       lastFile.focus();
     }
     else {
-      this.getType() === "default" /* ZFileUploadType.DEFAULT */
+      this.getType() === index$1.ZFileUploadType.DEFAULT
         ? this.button.querySelector("button").focus()
         : this.uploadLink.focus();
     }
@@ -126,7 +123,7 @@ const ZFileUpload = class {
     return index.h("z-body", { level: 3 }, fileFormatString || fileWeightString ? finalString : null);
   }
   renderFileSection() {
-    return (index.h("section", { class: `files-container ${!this.files.length ? "hidden" : ""}` }, index.h("z-heading", { variant: "semibold", level: 4 }, "File appena caricati"), index.h("div", { class: "files-wrapper" }, index.h("slot", { name: "files" })), index.h("z-divider", { size: "medium" /* DividerSize.MEDIUM */ })));
+    return (index.h("section", { class: `files-container ${!this.files.length ? "hidden" : ""}` }, index.h("z-heading", { variant: "semibold", level: 4 }, "File appena caricati"), index.h("div", { class: "files-wrapper" }, index.h("slot", { name: "files" })), index.h("z-divider", { size: index$1.DividerSize.MEDIUM })));
   }
   renderInput() {
     return (index.h("input", Object.assign({}, this.inputAttributes, { onChange: () => this.fileInputHandler(), accept: this.acceptedFormat, ref: (val) => (this.input = val) })));
@@ -178,7 +175,7 @@ const ZFileUpload = class {
     })))));
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { tabIndex: 0, class: `container ${this.getType()}` }, this.renderTitle(), this.getType() == "default" /* ZFileUploadType.DEFAULT */ ? this.renderDefaultMode() : this.renderDragDropMode()), !!this.invalidFiles.size && (index.h("z-modal", { tabIndex: 0, ref: (val) => (this.errorModal = val), modaltitle: "Attenzione", onModalClose: () => (this.invalidFiles = new Map()), onModalBackgroundClick: () => (this.invalidFiles = new Map()) }, this.handleErrorModalContent()))));
+    return (index.h(index.Host, null, index.h("div", { tabIndex: 0, class: `container ${this.getType()}` }, this.renderTitle(), this.getType() == index$1.ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()), !!this.invalidFiles.size && (index.h("z-modal", { tabIndex: 0, ref: (val) => (this.errorModal = val), modaltitle: "Attenzione", onModalClose: () => (this.invalidFiles = new Map()), onModalBackgroundClick: () => (this.invalidFiles = new Map()) }, this.handleErrorModalContent()))));
   }
   get el() { return index.getElement(this); }
 };

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-199cd650.js');
 const breakpoints = require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ".sc-z-file-h{position:relative;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.sc-z-file-h>z-popover.sc-z-file{z-index:10}.sc-z-file-h>z-popover.sc-z-file>.tooltip-content.sc-z-file{white-space:nowrap}.sc-z-file-h>z-chip.sc-z-file span.sc-z-file{display:block;overflow:hidden;max-width:250px;letter-spacing:0.32px;line-height:1.33;text-overflow:ellipsis;white-space:nowrap}";
@@ -11,8 +12,6 @@ const ZFile = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.removeFile = index.createEvent(this, "removeFile", 7);
-    this.fileNumber = undefined;
-    this.fileName = undefined;
     this.allowPopover = false;
     this.popoverVisible = false;
   }
@@ -40,7 +39,7 @@ const ZFile = class {
     return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
   }
   render() {
-    return (index.h(index.Host, null, this.allowPopover && (index.h("z-popover", { open: this.popoverVisible, position: "auto" /* PopoverPositions.AUTO */, bindTo: this.chip }, index.h("span", { class: "body-5 tooltip-content" }, this.ellipsis.innerText))), index.h("z-chip", { ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: "default" /* ZChipType.DEFAULT */ }, index.h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+    return (index.h(index.Host, null, this.allowPopover && (index.h("z-popover", { open: this.popoverVisible, position: index$1.PopoverPositions.AUTO, bindTo: this.chip }, index.h("span", { class: "body-5 tooltip-content" }, this.ellipsis.innerText))), index.h("z-chip", { ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: index$1.ZChipType.DEFAULT }, index.h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/z-footer-link_3.cjs.entry.js

@@ -9,7 +9,6 @@ const stylesCss$2 = ":host{font-family:var(--font-family-sans);font-weight:var(-
 const ZFooterLink = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.href = undefined;
   }
   render() {
     return (index.h("a", { href: this.href, target: "_blank" }, index.h("slot", null)));
@@ -22,7 +21,6 @@ const stylesCss$1 = ":host{font-family:var(--font-family-sans);font-weight:var(-
 const ZFooterSection = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.name = undefined;
     this.isOpen = false;
   }
   renderToggleButton() {
@@ -39,9 +37,6 @@ const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--f
 const ZFooterSocial = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.icon = undefined;
-    this.href = undefined;
-    this.description = undefined;
   }
   render() {
     return (index.h("a", { href: this.href, target: "_blank" }, index.h("img", { src: this.icon, alt: this.description })));

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-199cd650.js');
 
 const stylesCss = ":host{width:100%}footer{width:auto;height:auto;box-sizing:border-box;padding:var(--space-unit) 0;background-color:var(--gray900);color:var(--gray50);font-family:var(--font-family-sans);font-size:13px}footer *{box-sizing:border-box}footer>section>div{display:grid}#top{padding:0 calc(var(--space-unit) * 2)}#bottom{width:auto;height:auto;padding:0 calc(var(--space-unit) * 2);margin:0;font-size:12px;white-space:pre-line}#bottom>div{display:grid;grid-template-columns:1fr}#bottom>div>div.item{display:flex;width:auto;height:auto;flex-direction:column;align-items:flex-start;padding:calc(var(--space-unit) * 2) 0;grid-column:span 1}#bottom>div>div.item:nth-child(1){order:2}#bottom>div>div.item:nth-child(2){order:1;border-bottom:1px solid var(--gray50)}#bottom>div>div.item>div.social{display:grid;padding:0;margin-bottom:0;column-gap:12px;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(auto-fill, 24px)}#bottom>div>div.bottom-links{display:none}#bottom>div>div.item>p{padding:var(--space-unit) 0;margin:var(--space-unit) 0}#bottom>div>div.item>p:first-child{margin-top:0}#bottom>div>div.item>p:last-child{margin-bottom:0}#bottom>div>div.logo>p>span{display:block}#extension{padding:0 calc(var(--space-unit) * 2)}#extension>div{display:grid;align-items:center;grid-row-gap:var(--space-unit);grid-template-columns:1fr}#extension z-divider{margin-top:var(--space-unit)}#extension z-button{margin-left:var(--space-unit)}div.limited-width{--mw:none;max-width:var(--mw);margin:auto}z-button{--color-primary01:var(--gray600);--color-hover-primary:var(--gray700)}@media only screen and (min-width: 768px){footer{padding:0}#top{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);background-color:var(--gray800)}#top z-footer-section:last-child{display:none}#bottom{padding:0 calc(var(--space-unit) * 3);background-color:var(--gray900)}#bottom>div{grid-column-gap:var(--grid-tablet-margin);grid-template-columns:repeat(4, 1fr)}#bottom>div>div.item{margin:0}#bottom>div>div.item:nth-child(1){order:1}#bottom>div>div.item:nth-child(2){order:2;border-bottom:none}#bottom>div>div.item>p{padding-top:0}#bottom>div>div.logo>z-logo{width:auto;height:39px}#bottom>div>div.bottom-links{display:grid;order:3;font-size:12px;grid-column:span 2;grid-column-gap:var(--grid-tablet-margin);grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(auto-fill, 24px)}#extension{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3) 0;margin:auto;background-color:var(--gray800);color:white;grid-template-columns:1fr 1fr}#extension>div>div{text-align:end}#extension z-divider{grid-column:1 / span 2}}@media only screen and (min-width: 1152px){#top{width:100%}#top>div{grid-column-gap:var(--grid-desktop-margin);grid-template-columns:repeat(6, 1fr)}#bottom>div>div.item:nth-child(1)>p:nth-of-type(2){font-size:10px}#bottom>div>div.item>p{padding-bottom:0;margin-bottom:calc(var(--space-unit) * 2)}#bottom>div>div.item>div.social{margin-top:0}#bottom>div>div.bottom-links{padding:calc(var(--space-unit) * 2) 0 0 0;margin:0;grid-column-gap:var(--grid-desktop-margin);grid-template-columns:repeat(3, 1fr)}}@media only screen and (min-width: 1366px){#top{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4)}#bottom{padding:0 calc(var(--space-unit) * 4)}#extension{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4) 0}}";
 
@@ -12,12 +13,6 @@ const ZFooter = class {
     this.creditsLinkClick = index.createEvent(this, "creditsLinkClick", 7);
     this.reportAProblemButtonClick = index.createEvent(this, "reportAProblemButtonClick", 7);
     this.creditsLinkId = "creditsLinkId";
-    this.data = undefined;
-    this.productName = undefined;
-    this.productVersion = undefined;
-    this.productCreditsLink = undefined;
-    this.showReportAProblemButton = undefined;
-    this.contentMaxWidth = undefined;
     this.emitReportAProblemButtonClick = this.emitReportAProblemButtonClick.bind(this);
   }
   componentWillLoad() {
@@ -66,7 +61,7 @@ const ZFooter = class {
     if (this.productName || this.productVersion || this.productCreditsLink != null || this.showReportAProblemButton) {
       const versionString = `${this.productName ? " versione" : "Versione"} ${this.productVersion}`;
       const creditsObject = (index.h("z-body", { level: 5 }, (this.productName || this.productVersion) && " - ", index.h("z-link", { htmlid: this.creditsLinkId, href: (_a = this.productCreditsLink) === null || _a === void 0 ? void 0 : _a.trim(), target: "_blank", textcolor: "white" }, "Credits")));
-      return (index.h("div", { id: "extension" }, index.h("div", { class: { "limited-width": !!this.contentMaxWidth }, style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, index.h("span", null, this.productName && (index.h("z-body", { level: 5, variant: "semibold" }, this.productName)), this.productVersion && index.h("z-body", { level: 5 }, versionString), this.productCreditsLink != null && creditsObject), this.showReportAProblemButton && (index.h("div", null, index.h("z-body", { level: 5 }, "Hai bisogno di aiuto?"), index.h("z-button", { size: "small" /* ButtonSize.SMALL */, onClick: this.emitReportAProblemButtonClick }, "SEGNALA UN PROBLEMA"))), index.h("z-divider", { color: "gray500" }))));
+      return (index.h("div", { id: "extension" }, index.h("div", { class: { "limited-width": !!this.contentMaxWidth }, style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, index.h("span", null, this.productName && (index.h("z-body", { level: 5, variant: "semibold" }, this.productName)), this.productVersion && index.h("z-body", { level: 5 }, versionString), this.productCreditsLink != null && creditsObject), this.showReportAProblemButton && (index.h("div", null, index.h("z-body", { level: 5 }, "Hai bisogno di aiuto?"), index.h("z-button", { size: index$1.ButtonSize.SMALL, onClick: this.emitReportAProblemButtonClick }, "SEGNALA UN PROBLEMA"))), index.h("z-divider", { color: "gray500" }))));
     }
   }
   // INFO: backward compatibility

package/dist/cjs/z-info-box.cjs.entry.js

@@ -10,7 +10,7 @@ const ZInfoBox = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.infoBoxClose = index.createEvent(this, "infoBoxClose", 7);
-    this.boxid = undefined;
+    /** render close icon flag */
     this.isclosable = true;
   }
   emitInfoBoxClose() {

package/dist/cjs/z-info-reveal.cjs.entry.js

@@ -3,16 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-199cd650.js');
 
 const stylesCss = ":host{--z-info-reveal-theme--surface:var(--color-black);--z-info-reveal-theme--text:var(--color-white);--z-info-reveal-shadow:var(--shadow-2);--z-info-reveal-max-width:375px;position:relative;display:flex;width:fit-content;background-color:var(--z-info-reveal-theme--surface);color:var(--z-info-reveal-theme--text);font-size:var(--font-size-3);font-weight:var(--font-rg);letter-spacing:0;line-height:1.5}button{padding:0;border:none;background-color:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit}z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3);display:flex}.z-info-reveal-trigger{display:flex;width:fit-content;height:100%;align-items:center;padding:calc(var(--space-unit) / 2);box-shadow:var(--z-info-reveal-shadow);column-gap:calc(var(--space-unit) / 2)}:host([position=\"top_left\"]) .z-info-reveal-trigger,:host([position=\"bottom_left\"]) .z-info-reveal-trigger{flex-direction:row-reverse}:host([open]) .z-info-reveal-trigger{box-shadow:none}.info-box{position:absolute;display:flex;max-width:var(--z-info-reveal-max-width);padding:calc(var(--space-unit) / 2);background-color:var(--z-info-reveal-theme--surface);box-shadow:var(--z-info-reveal-shadow);column-gap:calc(var(--space-unit) / 2);cursor:pointer}:host([position=\"bottom_left\"]) .info-box,:host([position=\"bottom_right\"]) .info-box{bottom:0}:host([position=\"top_right\"]) .info-box,:host([position=\"bottom_right\"]) .info-box{right:0}:host([position=\"top_left\"]) .info-box,:host([position=\"bottom_left\"]) .info-box{left:0;flex-direction:row-reverse}::slotted(*){display:none;width:max-content}::slotted([data-current]){display:block}:host([position=\"top_left\"]) .z-info-reveal-close,:host([position=\"top_right\"]) .z-info-reveal-close{align-self:flex-start}:host([position=\"bottom_left\"]) .z-info-reveal-close,:host([position=\"bottom_right\"]) .z-info-reveal-close{align-self:flex-end}";
 
 const ZInfoReveal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /** 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 = index$1.InfoRevealPosition.BOTTOM_RIGHT;
+    /** Whether the info panel is open. */
     this.open = false;
+    /** Current index for the info queue. */
     this.currentIndex = null;
   }
   watchItems() {

package/dist/cjs/z-input-deprecated.cjs.entry.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const utils = require('./utils-7c92be74.js');
+const index$1 = require('./index-199cd650.js');
+const utils = require('./utils-ce225fb3.js');
 require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ".sc-z-input-deprecated-h{display:inline-block;width:inherit}input.sc-z-input-deprecated::-ms-clear,input.sc-z-input-deprecated::-ms-reveal{display:none}.sc-z-input-deprecated-h input.sc-z-input-deprecated::-ms-clear,.sc-z-input-deprecated-h input.sc-z-input-deprecated::-ms-reveal{display:none}input.sc-z-input-deprecated,textarea.sc-z-input-deprecated,.textarea-wrapper.sc-z-input-deprecated,ul[role=\"listbox\"].sc-z-input-deprecated{box-sizing:border-box;border:var(--border-size-small) solid var(--color-surface04);background:var(--color-input-field01);border-radius:var(--border-radius-small);color:var(--color-text02);fill:var(--color-icon02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}input.sc-z-input-deprecated:focus:focus-visible,li[role=\"option\"].sc-z-input-deprecated:focus:focus-visible,.focus.sc-z-input-deprecated{box-shadow:var(--shadow-focus-primary)}.filled.sc-z-input-deprecated{border-color:var(--color-surface05)}.input-success.sc-z-input-deprecated,.input-success.sc-z-input-deprecated:hover,.input-success.hover.sc-z-input-deprecated{border-color:var(--color-success01);background:var(--color-success-inverse);fill:var(--color-success01)}.input-error.sc-z-input-deprecated,.input-error.sc-z-input-deprecated:hover,.input-error.hover.sc-z-input-deprecated{border-color:var(--color-error01);background:var(--color-error-inverse);fill:var(--color-error01)}.input-warning.sc-z-input-deprecated,.input-warning.sc-z-input-deprecated:hover,.input-warning.hover.sc-z-input-deprecated{border-color:var(--color-warning01);background:var(--color-warning-inverse);fill:var(--color-warning01)}input[readonly].sc-z-input-deprecated,.readonly.sc-z-input-deprecated{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}input.sc-z-input-deprecated:disabled,.disabled.sc-z-input-deprecated,.filled.sc-z-input-deprecated:disabled{border-color:var(--color-disabled01);box-shadow:none;color:var(--color-disabled02);fill:var(--color-disabled01);pointer-events:none}input.sc-z-input-deprecated::placeholder,textarea.sc-z-input-deprecated::placeholder{color:var(--color-text05)}.sc-z-input-deprecated::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input-deprecated:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input-deprecated::placeholder{color:var(--color-text05)}.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated{position:relative;z-index:1;fill:var(--color-icon02)}.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 4.5) 0 calc(var(--space-unit) * 1.5);margin:0}.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.has-icon.sc-z-input-deprecated,.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.has-clear-icon.sc-z-input-deprecated{padding-right:calc(var(--space-unit) * 4)}.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.has-icon.has-clear-icon.sc-z-input-deprecated{padding-right:calc(var(--space-unit) * 7)}.text-wrapper.sc-z-input-deprecated .icons-wrapper.sc-z-input-deprecated{position:absolute;z-index:2;right:calc(var(--space-unit) * 1.5);bottom:calc(var(--space-unit) * 1.5);display:flex}.text-wrapper.sc-z-input-deprecated .icons-wrapper.sc-z-input-deprecated>z-icon.sc-z-input-deprecated{--z-icon-width:18px;--z-icon-height:18px;display:block;margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input-deprecated .icons-wrapper.sc-z-input-deprecated>z-icon.reset-icon.sc-z-input-deprecated,.text-wrapper.sc-z-input-deprecated .icons-wrapper.sc-z-input-deprecated>z-icon.toggle-password-icon.sc-z-input-deprecated{cursor:pointer}.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated:-webkit-autofill,.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated:-webkit-autofill:hover,.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated:-webkit-autofill:focus,.text-wrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated:-webkit-autofill:active{background-clip:text !important}.textarea-wrapper.sc-z-input-deprecated{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input-deprecated::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}textarea.sc-z-input-deprecated::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input-deprecated::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input-deprecated::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input-deprecated{width:100%;min-height:132px;padding:0;border:none;margin:0;resize:none}.radio-wrapper.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-text01);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input-deprecated:hover,.checkbox-wrapper.sc-z-input-deprecated:hover{color:var(--color-hover-primary);fill:currentcolor}.radio-wrapper.sc-z-input-deprecated>input.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated>input.sc-z-input-deprecated{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input-deprecated .radio-label.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated .checkbox-label.sc-z-input-deprecated{display:inline-flex;align-items:center;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input-deprecated input.sc-z-input-deprecated:not(:disabled)+.radio-label.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated input.sc-z-input-deprecated:not(:disabled)+.checkbox-label.sc-z-input-deprecated{cursor:pointer}.radio-wrapper.sc-z-input-deprecated .radio-label.sc-z-input-deprecated z-icon.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated .checkbox-label.sc-z-input-deprecated z-icon.sc-z-input-deprecated{cursor:pointer;fill:inherit}.radio-wrapper.sc-z-input-deprecated .radio-label.after.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated .checkbox-label.after.sc-z-input-deprecated{flex-direction:row}.radio-wrapper.sc-z-input-deprecated .radio-label.before.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated .checkbox-label.before.sc-z-input-deprecated{flex-direction:row-reverse}.radio-wrapper.sc-z-input-deprecated .radio-label.after.sc-z-input-deprecated>span.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated .checkbox-label.after.sc-z-input-deprecated>span.sc-z-input-deprecated{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input-deprecated .radio-label.before.sc-z-input-deprecated>span.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated .checkbox-label.before.sc-z-input-deprecated>span.sc-z-input-deprecated{margin-right:var(--space-unit)}.radio-wrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:focus:focus-visible+.radio-label.sc-z-input-deprecated>z-icon.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:focus:focus-visible+.checkbox-label.sc-z-input-deprecated>z-icon.sc-z-input-deprecated{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:disabled+.radio-label.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:disabled+.checkbox-label.sc-z-input-deprecated{color:var(--color-disabled02)}.radio-wrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:disabled+.radio-label.sc-z-input-deprecated>z-icon.sc-z-input-deprecated,.checkbox-wrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:disabled+.checkbox-label.sc-z-input-deprecated>z-icon.sc-z-input-deprecated{cursor:default;fill:var(--color-disabled01)}";
@@ -16,28 +17,28 @@ const ZInputDeprecated = class {
     this.stopTyping = index.createEvent(this, "stopTyping", 7);
     this.inputCheck = index.createEvent(this, "inputCheck", 7);
     this.optionSelect = index.createEvent(this, "optionSelect", 7);
+    /** the id of the input element */
     this.htmlid = `id-${utils.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;
+    /** show input helper message (optional): available for text, password, number, email, textarea, select */
     this.hasmessage = true;
-    this.message = undefined;
+    /** the input label position: available for checkbox, radio */
     this.labelafter = true;
+    /** timeout setting before trigger `inputChange` event (optional): available for text, textarea */
     this.typingtimeout = 300;
-    this.items = undefined;
-    this.autocomplete = undefined;
+    /** multiple options can be selected (optional): available for select */
     this.multiple = false;
+    /** render clear icon when typing (optional): available for text */
     this.hasclearicon = true;
-    this.icon = undefined;
     this.isTyping = false;
     this.textareaWrapperHover = "";
     this.textareaWrapperFocus = "";
@@ -46,8 +47,8 @@ const ZInputDeprecated = class {
   inputCheckListener(e) {
     const data = e.detail;
     switch (this.type) {
-      case "radio" /* InputType.RADIO */:
-        if (data.type === "radio" /* InputType.RADIO */ && data.name === this.name && data.id !== this.htmlid) {
+      case index$1.InputType.RADIO:
+        if (data.type === index$1.InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {
           this.checked = false;
         }
         break;
@@ -80,8 +81,8 @@ const ZInputDeprecated = class {
   /** get checked status */
   async isChecked() {
     switch (this.type) {
-      case "checkbox" /* InputType.CHECKBOX */:
-      case "radio" /* InputType.RADIO */:
+      case index$1.InputType.CHECKBOX:
+      case index$1.InputType.RADIO:
         return this.checked;
       default:
         return false;
@@ -92,7 +93,7 @@ const ZInputDeprecated = class {
       this.emitStartTyping();
     }
     let validity;
-    if (this.type === "textarea" /* InputType.TEXTAREA */) {
+    if (this.type === index$1.InputType.TEXTAREA) {
       validity = this.getValidity("textarea");
     }
     else {
@@ -153,15 +154,15 @@ const ZInputDeprecated = class {
     }
     return attr;
   }
-  renderInputText(type = "text" /* InputType.TEXT */) {
+  renderInputText(type = index$1.InputType.TEXT) {
     const attr = this.getTextAttributes();
-    if (this.icon || type === "password" /* InputType.PASSWORD */) {
+    if (this.icon || type === index$1.InputType.PASSWORD) {
       Object.assign(attr.class, { "has-icon": true });
     }
     if (this.hasclearicon) {
       Object.assign(attr.class, { "has-clear-icon": true });
     }
-    return (index.h("div", { class: "text-wrapper" }, this.renderLabel(), index.h("div", null, index.h("input", Object.assign({ type: type === "password" /* InputType.PASSWORD */ && !this.passwordHidden ? "text" /* InputType.TEXT */ : type }, attr, { "aria-label": this.ariaLabel || this.label })), this.renderIcons()), this.renderMessage()));
+    return (index.h("div", { class: "text-wrapper" }, this.renderLabel(), index.h("div", null, index.h("input", Object.assign({ type: type === index$1.InputType.PASSWORD && !this.passwordHidden ? index$1.InputType.TEXT : type }, attr, { "aria-label": this.ariaLabel || this.label })), this.renderIcons()), this.renderMessage()));
   }
   renderLabel() {
     if (!this.label) {
@@ -176,7 +177,7 @@ const ZInputDeprecated = class {
       } }, this.renderResetIcon(), this.renderIcon()));
   }
   renderIcon() {
-    if (this.type === "password" /* InputType.PASSWORD */) {
+    if (this.type === index$1.InputType.PASSWORD) {
       return this.renderShowHidePassword();
     }
     if (!this.icon) {
@@ -235,16 +236,16 @@ const ZInputDeprecated = class {
   /* END select */
   render() {
     switch (this.type) {
-      case "text" /* InputType.TEXT */:
-      case "password" /* InputType.PASSWORD */:
-      case "number" /* InputType.NUMBER */:
-      case "email" /* InputType.EMAIL */:
+      case index$1.InputType.TEXT:
+      case index$1.InputType.PASSWORD:
+      case index$1.InputType.NUMBER:
+      case index$1.InputType.EMAIL:
         return this.renderInputText(this.type);
-      case "textarea" /* InputType.TEXTAREA */:
+      case index$1.InputType.TEXTAREA:
         return this.renderTextarea();
-      case "checkbox" /* InputType.CHECKBOX */:
+      case index$1.InputType.CHECKBOX:
         return this.renderCheckbox();
-      case "radio" /* InputType.RADIO */:
+      case index$1.InputType.RADIO:
         return this.renderRadio();
       // @ts-ignore
       case "select":

package/dist/cjs/z-input-label_2.cjs.entry.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const utils = require('./utils-7c92be74.js');
+const index$1 = require('./index-199cd650.js');
+const utils = require('./utils-ce225fb3.js');
 require('./breakpoints-88c4fd6c.js');
 
 const stylesCss$1 = "label{display:block;margin:var(--space-unit) 0;color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:1.33;text-align:left;text-transform:uppercase}label.disabled{color:var(--color-disabled02)}";
@@ -11,9 +12,8 @@ const stylesCss$1 = "label{display:block;margin:var(--space-unit) 0;color:var(--
 const ZInputLabel = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.value = undefined;
+    /** the label is disabled */
     this.disabled = false;
-    this.htmlfor = undefined;
   }
   render() {
     return (index.h("label", { htmlFor: this.htmlfor, class: { disabled: this.disabled } }, this.value));
@@ -21,29 +21,29 @@ const ZInputLabel = class {
 };
 ZInputLabel.style = stylesCss$1;
 
-const stylesCss = ".sc-z-select-h{display:inline-block;width:inherit;color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg)}.select-wrapper.sc-z-select>z-input.sc-z-select{width:100%}.select-wrapper.sc-z-select>div.sc-z-select{position:relative}.select-wrapper.sc-z-select>div.closed.sc-z-select{overflow:hidden;height:0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select{position:absolute;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 0.5) var(--space-unit);border:var(--border-size-small) solid var(--gray200);border-top:none;background:var(--color-surface01);outline:none}.select-wrapper.sc-z-select .closed.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:10}.select-wrapper.sc-z-select .open.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:20}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select{position:relative;overflow:auto;max-height:240px;padding:calc(var(--space-unit) * 0.5);outline:none;scrollbar-color:var(--color-primary01) transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-track{background-color:transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select span.sc-z-select{display:block;padding:0 calc(var(--space-unit) * 1.5)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select span.selected.sc-z-select{font-weight:bold}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select .no-results.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}";
+const stylesCss = ".sc-z-select-h{display:inline-block;width:inherit;color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg)}.select-wrapper.sc-z-select>z-input.sc-z-select{width:100%}.select-wrapper.sc-z-select>div.sc-z-select{position:relative}.select-wrapper.sc-z-select>div.closed.sc-z-select{overflow:hidden;height:0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select{position:absolute;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 0.5) var(--space-unit);border:var(--border-size-small) solid var(--gray200);border-top:none;background:var(--color-surface01);outline:none}.select-wrapper.sc-z-select .closed.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:10}.select-wrapper.sc-z-select .open.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:20}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select{position:relative;overflow:auto;max-height:240px;padding:calc(var(--space-unit) * 0.5);outline:none;scrollbar-color:var(--color-primary01) transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-track{background-color:transparent}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select span.sc-z-select{display:block;padding:0 calc(var(--space-unit) * 1.5)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select span.selected.sc-z-select{font-weight:bold}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select .no-results.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}.z-list-group-title.sc-z-select{color:var(--gray800)}";
 
 const ZSelect = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.optionSelect = index.createEvent(this, "optionSelect", 7);
-    this.itemsList = [];
+    /** the id of the input element */
     this.htmlid = `id-${utils.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.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);
@@ -147,7 +147,7 @@ const ZSelect = class {
     }
   }
   arrowsSelectNav(e, key) {
-    const arrows = ["ArrowDown" /* KeyboardCode.ARROW_DOWN */, "ArrowUp" /* KeyboardCode.ARROW_UP */];
+    const arrows = [index$1.KeyboardCode.ARROW_DOWN, index$1.KeyboardCode.ARROW_UP];
     if (!arrows.includes(e.key)) {
       return;
     }
@@ -157,10 +157,10 @@ const ZSelect = class {
       this.toggleSelectUl();
     }
     let index;
-    if (e.key === "ArrowDown" /* KeyboardCode.ARROW_DOWN */) {
+    if (e.key === index$1.KeyboardCode.ARROW_DOWN) {
       index = key + 1 === this.itemsList.length ? 0 : key + 1;
     }
-    else if (e.key === "ArrowUp" /* KeyboardCode.ARROW_UP */) {
+    else if (e.key === index$1.KeyboardCode.ARROW_UP) {
       index = key <= 0 ? this.itemsList.length - 1 : key - 1;
     }
     this.focusSelectItem(index);
@@ -198,11 +198,11 @@ const ZSelect = class {
     this.toggleSelectUl();
   }
   handleSelectFocus(e) {
-    if (e instanceof KeyboardEvent && e.key === "Escape" /* KeyboardCode.ESC */) {
+    if (e instanceof KeyboardEvent && e.key === index$1.KeyboardCode.ESC) {
       e.stopPropagation();
       return this.toggleSelectUl(true);
     }
-    if (e instanceof KeyboardEvent && e.key !== "Tab" /* KeyboardCode.TAB */ && e.key !== "Enter" /* KeyboardCode.ENTER */) {
+    if (e instanceof KeyboardEvent && e.key !== index$1.KeyboardCode.TAB && e.key !== index$1.KeyboardCode.ENTER) {
       return;
     }
     const tree = utils.getElementTree(utils.getClickedElement());
@@ -220,7 +220,7 @@ const ZSelect = class {
     }
   }
   renderInput() {
-    return (index.h("z-input", { id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_input`, placeholder: this.placeholder, value: !this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, "") : null, label: this.label, "aria-label": this.ariaLabel, icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: this.hasAutocomplete(), message: false, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, onClick: (e) => {
+    return (index.h("z-input", { id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_input`, placeholder: this.placeholder, value: !this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, "") : null, label: this.label, "aria-label": this.ariaLabel, icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: this.hasAutocomplete(), message: false, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, autocomplete: "off", onClick: (e) => {
         this.handleInputClick(e);
       }, onKeyUp: (e) => {
         if (e.keyCode !== 13) {
@@ -245,14 +245,30 @@ const ZSelect = class {
         readonly: this.readonly,
         filled: !!this.selectedItem,
         [`input-${this.status}`]: !this.isOpen && !!this.status,
-      } }, this.renderSelectUlItems()))));
+      } }, this.hasGroupItems ? this.renderSelectGroupItems() : this.renderSelectUlItems()))));
   }
   renderSelectUlItems() {
     if (!this.itemsList.length) {
       return this.renderNoSearchResults();
     }
     return this.itemsList.map((item, key) => {
-      return (index.h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: "element" /* ListDividerType.ELEMENT */, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": !!item.selected, id: `${this.htmlid}_${key}`, onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, index.h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
+      return (index.h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: index$1.ListDividerType.ELEMENT, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": !!item.selected, id: `${this.htmlid}_${key}`, onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, index.h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
+    });
+  }
+  renderSelectGroupItems() {
+    if (!this.itemsList.length) {
+      return this.renderNoSearchResults();
+    }
+    const newData = this.itemsList.reduce((group, item, index$2) => {
+      var _a;
+      const { category } = item;
+      const zListItem = (index.h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: index$1.ListDividerType.HEADER, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": !!item.selected, id: `${this.htmlid}_${index$2}`, onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, index$2) }, index.h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
+      group[category] = (_a = group[category]) !== null && _a !== void 0 ? _a : [];
+      group[category].push(zListItem);
+      return group;
+    }, {});
+    return Object.entries(newData).map(([key, value]) => {
+      return (index.h("z-list-group", { "divider-type": index$1.ListDividerType.ELEMENT }, index.h("z-body", { class: "z-list-group-title", level: 3, slot: "header-title", variant: "semibold" }, key), value.map((item) => item)));
     });
   }
   renderNoSearchResults() {