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

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

@@ -1,5 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
-import { g as getDevice } from './utils-420e8552.js';
+import { x as ZFileUploadType, q as Device, D as DividerSize } from './index-9d028352.js';
+import { g as getDevice } from './utils-39ca028c.js';
 import './breakpoints-c386984e.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}}";
@@ -8,19 +9,15 @@ const ZFileUpload = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.fileInput = createEvent(this, "fileInput", 7);
+    /** 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 = "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) {
@@ -46,11 +43,6 @@ const ZFileUpload = class {
   componentWillLoad() {
     this.invalidFiles = new Map();
   }
-  componentWillRender() {
-    if (this.type === "dragdrop" /* ZFileUploadType.DRAGDROP */ && getDevice() !== "desktop" /* Device.DESKTOP */) {
-      this.type = "default" /* ZFileUploadType.DEFAULT */;
-    }
-  }
   fileInputHandler() {
     if (this.input.files.length) {
       this.invalidFiles = this.checkFiles(Array.from(this.input.files));
@@ -60,13 +52,20 @@ const ZFileUpload = class {
   async getFiles() {
     return this.files;
   }
+  getType() {
+    if (getDevice() !== Device.DESKTOP)
+      return ZFileUploadType.DEFAULT;
+    return this.type;
+  }
   handleAccessibility() {
     const lastFile = this.el.querySelector("z-file:last-child z-chip button");
     if (this.files.length > 0 && lastFile) {
       lastFile.focus();
     }
     else {
-      this.type === "default" /* ZFileUploadType.DEFAULT */ ? this.button.querySelector("button").focus() : this.uploadLink.focus();
+      this.getType() === ZFileUploadType.DEFAULT
+        ? this.button.querySelector("button").focus()
+        : this.uploadLink.focus();
     }
   }
   checkFiles(files) {
@@ -120,7 +119,7 @@ const ZFileUpload = class {
     return h("z-body", { level: 3 }, fileFormatString || fileWeightString ? finalString : null);
   }
   renderFileSection() {
-    return (h("section", { class: `files-container ${!this.files.length ? "hidden" : ""}` }, h("z-heading", { variant: "semibold", level: 4 }, "File appena caricati"), h("div", { class: "files-wrapper" }, h("slot", { name: "files" })), h("z-divider", { size: "medium" /* DividerSize.MEDIUM */ })));
+    return (h("section", { class: `files-container ${!this.files.length ? "hidden" : ""}` }, h("z-heading", { variant: "semibold", level: 4 }, "File appena caricati"), h("div", { class: "files-wrapper" }, h("slot", { name: "files" })), h("z-divider", { size: DividerSize.MEDIUM })));
   }
   renderInput() {
     return (h("input", Object.assign({}, this.inputAttributes, { onChange: () => this.fileInputHandler(), accept: this.acceptedFormat, ref: (val) => (this.input = val) })));
@@ -172,7 +171,7 @@ const ZFileUpload = class {
     })))));
   }
   render() {
-    return (h(Host, null, h("div", { tabIndex: 0, class: `container ${this.type}` }, this.renderTitle(), this.type == "default" /* ZFileUploadType.DEFAULT */ ? this.renderDefaultMode() : this.renderDragDropMode()), !!this.invalidFiles.size && (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 (h(Host, null, h("div", { tabIndex: 0, class: `container ${this.getType()}` }, this.renderTitle(), this.getType() == ZFileUploadType.DEFAULT ? this.renderDefaultMode() : this.renderDragDropMode()), !!this.invalidFiles.size && (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 getElement(this); }
 };

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

@@ -1,4 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { y as ZChipType, P as PopoverPositions } from './index-9d028352.js';
 import { t as tabletBreakpoint } from './breakpoints-c386984e.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}";
@@ -7,8 +8,6 @@ const ZFile = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.removeFile = createEvent(this, "removeFile", 7);
-    this.fileNumber = undefined;
-    this.fileName = undefined;
     this.allowPopover = false;
     this.popoverVisible = false;
   }
@@ -36,7 +35,7 @@ const ZFile = class {
     return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
   }
   render() {
-    return (h(Host, null, this.allowPopover && (h("z-popover", { open: this.popoverVisible, position: "auto" /* 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: "default" /* 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: 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))));
   }
   get el() { return getElement(this); }
 };

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

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

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

@@ -1,4 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
+import { c as ButtonSize } from './index-9d028352.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}}";
 
@@ -8,12 +9,6 @@ const ZFooter = class {
     this.creditsLinkClick = createEvent(this, "creditsLinkClick", 7);
     this.reportAProblemButtonClick = 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() {
@@ -62,7 +57,7 @@ const ZFooter = class {
     if (this.productName || this.productVersion || this.productCreditsLink != null || this.showReportAProblemButton) {
       const versionString = `${this.productName ? " versione" : "Versione"} ${this.productVersion}`;
       const creditsObject = (h("z-body", { level: 5 }, (this.productName || this.productVersion) && " - ", h("z-link", { htmlid: this.creditsLinkId, href: (_a = this.productCreditsLink) === null || _a === void 0 ? void 0 : _a.trim(), target: "_blank", textcolor: "white" }, "Credits")));
-      return (h("div", { id: "extension" }, h("div", { class: { "limited-width": !!this.contentMaxWidth }, style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("span", null, this.productName && (h("z-body", { level: 5, variant: "semibold" }, this.productName)), this.productVersion && h("z-body", { level: 5 }, versionString), this.productCreditsLink != null && creditsObject), this.showReportAProblemButton && (h("div", null, h("z-body", { level: 5 }, "Hai bisogno di aiuto?"), h("z-button", { size: "small" /* ButtonSize.SMALL */, onClick: this.emitReportAProblemButtonClick }, "SEGNALA UN PROBLEMA"))), h("z-divider", { color: "gray500" }))));
+      return (h("div", { id: "extension" }, h("div", { class: { "limited-width": !!this.contentMaxWidth }, style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("span", null, this.productName && (h("z-body", { level: 5, variant: "semibold" }, this.productName)), this.productVersion && h("z-body", { level: 5 }, versionString), this.productCreditsLink != null && creditsObject), this.showReportAProblemButton && (h("div", null, h("z-body", { level: 5 }, "Hai bisogno di aiuto?"), h("z-button", { size: ButtonSize.SMALL, onClick: this.emitReportAProblemButtonClick }, "SEGNALA UN PROBLEMA"))), h("z-divider", { color: "gray500" }))));
     }
   }
   // INFO: backward compatibility

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

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

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

@@ -1,14 +1,18 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { Q as InfoRevealPosition } from './index-9d028352.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) {
     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 = InfoRevealPosition.BOTTOM_RIGHT;
+    /** Whether the info panel is open. */
     this.open = false;
+    /** Current index for the info queue. */
     this.currentIndex = null;
   }
   watchItems() {

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

@@ -1,5 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2ca4b97.js';
-import { r as randomId } from './utils-420e8552.js';
+import { I as InputType } from './index-9d028352.js';
+import { r as randomId } from './utils-39ca028c.js';
 import './breakpoints-c386984e.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)}";
@@ -12,28 +13,28 @@ const ZInputDeprecated = class {
     this.stopTyping = createEvent(this, "stopTyping", 7);
     this.inputCheck = createEvent(this, "inputCheck", 7);
     this.optionSelect = createEvent(this, "optionSelect", 7);
+    /** 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;
+    /** 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 = "";
@@ -42,8 +43,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 InputType.RADIO:
+        if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {
           this.checked = false;
         }
         break;
@@ -76,8 +77,8 @@ const ZInputDeprecated = class {
   /** get checked status */
   async isChecked() {
     switch (this.type) {
-      case "checkbox" /* InputType.CHECKBOX */:
-      case "radio" /* InputType.RADIO */:
+      case InputType.CHECKBOX:
+      case InputType.RADIO:
         return this.checked;
       default:
         return false;
@@ -88,7 +89,7 @@ const ZInputDeprecated = class {
       this.emitStartTyping();
     }
     let validity;
-    if (this.type === "textarea" /* InputType.TEXTAREA */) {
+    if (this.type === InputType.TEXTAREA) {
       validity = this.getValidity("textarea");
     }
     else {
@@ -149,15 +150,15 @@ const ZInputDeprecated = class {
     }
     return attr;
   }
-  renderInputText(type = "text" /* InputType.TEXT */) {
+  renderInputText(type = InputType.TEXT) {
     const attr = this.getTextAttributes();
-    if (this.icon || type === "password" /* InputType.PASSWORD */) {
+    if (this.icon || type === InputType.PASSWORD) {
       Object.assign(attr.class, { "has-icon": true });
     }
     if (this.hasclearicon) {
       Object.assign(attr.class, { "has-clear-icon": true });
     }
-    return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", null, 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 (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", null, h("input", Object.assign({ type: type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type }, attr, { "aria-label": this.ariaLabel || this.label })), this.renderIcons()), this.renderMessage()));
   }
   renderLabel() {
     if (!this.label) {
@@ -172,7 +173,7 @@ const ZInputDeprecated = class {
       } }, this.renderResetIcon(), this.renderIcon()));
   }
   renderIcon() {
-    if (this.type === "password" /* InputType.PASSWORD */) {
+    if (this.type === InputType.PASSWORD) {
       return this.renderShowHidePassword();
     }
     if (!this.icon) {
@@ -231,16 +232,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 InputType.TEXT:
+      case InputType.PASSWORD:
+      case InputType.NUMBER:
+      case InputType.EMAIL:
         return this.renderInputText(this.type);
-      case "textarea" /* InputType.TEXTAREA */:
+      case InputType.TEXTAREA:
         return this.renderTextarea();
-      case "checkbox" /* InputType.CHECKBOX */:
+      case InputType.CHECKBOX:
         return this.renderCheckbox();
-      case "radio" /* InputType.RADIO */:
+      case InputType.RADIO:
         return this.renderRadio();
       // @ts-ignore
       case "select":

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

@@ -1,5 +1,6 @@
 import { r as registerInstance, h, c as createEvent, g as getElement } from './index-a2ca4b97.js';
-import { r as randomId, b as boolean, a as getElementTree, h as handleKeyboardSubmit, e as getClickedElement } from './utils-420e8552.js';
+import { h as KeyboardCode, n as ListDividerType } from './index-9d028352.js';
+import { r as randomId, b as boolean, a as getElementTree, h as handleKeyboardSubmit, e as getClickedElement } from './utils-39ca028c.js';
 import './breakpoints-c386984e.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)}";
@@ -7,9 +8,8 @@ const stylesCss$1 = "label{display:block;margin:var(--space-unit) 0;color:var(--
 const ZInputLabel = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.value = undefined;
+    /** the label is disabled */
     this.disabled = false;
-    this.htmlfor = undefined;
   }
   render() {
     return (h("label", { htmlFor: this.htmlfor, class: { disabled: this.disabled } }, this.value));
@@ -23,23 +23,23 @@ const ZSelect = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.optionSelect = createEvent(this, "optionSelect", 7);
-    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.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);
@@ -143,7 +143,7 @@ const ZSelect = class {
     }
   }
   arrowsSelectNav(e, key) {
-    const arrows = ["ArrowDown" /* KeyboardCode.ARROW_DOWN */, "ArrowUp" /* KeyboardCode.ARROW_UP */];
+    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];
     if (!arrows.includes(e.key)) {
       return;
     }
@@ -153,10 +153,10 @@ const ZSelect = class {
       this.toggleSelectUl();
     }
     let index;
-    if (e.key === "ArrowDown" /* KeyboardCode.ARROW_DOWN */) {
+    if (e.key === KeyboardCode.ARROW_DOWN) {
       index = key + 1 === this.itemsList.length ? 0 : key + 1;
     }
-    else if (e.key === "ArrowUp" /* KeyboardCode.ARROW_UP */) {
+    else if (e.key === KeyboardCode.ARROW_UP) {
       index = key <= 0 ? this.itemsList.length - 1 : key - 1;
     }
     this.focusSelectItem(index);
@@ -194,11 +194,11 @@ const ZSelect = class {
     this.toggleSelectUl();
   }
   handleSelectFocus(e) {
-    if (e instanceof KeyboardEvent && e.key === "Escape" /* KeyboardCode.ESC */) {
+    if (e instanceof KeyboardEvent && e.key === 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 !== KeyboardCode.TAB && e.key !== KeyboardCode.ENTER) {
       return;
     }
     const tree = getElementTree(getClickedElement());
@@ -248,7 +248,7 @@ const ZSelect = class {
       return this.renderNoSearchResults();
     }
     return this.itemsList.map((item, key) => {
-      return (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) }, h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
+      return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: 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) }, h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
     });
   }
   renderNoSearchResults() {

package/dist/esm/z-list-group.entry.js

@@ -1,13 +1,26 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { j as ListSize, n as ListDividerType, D as DividerSize } from './index-9d028352.js';
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.z-list-group-header-container{color:var(--gray700);font-size:var(--font-size-2);font-weight:var(--font-sb) !important;letter-spacing:0.16px;line-height:1.4}:host>.z-list-group-header-container.has-header{padding-top:var(--space-unit);padding-bottom:var(--space-unit)}:host>.z-list-group-header-container.has-header>z-divider{margin-top:var(--space-unit)}";
 
 const ZListGroup = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.size = "medium" /* ListSize.MEDIUM */;
-    this.dividerType = "none" /* ListDividerType.NONE */;
-    this.dividerSize = "small" /* DividerSize.SMALL */;
+    /**
+     * [optional] Sets size of inside elements.
+     */
+    this.size = ListSize.MEDIUM;
+    /**
+     * [optional] Sets the position where to insert the divider.
+     */
+    this.dividerType = ListDividerType.NONE;
+    /**
+     * [optional] Sets the divider size.
+     */
+    this.dividerSize = DividerSize.SMALL;
+    /**
+     * [optional] Sets the divider color.
+     */
     this.dividerColor = "gray200";
   }
   componentDidLoad() {
@@ -28,7 +41,7 @@ const ZListGroup = class {
     return (h(Host, { role: "group" }, h("div", { class: {
         "z-list-group-header-container": true,
         "has-header": this.hasHeader,
-      } }, h("slot", { name: "header-title" }), this.dividerType === "header" /* ListDividerType.HEADER */ && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))), h("slot", null)));
+      } }, h("slot", { name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))), h("slot", null)));
   }
   get host() { return getElement(this); }
 };

package/dist/esm/z-list_2.entry.js

@@ -1,11 +1,15 @@
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-a2ca4b97.js';
+import { j as ListSize, l as ExpandableListButtonAlign, n as ListDividerType, D as DividerSize, E as ExpandableListStyle, h as KeyboardCode } from './index-9d028352.js';
 
 const stylesCss$1 = ":host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}";
 
 const ZList = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.size = "medium" /* ListSize.MEDIUM */;
+    /**
+     * [optional] Sets size of inside elements.
+     */
+    this.size = ListSize.MEDIUM;
   }
   setChildrenSizeType() {
     const children = this.host.children;
@@ -33,6 +37,51 @@ const ZListElement = class {
     registerInstance(this, hostRef);
     this.accessibleFocus = createEvent(this, "accessibleFocus", 7);
     this.clickItem = createEvent(this, "clickItem", 7);
+    /**
+     * [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;
+    /**
+     * [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;
+    this.showInnerContent = false;
     this.openElementConfig = {
       accordion: {
         open: "minus-circled",
@@ -43,19 +92,6 @@ const ZListElement = class {
         close: "chevron-down",
       },
     };
-    this.alignButton = "left" /* ExpandableListButtonAlign.LEFT */;
-    this.clickable = false;
-    this.dividerColor = "color-surface03";
-    this.dividerType = "none" /* ListDividerType.NONE */;
-    this.dividerSize = "small" /* DividerSize.SMALL */;
-    this.expandable = false;
-    this.expandableStyle = "accordion" /* ExpandableListStyle.ACCORDION */;
-    this.listElementId = undefined;
-    this.size = "medium" /* ListSize.MEDIUM */;
-    this.color = "none";
-    this.disabled = false;
-    this.isContextualMenu = false;
-    this.showInnerContent = false;
     this.handleClick = this.handleClick.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
   }
@@ -83,17 +119,17 @@ const ZListElement = class {
     return "container";
   }
   handleKeyDown(event) {
-    const expandByKey = event.code === "Enter" /* KeyboardCode.ENTER */;
+    const expandByKey = event.code === KeyboardCode.ENTER;
     switch (event.code) {
-      case "ArrowDown" /* KeyboardCode.ARROW_DOWN */:
+      case KeyboardCode.ARROW_DOWN:
         event.preventDefault();
         this.accessibleFocus.emit(this.listElementId + 1);
         break;
-      case "ArrowUp" /* KeyboardCode.ARROW_UP */:
+      case KeyboardCode.ARROW_UP:
         event.preventDefault();
         this.accessibleFocus.emit(this.listElementId - 1);
         break;
-      case "Enter" /* KeyboardCode.ENTER */:
+      case KeyboardCode.ENTER:
         event.preventDefault();
         this.clickItem.emit(this.listElementId);
         break;
@@ -129,7 +165,7 @@ const ZListElement = class {
       } }, h("slot", { name: "inner-content" })));
   }
   render() {
-    return (h(Host, { role: "listitem", "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: !this.isContextualMenu ? "0" : null }, h("div", { class: `${this.calculateClass()}`, style: { color: `var(--${this.color})` }, tabindex: this.isContextualMenu ? "0" : "-1", id: `z-list-element-id-${this.listElementId}` }, h("div", { class: "z-list-element-container" }, this.renderExpandableButton(), h("slot", null)), this.renderExpandedContent()), this.dividerType === "element" /* ListDividerType.ELEMENT */ && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
+    return (h(Host, { role: "listitem", "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: !this.isContextualMenu ? "0" : null }, h("div", { class: `${this.calculateClass()}`, style: { color: `var(--${this.color})` }, tabindex: this.isContextualMenu ? "0" : "-1", id: `z-list-element-id-${this.listElementId}` }, h("div", { class: "z-list-element-container" }, this.renderExpandableButton(), h("slot", null)), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
   }
   get host() { return getElement(this); }
 };