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

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

@@ -1,5 +1,4 @@
 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}}";
 
@@ -9,6 +8,12 @@ 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() {
@@ -57,7 +62,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: 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: "small" /* 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);
-    /** render close icon flag */
+    this.boxid = undefined;
     this.isclosable = true;
   }
   emitInfoBoxClose() {

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

@@ -1,18 +1,14 @@
 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";
-    /** Info reveal's position */
-    this.position = InfoRevealPosition.BOTTOM_RIGHT;
-    /** Whether the info panel is open. */
+    this.position = "bottom_right" /* InfoRevealPosition.BOTTOM_RIGHT */;
+    this.label = undefined;
     this.open = false;
-    /** Current index for the info queue. */
     this.currentIndex = null;
   }
   watchItems() {

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

@@ -1,6 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2ca4b97.js';
-import { I as InputType } from './index-9d028352.js';
-import { r as randomId } from './utils-39ca028c.js';
+import { r as randomId } from './utils-420e8552.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)}";
@@ -13,28 +12,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()}`;
-    /** the input aria-label */
+    this.type = undefined;
+    this.name = undefined;
+    this.label = undefined;
     this.ariaLabel = "";
-    /** the input is disabled */
+    this.value = undefined;
     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;
-    /** show input helper message (optional): available for text, password, number, email, textarea, select */
+    this.placeholder = undefined;
+    this.htmltitle = undefined;
+    this.status = undefined;
     this.hasmessage = true;
-    /** the input label position: available for checkbox, radio */
+    this.message = undefined;
     this.labelafter = true;
-    /** timeout setting before trigger `inputChange` event (optional): available for text, textarea */
     this.typingtimeout = 300;
-    /** multiple options can be selected (optional): available for select */
+    this.items = undefined;
+    this.autocomplete = undefined;
     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 = "";
@@ -43,8 +42,8 @@ const ZInputDeprecated = class {
   inputCheckListener(e) {
     const data = e.detail;
     switch (this.type) {
-      case InputType.RADIO:
-        if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {
+      case "radio" /* InputType.RADIO */:
+        if (data.type === "radio" /* InputType.RADIO */ && data.name === this.name && data.id !== this.htmlid) {
           this.checked = false;
         }
         break;
@@ -77,8 +76,8 @@ const ZInputDeprecated = class {
   /** get checked status */
   async isChecked() {
     switch (this.type) {
-      case InputType.CHECKBOX:
-      case InputType.RADIO:
+      case "checkbox" /* InputType.CHECKBOX */:
+      case "radio" /* InputType.RADIO */:
         return this.checked;
       default:
         return false;
@@ -89,7 +88,7 @@ const ZInputDeprecated = class {
       this.emitStartTyping();
     }
     let validity;
-    if (this.type === InputType.TEXTAREA) {
+    if (this.type === "textarea" /* InputType.TEXTAREA */) {
       validity = this.getValidity("textarea");
     }
     else {
@@ -150,15 +149,15 @@ const ZInputDeprecated = class {
     }
     return attr;
   }
-  renderInputText(type = InputType.TEXT) {
+  renderInputText(type = "text" /* InputType.TEXT */) {
     const attr = this.getTextAttributes();
-    if (this.icon || type === InputType.PASSWORD) {
+    if (this.icon || type === "password" /* 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 === InputType.PASSWORD && !this.passwordHidden ? 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 === "password" /* InputType.PASSWORD */ && !this.passwordHidden ? "text" /* InputType.TEXT */ : type }, attr, { "aria-label": this.ariaLabel || this.label })), this.renderIcons()), this.renderMessage()));
   }
   renderLabel() {
     if (!this.label) {
@@ -173,7 +172,7 @@ const ZInputDeprecated = class {
       } }, this.renderResetIcon(), this.renderIcon()));
   }
   renderIcon() {
-    if (this.type === InputType.PASSWORD) {
+    if (this.type === "password" /* InputType.PASSWORD */) {
       return this.renderShowHidePassword();
     }
     if (!this.icon) {
@@ -232,16 +231,16 @@ const ZInputDeprecated = class {
   /* END select */
   render() {
     switch (this.type) {
-      case InputType.TEXT:
-      case InputType.PASSWORD:
-      case InputType.NUMBER:
-      case InputType.EMAIL:
+      case "text" /* InputType.TEXT */:
+      case "password" /* InputType.PASSWORD */:
+      case "number" /* InputType.NUMBER */:
+      case "email" /* InputType.EMAIL */:
         return this.renderInputText(this.type);
-      case InputType.TEXTAREA:
+      case "textarea" /* InputType.TEXTAREA */:
         return this.renderTextarea();
-      case InputType.CHECKBOX:
+      case "checkbox" /* InputType.CHECKBOX */:
         return this.renderCheckbox();
-      case InputType.RADIO:
+      case "radio" /* InputType.RADIO */:
         return this.renderRadio();
       // @ts-ignore
       case "select":

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

@@ -1,6 +1,5 @@
 import { r as registerInstance, h, c as createEvent, g as getElement } from './index-a2ca4b97.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 { r as randomId, b as boolean, a as getElementTree, h as handleKeyboardSubmit, e as getClickedElement } from './utils-420e8552.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)}";
@@ -8,8 +7,9 @@ const stylesCss$1 = "label{display:block;margin:var(--space-unit) 0;color:var(--
 const ZInputLabel = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /** the label is disabled */
+    this.value = undefined;
     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);
-    /** the id of the input element */
+    this.itemsList = [];
     this.htmlid = `id-${randomId()}`;
-    /** the input aria-label */
+    this.items = undefined;
+    this.name = undefined;
+    this.label = undefined;
     this.ariaLabel = "";
-    /** the input is disabled */
     this.disabled = false;
-    /** the input is readonly */
     this.readonly = false;
-    /** input helper message (optional) - if set to `false` message won't be displayed */
+    this.placeholder = undefined;
+    this.htmltitle = undefined;
+    this.status = undefined;
     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.itemsList = [];
+    this.searchString = undefined;
     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 = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];
+    const arrows = ["ArrowDown" /* KeyboardCode.ARROW_DOWN */, "ArrowUp" /* KeyboardCode.ARROW_UP */];
     if (!arrows.includes(e.key)) {
       return;
     }
@@ -153,10 +153,10 @@ const ZSelect = class {
       this.toggleSelectUl();
     }
     let index;
-    if (e.key === KeyboardCode.ARROW_DOWN) {
+    if (e.key === "ArrowDown" /* KeyboardCode.ARROW_DOWN */) {
       index = key + 1 === this.itemsList.length ? 0 : key + 1;
     }
-    else if (e.key === KeyboardCode.ARROW_UP) {
+    else if (e.key === "ArrowUp" /* 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 === KeyboardCode.ESC) {
+    if (e instanceof KeyboardEvent && e.key === "Escape" /* KeyboardCode.ESC */) {
       e.stopPropagation();
       return this.toggleSelectUl(true);
     }
-    if (e instanceof KeyboardEvent && e.key !== KeyboardCode.TAB && e.key !== KeyboardCode.ENTER) {
+    if (e instanceof KeyboardEvent && e.key !== "Tab" /* KeyboardCode.TAB */ && e.key !== "Enter" /* 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: 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: "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 })));
     });
   }
   renderNoSearchResults() {

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

@@ -1,26 +1,13 @@
 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);
-    /**
-     * [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.size = "medium" /* ListSize.MEDIUM */;
+    this.dividerType = "none" /* ListDividerType.NONE */;
+    this.dividerSize = "small" /* DividerSize.SMALL */;
     this.dividerColor = "gray200";
   }
   componentDidLoad() {
@@ -41,7 +28,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 === ListDividerType.HEADER && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))), h("slot", null)));
+      } }, h("slot", { name: "header-title" }), this.dividerType === "header" /* 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,15 +1,11 @@
 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);
-    /**
-     * [optional] Sets size of inside elements.
-     */
-    this.size = ListSize.MEDIUM;
+    this.size = "medium" /* ListSize.MEDIUM */;
   }
   setChildrenSizeType() {
     const children = this.host.children;
@@ -37,51 +33,6 @@ 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",
@@ -92,6 +43,19 @@ 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);
   }
@@ -119,17 +83,17 @@ const ZListElement = class {
     return "container";
   }
   handleKeyDown(event) {
-    const expandByKey = event.code === KeyboardCode.ENTER;
+    const expandByKey = event.code === "Enter" /* KeyboardCode.ENTER */;
     switch (event.code) {
-      case KeyboardCode.ARROW_DOWN:
+      case "ArrowDown" /* KeyboardCode.ARROW_DOWN */:
         event.preventDefault();
         this.accessibleFocus.emit(this.listElementId + 1);
         break;
-      case KeyboardCode.ARROW_UP:
+      case "ArrowUp" /* KeyboardCode.ARROW_UP */:
         event.preventDefault();
         this.accessibleFocus.emit(this.listElementId - 1);
         break;
-      case KeyboardCode.ENTER:
+      case "Enter" /* KeyboardCode.ENTER */:
         event.preventDefault();
         this.clickItem.emit(this.listElementId);
         break;
@@ -165,7 +129,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 === 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 === "element" /* ListDividerType.ELEMENT */ && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
   }
   get host() { return getElement(this); }
 };

package/dist/esm/z-menu-dropdown_2.entry.js

@@ -1,6 +1,5 @@
 import { r as registerInstance, h } from './index-a2ca4b97.js';
-import { K as KeyboardKeyCode } from './index-9d028352.js';
-import { a as getElementTree, h as handleKeyboardSubmit, e as getClickedElement } from './utils-39ca028c.js';
+import { a as getElementTree, h as handleKeyboardSubmit, e as getClickedElement } from './utils-420e8552.js';
 import './breakpoints-c386984e.js';
 
 const stylesCss$1 = ":host{width:inherit;height:32px;font-family:var(--dashboard-font);font-size:12px;font-weight:var(--font-sb);letter-spacing:0.17px}a,a:visited,a:active{color:inherit;text-decoration:none}:host>a{display:block;border:var(--border-size-small) solid transparent;background:var(--bg-grey-050);border-radius:var(--border-radius);color:var(--text-grey-800);outline:none}:host>a::-moz-focus-inner{border:0}:host>a:hover,:host>a.menu-opened:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}:host>a:focus{border:var(--border-size-small) solid var(--myz-blue);box-shadow:0 0 2px 2px var(--myz-blue-light);color:var(--myz-blue);fill:var(--myz-blue)}:host>a:active{border:var(--border-size-small) solid var(--myz-blue-light);box-shadow:0 2px 4px 0 rgb(0 0 0 / 40%);color:var(--myz-blue-light);fill:var(--myz-blue-light)}div.container{position:relative;display:flex;height:32px;align-items:center;justify-content:space-between;padding:0 var(--basex1)}div.container>span.user-wrapper{display:flex}div.container>span.user-wrapper>span.user{overflow:hidden;width:30px;padding:0 var(--basex1);cursor:pointer;text-overflow:ellipsis;white-space:nowrap}div.container>span.arrow{display:flex;align-items:center;justify-content:center}div.container>span.arrow>z-icon{transform:rotate(360deg);transition:all 200ms linear}ul{padding:0 calc(var(--space-unit) * 2);margin:0;list-style:none}li{display:flex;width:max-content;height:var(--basex3);align-items:center;padding:calc(var(--space-unit) / 4) 0}.menu-opened{position:inherit;width:auto !important;min-width:147px;padding-bottom:calc(var(--space-unit) * 2)}.menu-opened a,.menu-opened a:active,.menu-opened a:visited{color:var(--myz-blue);fill:var(--myz-blue)}.menu-opened a:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}.menu-opened>div.container{margin-bottom:var(--basex1)}.menu-opened>div.container>span.user-wrapper>span.user{width:auto}.menu-opened>div.container>span.arrow>z-icon{transform:rotate(180deg);transition:all 200ms linear}@media only screen and (min-width: 1152px){:host>a{width:147px;padding:0 calc(var(--space-unit) / 4)}:host>a.menu-opened{width:147px;padding-bottom:calc(var(--space-unit) * 2)}div.container>span.user-wrapper>span.user{width:80px}}";
@@ -8,6 +7,9 @@ const stylesCss$1 = ":host{width:inherit;height:32px;font-family:var(--dashboard
 const ZMenuDropdown = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.nomeutente = undefined;
+    this.menucontent = undefined;
+    this.buttonid = undefined;
     this.ismenuopen = false;
     this.handleToggle = this.handleToggle.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
@@ -32,7 +34,7 @@ const ZMenuDropdown = class {
     this.ismenuopen = !this.ismenuopen;
   }
   handleFocus(e) {
-    if (e instanceof KeyboardEvent && e.keyCode !== KeyboardKeyCode.TAB) {
+    if (e instanceof KeyboardEvent && e.keyCode !== 9 /* KeyboardKeyCode.TAB */) {
       return;
     }
     const tree = getElementTree(getClickedElement());
@@ -57,6 +59,8 @@ const stylesCss = "ul{padding:0;margin:0}";
 const ZMyzList = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.inputrawdata = undefined;
+    this.list = undefined;
   }
   componentWillLoad() {
     if (this.inputrawdata) {

package/dist/esm/z-menu-section.entry.js

@@ -7,6 +7,9 @@ const ZMenuSection = class {
     registerInstance(this, hostRef);
     this.opened = createEvent(this, "opened", 7);
     this.closed = createEvent(this, "closed", 7);
+    this.active = undefined;
+    this.open = undefined;
+    this.hasContent = undefined;
   }
   toggle() {
     if (!this.hasContent) {

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

@@ -7,18 +7,11 @@ const ZMenu = class {
     registerInstance(this, hostRef);
     this.opened = createEvent(this, "opened", 7);
     this.closed = createEvent(this, "closed", 7);
-    /**
-     * Flag to set the display mode of the list.
-     * If true, the list will be absolutely positioned under the menu label,
-     * stacked beneath it otherwise.
-     * @default false
-     */
+    this.active = undefined;
     this.floating = false;
-    /**
-     * The opening state of the menu.
-     * @default false
-     */
     this.open = false;
+    this.hasHeader = undefined;
+    this.hasContent = undefined;
     this.toggle = this.toggle.bind(this);
     this.checkContent = this.checkContent.bind(this);
     this.onItemsChange = this.onItemsChange.bind(this);

package/dist/esm/z-messages-pocket.entry.js

@@ -1,13 +1,13 @@
 import { r as registerInstance, h } from './index-a2ca4b97.js';
-import { r as PocketStatus } from './index-9d028352.js';
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-pocket{width:100%}:host>z-pocket.closed{width:158px}:host>z-pocket>z-pocket-header{color:var(--color-primary01);fill:var(--color-primary01);font-size:12px;font-weight:var(--font-sb)}:host>z-pocket>z-pocket-header span.badge{display:inline-block;padding:0 calc(var(--space-unit) * 0.5);margin-left:var(--space-unit);background:var(--color-secondary02);border-radius:50%;color:var(--color-surface01)}:host>z-pocket>z-pocket-header>z-icon{margin-left:var(--space-unit)}:host>z-pocket>z-pocket-body>div.body{overflow:hidden;padding:var(--space-unit);margin:0 var(--space-unit)}:host>z-pocket.preview>z-pocket-body{position:relative}:host>z-pocket.preview>z-pocket-body>div.gradient{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgb(255 0 0 / 0%), white)}:host>z-pocket.open>z-pocket-body>div.body{overflow:auto;max-height:calc(100vh - 166px);scrollbar-width:none}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>z-pocket{width:768px;margin:0 calc((100% - 768px) / 2)}:host>z-pocket.closed{margin:0 calc((100% - 158px) / 2)}:host>z-pocket.open>z-pocket-body>div.body{max-height:326px}}@media only screen and (min-width: 1152px){:host>z-pocket.open>z-pocket-body>div.body{scrollbar-color:var(--color-primary01) var(--color-surface03);scrollbar-width:thin}:host ::-webkit-scrollbar{width:10px;background:linear-gradient(\n      90deg,\n      var(--color-surface01) 2px,\n      var(--color-surface03) 4px,\n      var(--color-surface01) 8px\n    );border-radius:var(--radius-base)}:host ::-webkit-scrollbar-thumb{width:var(--space-unit);background-color:var(--color-primary01);border-radius:var(--radius-base)}}";
 
 const ZMessagesPocket = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /** pocket status */
-    this.status = PocketStatus.PREVIEW;
+    this.pocketid = undefined;
+    this.messages = undefined;
+    this.status = "preview" /* PocketStatus.PREVIEW */;
   }
   handlePocketToggle(e) {
     if (e.detail.id === this.pocketid) {
@@ -18,12 +18,12 @@ const ZMessagesPocket = class {
     let message;
     let icon;
     switch (this.status) {
-      case PocketStatus.PREVIEW:
-      case PocketStatus.CLOSED:
+      case "preview" /* PocketStatus.PREVIEW */:
+      case "closed" /* PocketStatus.CLOSED */:
         message = (h("span", null, "Messaggi ", h("span", { class: "badge" }, this.messages)));
         icon = "chevron-up";
         break;
-      case PocketStatus.OPEN:
+      case "open" /* PocketStatus.OPEN */:
         message = h("span", null, "Riduci");
         icon = "chevron-down";
         break;