@zanichelli/delta_share 2.0.5 → 2.0.6

package/dist/wc/cjs/{license-activation_16.cjs.entry.js → license-activation_13.cjs.entry.js}

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-771eb01e.js');
+const index = require('./index-9ca7d5e5.js');
 const _commonjsHelpers = require('./_commonjsHelpers-537d719a.js');
-const index$1 = require('./index-b9bd2767.js');
-const index$2 = require('./index-1fda0714.js');
-const icons = require('./icons-f65fa82e.js');
-const utils = require('./utils-1f907efa.js');
+const index$1 = require('./index-9c6fd1db.js');
+const icons = require('./icons-2aca6c75.js');
+const utils = require('./utils-8a10bba9.js');
+require('./breakpoints-a55736d0.js');
 
 var DeviceEnum;
 (function (DeviceEnum) {
@@ -1999,7 +1999,7 @@ const LicenseActivationForm = class {
         ? previewInputPlaceholder
         : placeholder, status: this.variant === LicenseActivationVariantEnum.box
         ? null
-        : inputStatus, hasmessage: false, htmltitle: placeholder, disabled: !!this.requestLoading, onInputChange: (e) => this.handleFormInputChange(e.detail) }), this.renderInputMessage()));
+        : inputStatus, message: false, htmltitle: placeholder, disabled: !!this.requestLoading, onInputChange: (e) => this.handleFormInputChange(e.detail) }), this.renderInputMessage()));
   }
   renderInputMessage() {
     const { inputMessage, inputStatus } = this.formTexts;
@@ -2014,13 +2014,9 @@ const LicenseActivationForm = class {
   }
   renderButton() {
     const disabled = (this.variant === LicenseActivationVariantEnum.modal && !this.inputVal) ||
-      !!this.requestLoading;
-    return (index.h("z-button", { variant: index$1.ButtonVariantEnum.primary, size: this.getButtonSize(this.variant), square: this.getButtonSquare(this.variant), disabled: disabled || !this.enableButton || this.requestLoading, onClick: () => this.handleSubmitButtonClick(this.inputVal) }, this.renderButtonValue(this.variant, disabled)));
-  }
-  renderButtonValue(variant, disabled = false) {
-    const icon = this.getButtonIcon(variant);
-    const label = this.getButtonLabel(variant);
-    return (index.h("button", { slot: "element", disabled: disabled }, icon ? index.h("z-icon", { name: icon }) : null, label));
+      !!this.requestLoading ||
+      !this.enableButton;
+    return (index.h("z-button", { variant: index$1.ButtonVariantEnum.primary, size: this.getButtonSize(this.variant), icon: this.getButtonIcon(this.variant), disabled: disabled, onClick: () => this.handleSubmitButtonClick(this.inputVal) }, this.getButtonLabel(this.variant)));
   }
   renderAdditionalDescription() {
     const { additionalDescription } = this.formTexts;
@@ -2126,11 +2122,11 @@ const ZBody = class {
     this.variant = "regular";
   }
   render() {
-    return (index.h("z-typography", { component: this.component || "span", level: `b${this.level}`, variant: this.variant }, index.h("slot", null)));
+    return (index.h("z-typography", { tabIndex: 0, component: this.component || "span", level: `b${this.level}`, variant: this.variant }, index.h("slot", null)));
   }
 };
 
-const stylesCss$a = ":host{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:var(--space-unit)}button:disabled,::slotted(button:disabled){pointer-events:none}button,::slotted(button),::slotted(a){box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:14px;line-height:1;letter-spacing:0.3px;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);vertical-align:middle;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;outline:none;width:100%}button.big,:host([size=\"big\"]) ::slotted(button),:host([size=\"big\"]) ::slotted(a){height:44px;min-width:44px}button.small,:host([size=\"small\"]) ::slotted(button),:host([size=\"small\"]) ::slotted(a){height:36px;min-width:36px}button.issmall,:host([issmall]) ::slotted(button),:host([issmall]) ::slotted(a){height:36px;min-width:36px}button.x-small,:host([size=\"x-small\"]) ::slotted(button),:host([size=\"x-small\"]) ::slotted(a){height:32px;min-width:32px}button:not(.square),:host(:not([square])) ::slotted(button),:host(:not([square])) ::slotted(a){min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}button.square,:host([square]){--z-icon-right-margin:0}button.primary,:host([variant=\"primary\"]) ::slotted(button),:host([variant=\"primary\"]) ::slotted(a){background-color:var(--myz-blue);border-color:var(--myz-blue);color:var(--bg-white);fill:var(--bg-white)}@media (hover: hover){button.primary:hover,:host([variant=\"primary\"]) ::slotted(button:hover),:host([variant=\"primary\"]) ::slotted(a:hover){background-color:var(--myz-blue-dark);border-color:var(--myz-blue-dark);color:var(--bg-white);fill:var(--bg-white)}}button.primary:focus:focus-visible,:host([variant=\"primary\"]) ::slotted(button:focus:focus-visible),:host([variant=\"primary\"]) ::slotted(a:focus:focus-visible){background-color:var(--myz-blue);border-color:var(--myz-blue);color:var(--bg-white);fill:var(--bg-white);box-shadow:0px 0px 2px 2px var(--accent-dark)}button.primary:active,:host([variant=\"primary\"]) ::slotted(button:active),:host([variant=\"primary\"]) ::slotted(a:active){background-color:var(--myz-blue-light);border-color:var(--myz-blue-light);color:var(--bg-white);fill:var(--bg-white);box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.4)}button:disabled,:host([variant=\"primary\"]) ::slotted(button:disabled){background-color:var(--bg-neutral-200);border-color:var(--bg-neutral-200);color:var(--text-grey-700);fill:var(--text-grey-700)}button.secondary,:host([variant=\"secondary\"]) ::slotted(button),:host([variant=\"secondary\"]) ::slotted(a){background-color:var(--bg-white);border-color:var(--myz-blue);color:var(--myz-blue);fill:var(--myz-blue)}@media (hover: hover){button.secondary:hover,:host([variant=\"secondary\"]) ::slotted(button:hover),:host([variant=\"secondary\"]) ::slotted(a:hover){background-color:var(--bg-white);border-color:var(--myz-blue-dark);color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}}button.secondary:focus:focus-visible,:host([variant=\"secondary\"]) ::slotted(button:focus:focus-visible),:host([variant=\"secondary\"]) ::slotted(a:focus:focus-visible){background-color:var(--bg-white);border-color:var(--myz-blue);color:var(--myz-blue);fill:var(--myz-blue);box-shadow:0px 0px 2px 2px var(--accent-dark)}button.secondary:active,:host([variant=\"secondary\"]) ::slotted(button:active),:host([variant=\"secondary\"]) ::slotted(a:active){background-color:var(--bg-white);border-color:var(--myz-blue-light);color:var(--myz-blue-light);fill:var(--myz-blue-light);box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.4)}button.secondary:disabled,:host([variant=\"secondary\"]) ::slotted(button:disabled){background-color:var(--bg-white);border-color:var(--bg-neutral-200);color:var(--text-grey-700);fill:var(--text-grey-700)}button.tertiary,:host([variant=\"tertiary\"]) ::slotted(button),:host([variant=\"tertiary\"]) ::slotted(a){background-color:transparent;border-color:transparent;color:var(--myz-blue);fill:var(--myz-blue)}button.tertiary.hasContent{padding:0 var(--space-unit)}@media (hover: hover){button.tertiary:hover,:host([variant=\"tertiary\"]) ::slotted(button:hover),:host([variant=\"tertiary\"]) ::slotted(a:hover){background-color:var(--myz-blue-lighter);border-color:var(--myz-blue-lighter);color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}}button.tertiary:focus:focus-visible,:host([variant=\"tertiary\"]) ::slotted(button:focus:focus-visible),:host([variant=\"tertiary\"]) ::slotted(a:focus:focus-visible){background-color:var(--bg-white);border-color:var(--bg-white);color:var(--myz-blue);fill:var(--myz-blue);box-shadow:0px 0px 2px 2px var(--accent-dark)}button.tertiary:active,:host([variant=\"tertiary\"]) ::slotted(button:active),:host([variant=\"tertiary\"]) ::slotted(a:active){background-color:var(--bg-white);border-color:var(--bg-white);color:var(--myz-blue-light);fill:var(--myz-blue-light);box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.4)}button.tertiary:disabled,:host([variant=\"tertiary\"]) ::slotted(button:disabled){background-color:transparent;border-color:transparent;color:var(--text-grey-700);fill:var(--text-grey-700)}";
+const stylesCss$7 = ".sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:0}[disabled].sc-z-button-h:not([disabled=\"false\"]){pointer-events:none}.sc-z-button-h .container.sc-z-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:100%;padding:0;font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:1;letter-spacing:0.3px;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;outline:none;fill:currentColor}.sc-z-button-h .container.has-text.sc-z-button{min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}.sc-z-button-h .container.has-text.sc-z-button z-icon.sc-z-button{--z-icon-right-margin:var(--space-unit)}.sc-z-button-h .big.sc-z-button{height:44px;min-width:44px}.sc-z-button-h .small.sc-z-button{height:36px;min-width:36px}.sc-z-button-h .x-small.sc-z-button{height:32px;min-width:32px}.sc-z-button-h .primary.sc-z-button{background-color:var(--color-primary01);border-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){.sc-z-button-h .primary.sc-z-button:hover{background-color:var(--color-hover-primary);border-color:var(--color-hover-primary);color:var(--color-text-inverse)}}.sc-z-button-h .container.sc-z-button:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-button-h .primary.sc-z-button:active{background-color:var(--color-pressed-primary);border-color:var(--color-pressed-primary);color:var(--color-text-inverse);box-shadow:var(--shadow-2)}[disabled].sc-z-button-h:not([disabled=\"false\"]) .primary.sc-z-button{background-color:var(--color-disabled01);border-color:var(--color-disabled01);color:var(--color-disabled02)}.sc-z-button-h .secondary.sc-z-button{background-color:var(--color-surface01);border-color:var(--color-primary01);color:var(--color-primary01)}@media (hover: hover){.sc-z-button-h .secondary.sc-z-button:hover{background-color:var(--color-surface01);border-color:var(--color-hover-primary);color:var(--color-hover-primary)}}.sc-z-button-h .secondary.sc-z-button:active{background-color:var(--color-surface01);border-color:var(--color-pressed-primary);color:var(--color-pressed-primary);box-shadow:var(--shadow-2)}[disabled].sc-z-button-h:not([disabled=\"false\"]) .secondary.sc-z-button{background-color:var(--color-surface01);border-color:var(--color-disabled01);color:var(--color-disabled02)}.sc-z-button-h .tertiary.sc-z-button{background-color:transparent;border-color:transparent;color:var(--color-primary01)}@media (hover: hover){.sc-z-button-h .tertiary.sc-z-button:hover{background-color:var(--color-primary03);border-color:var(--color-primary03);color:var(--color-hover-primary)}}.sc-z-button-h .tertiary.sc-z-button:focus:focus-visible{background-color:var(--color-surface01);border-color:var(--color-surface01);color:var(--color-primary01)}.sc-z-button-h .tertiary.sc-z-button:active{background-color:var(--color-surface01);border-color:var(--color-surface01);color:var(--color-primary01);box-shadow:var(--shadow-2)}[disabled].sc-z-button-h:not([disabled=\"false\"]) .tertiary.sc-z-button{background-color:transparent;border-color:transparent;color:var(--color-disabled02)}";
 
 const ZButton = class {
   constructor(hostRef) {
@@ -2139,72 +2135,41 @@ const ZButton = class {
     this.disabled = false;
     /** HTML button type attribute. */
     this.type = index$1.ButtonTypeEnum.button;
-    /** Graphical variant: `primary`, `secondary` and `tertiary`. Defaults to `primary`. */
+    /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
     this.variant = index$1.ButtonVariantEnum.primary;
     /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
     this.size = index$1.ButtonSizeEnum.big;
-    /** Reduce button size (deprecated).
-     *
-     * @deprecated Use `size` prop.
-     * */
-    this.issmall = false;
-    /** Spy to render square button. */
-    this.square = false;
   }
-  render() {
-    this.hostElement.style.pointerEvents = this.disabled ? "none" : "auto";
-    return (index.h("slot", { name: "element" }, index.h("button", { id: this.htmlid, name: this.name, type: this.type, disabled: this.disabled, class: index$2.classnames(this.variant, this.size, { issmall: this.issmall }, { square: this.square }) }, this.icon && index.h("z-icon", { name: this.icon, width: 16, height: 16 }), index.h("slot", null))));
-  }
-  get hostElement() { return index.getElement(this); }
-};
-ZButton.style = stylesCss$a;
-
-const stylesCss$9 = "button.container{min-height:32px;line-height:32px;border:var(--border-size-small) solid var(--bg-grey-200);border-radius:16px;box-shadow:0px 2px 5px 0px var(--bg-neutral-300);-webkit-box-shadow:0px 2px 5px 0px var(--bg-neutral-300);-moz-box-shadow:0px 2px 5px 0px var(--bg-neutral-300);text-align:center;padding:0 calc(var(--space-unit) * 2);cursor:pointer;letter-spacing:0.17px;font-family:var(--dashboard-font);font-size:12px;font-weight:var(--font-sb);opacity:1;transition:all 200ms linear}button.container.small{min-height:24px;line-height:24px}button.container:focus{outline:0}button.container::-moz-focus-inner{border:0}.text-container{margin-left:4px}button.container,button.container:focus,button.container:hover{background-color:var(--bg-white);color:var(--text-grey-700);fill:var(--text-grey-700)}button.container.isactive{background-color:var(--bg-white);color:var(--myz-blue);fill:var(--myz-blue)}button.container.isactive:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}button.container.isactive:focus{background-color:var(--myz-blue-dark);border-color:var(--myz-blue-dark);box-shadow:0px 0px 4px 0px var(--text-grey-800);color:var(--bg-white);fill:var(--bg-white)}";
-
-const ZButtonFilter = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.removefilter = index.createEvent(this, "removefilter", 7);
-    /** disable action on button */
-    this.isfixed = false;
-    /** add icon to button */
-    this.hasicon = true;
-    /** reduce button size (optional) */
-    this.issmall = false;
-    this.handleRemovingFilterClick = this.handleRemovingFilterClick.bind(this);
-  }
-  handleRemovingFilterClick() {
-    this.removefilter.emit({
-      filterid: this.filterid
-    });
-  }
-  renderFixedPillow(filtername) {
-    return (index.h("button", { class: "container" }, this.hasicon && (index.h("z-icon", { class: "close-icon-container", name: "multiply", height: 12, width: 12 })), index.h("span", { class: "text-container" }, filtername)));
-  }
-  renderDynamicPillow(filtername) {
-    return (index.h("button", { class: `container isactive ${this.issmall ? "small" : ""}`, onClick: this.handleRemovingFilterClick }, this.hasicon && (index.h("z-icon", { class: "close-icon-container", name: "multiply", height: 12, width: 12 })), index.h("span", { class: "text-container" }, filtername)));
+  getAttributes() {
+    return {
+      id: this.htmlid,
+      "aria-label": this.ariaLabel,
+      class: {
+        container: true,
+        [this.variant]: true,
+        [this.size]: true,
+        "has-text": !!this.hostElement.textContent
+      }
+    };
   }
   render() {
-    if (this.isfixed) {
-      return this.renderFixedPillow(this.filtername);
+    if (this.href) {
+      return (index.h("a", Object.assign({}, this.getAttributes(), { href: this.href, target: this.target }), this.icon && index.h("z-icon", { name: this.icon, width: 16, height: 16 }), index.h("slot", null)));
     }
-    return this.renderDynamicPillow(this.filtername);
+    return (index.h("button", Object.assign({}, this.getAttributes(), { name: this.name, type: this.type, disabled: this.disabled }), this.icon && index.h("z-icon", { name: this.icon, width: 16, height: 16 }), index.h("slot", null)));
   }
+  get hostElement() { return index.getElement(this); }
 };
-ZButtonFilter.style = stylesCss$9;
+ZButton.style = stylesCss$7;
 
-const stylesCss$8 = ":host{line-height:0;vertical-align:middle;width:var(--z-icon-width, 18px);height:var(--z-icon-height, 18px);margin-right:var(--z-icon-right-margin, 0);margin-left:var(--z-icon-left-margin, 0)}:host(:not([width])) svg{width:var(--z-icon-width, 18px)}:host(:not([height])) svg{height:var(--z-icon-height, 18px)}";
+const stylesCss$6 = ":host{line-height:0;vertical-align:middle;margin-right:var(--z-icon-right-margin, 0);margin-left:var(--z-icon-left-margin, 0)}:host svg:not([width]){width:var(--z-icon-width, 18px)}:host svg:not([height]){height:var(--z-icon-height, 18px)}";
 
 const ZIcon = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /** icon height (optional) */
-    this.height = 18;
-    /** icon width (optional) */
-    this.width = 18;
   }
   selectPathOrPolygon(iconName) {
-    if (iconName && iconName.startsWith('M')) {
+    if (iconName && iconName.startsWith("M")) {
       return index.h("path", { d: icons.icons[this.name] });
     }
     else {
@@ -2212,12 +2177,12 @@ const ZIcon = class {
     }
   }
   render() {
-    return (index.h("svg", { viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid }, this.selectPathOrPolygon(icons.icons[this.name])));
+    return (index.h("svg", { viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(icons.icons[this.name])));
   }
 };
-ZIcon.style = stylesCss$8;
+ZIcon.style = stylesCss$6;
 
-const stylesCss$7 = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}:host>div{background:var(--accent-lighter);padding:calc(var(--space-unit) * 2);border-radius:var(--border-radius);display:flex;width:inherit}:host>div>slot{color:var(--text-grey-800);font-size:14px}:host>div>z-icon{fill:var(--myz-blue);cursor:pointer;margin-left:calc(var(--space-unit) * 2)}";
+const stylesCss$5 = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}:host>div{background:var(--accent-lighter);padding:calc(var(--space-unit) * 2);border-radius:var(--border-radius);display:flex;width:inherit}:host>div>slot{color:var(--text-grey-800);font-size:14px}:host>div>z-icon{fill:var(--myz-blue);cursor:pointer;margin-left:calc(var(--space-unit) * 2)}";
 
 const ZInfoBox = class {
   constructor(hostRef) {
@@ -2233,9 +2198,9 @@ const ZInfoBox = class {
     return (index.h("div", { id: this.boxid }, index.h("slot", { name: "content" }), this.isclosable && index.h("z-icon", { name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() })));
   }
 };
-ZInfoBox.style = stylesCss$7;
+ZInfoBox.style = stylesCss$5;
 
-const stylesCss$6 = ".sc-z-input-h{display:inline-block;width:inherit}.sc-z-input-h input.sc-z-input::-ms-clear,.sc-z-input-h input.sc-z-input::-ms-reveal{display:none}.sc-z-input-h input.sc-z-input,.sc-z-input-h textarea.sc-z-input,.sc-z-input-h ul[role=\"listbox\"].sc-z-input{background:var(--bg-white);border-radius:0px;border:var(--border-size-small) solid var(--bg-grey-200);border-color:var(--bg-grey-200);box-sizing:border-box;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-weight:var(--font-rg);font-size:16px;outline:none}.sc-z-input-h .filled.sc-z-input{border-color:var(--text-grey-800) !important}.sc-z-input-h input.sc-z-input:focus,.sc-z-input-h ul[role=\"listbox\"].closed.sc-z-input:focus,.sc-z-input-h li[role=\"option\"].sc-z-input:focus,.sc-z-input-h .focus.sc-z-input{border-color:transparent;box-shadow:0 0 2px 2px var(--accent-dark);outline:none}.sc-z-input-h input.sc-z-input:hover,.sc-z-input-h textarea.sc-z-input:hover,.sc-z-input-h ul[role=\"listbox\"].closed.sc-z-input:hover,.sc-z-input-h .hover.sc-z-input{background:var(--bg-grey-050) !important;border-color:var(--text-grey-800) !important}.sc-z-input-h input[readonly].sc-z-input,.sc-z-input-h .readonly.sc-z-input,.sc-z-input-h input[readonly].filled.sc-z-input,.sc-z-input-h .readonly.filled.sc-z-input,.sc-z-input-h ul[role=\"listbox\"].closed.readonly.sc-z-input{border-color:var(--text-grey-200) !important;color:var(--text-grey-800) !important;pointer-events:none}.sc-z-input-h input[readonly].sc-z-input:hover,.sc-z-input-h textarea[readonly].sc-z-input:hover,.sc-z-input-h .readonly.hover.sc-z-input,.sc-z-input-h ul[role=\"listbox\"].closed[readonly].sc-z-input:hover{background:var(--bg-white)}.sc-z-input-h input.sc-z-input:disabled,.sc-z-input-h .disabled.sc-z-input,.sc-z-input-h .filled.sc-z-input:disabled,.sc-z-input-h input.sc-z-input:disabled:hover,.sc-z-input-h textarea.sc-z-input:disabled:hover,.sc-z-input-h .disabled.hover.sc-z-input,.sc-z-input-h ul[role=\"listbox\"].closed.disabled.sc-z-input,.sc-z-input-h ul[role=\"listbox\"].closed.disabled.sc-z-input:hover{background:var(--bg-white) !important;border-color:var(--bg-grey-200) !important;box-shadow:none !important;color:var(--text-grey-700) !important;fill:var(--bg-grey-200) !important;pointer-events:none}.sc-z-input-h .input_success.sc-z-input,.sc-z-input-h .input_success.sc-z-input:hover,.sc-z-input-h .input_success.hover.sc-z-input{background:var(--status-success-green-lighter) !important;border-color:var(--status-success-green) !important}.sc-z-input-h .input_error.sc-z-input,.sc-z-input-h .input_error.sc-z-input:hover,.sc-z-input-h .input_error.hover.sc-z-input{background:var(--status-error-red-lighter) !important;border-color:var(--status-error-red) !important}.sc-z-input-h .input_warning.sc-z-input,.sc-z-input-h .input_warning.sc-z-input:hover,.sc-z-input-h .input_warning.hover.sc-z-input{background:var(--status-warning-yellow-lighter) !important;border-color:var(--status-warning-yellow) !important}.sc-z-input-h .input_selecting.sc-z-input,.sc-z-input-h .input_selecting.sc-z-input:hover,.sc-z-input-h input[readonly].input_selecting.sc-z-input,.sc-z-input-h input[readonly].input_selecting.sc-z-input:hover{border-color:var(--myz-blue) !important;box-shadow:0 0 0 0 transparent !important;color:var(--myz-blue) !important}.sc-z-input-h input.sc-z-input:focus.istyping,.sc-z-input-h .focus.istyping.sc-z-input{border-color:var(--myz-blue) !important;box-shadow:var(--shadow-0);color:var(--myz-blue)}.sc-z-input-h input.sc-z-input::placeholder,.sc-z-input-h textarea.sc-z-input::placeholder{color:var(--text-grey-700)}.sc-z-input::-webkit-input-placeholder,.sc-z-input::-webkit-textarea-placeholder{color:var(--text-grey-700)}.sc-z-input:-ms-input-placeholder,.sc-z-input:-ms-textarea-placeholder{color:var(--text-grey-700)}.sc-z-input::-moz-placeholder{color:var(--text-grey-700)}.sc-z-input:-moz-placeholder{color:var(--text-grey-700)}.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input{fill:var(--text-grey-800)}.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>input.sc-z-input{height:44px;width:100%;margin:0;padding:0 calc(var(--space-unit) * 4.5) 0 calc(var(--space-unit) * 1.5);box-sizing:border-box}.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>input.hasIcon.sc-z-input,.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>input.hasClearIcon.sc-z-input{padding-right:calc(var(--space-unit) * 4)}.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>input.hasIcon.hasClearIcon.sc-z-input{padding-right:calc(var(--space-unit) * 7)}.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1}.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>span.iconsWrapper.sc-z-input{position:absolute;bottom:calc(var(--space-unit) * 1.5);right:calc(var(--space-unit) * 1.5);z-index:2;height:18px;display:flex}.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>span.iconsWrapper.sc-z-input>z-icon.sc-z-input{display:block;height:18px;width:18px;margin-left:calc(var(--space-unit) * 0.5)}.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>span.iconsWrapper.sc-z-input>z-icon.resetIcon.sc-z-input{cursor:pointer}.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill,.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:hover,.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:focus,.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:active{-webkit-background-clip:text !important}.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>div.textareaWrapper.sc-z-input{background:var(--bg-white);border:var(--border-size-small) solid var(--bg-grey-200);padding:calc(var(--space-unit) * 1.5)}.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>div.textareaWrapper.sc-z-input>textarea.sc-z-input{min-height:132px;width:100%;margin:0;padding:0;resize:none;scrollbar-width:thin;scrollbar-color:var(--myz-blue) var(--bg-grey-200);border-color:transparent}.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>div.textareaWrapper.sc-z-input>textarea.sc-z-input:hover{border-color:transparent !important}.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>div.textareaWrapper.sc-z-input>textarea.filled.sc-z-input,.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>div.textareaWrapper.sc-z-input>textarea.input_success.sc-z-input,.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>div.textareaWrapper.sc-z-input>textarea.input_warning.sc-z-input,.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>div.textareaWrapper.sc-z-input>textarea.input_error.sc-z-input{border:none}.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>div.textareaWrapper.input_success.disabled.sc-z-input,.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>div.textareaWrapper.input_warning.disabled.sc-z-input,.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>div.textareaWrapper.input_error.disabled.sc-z-input{background:var(--bg-white) !important;border-color:var(--bg-grey-200) !important}.sc-z-input-h>div.textWrapper.sc-z-input>div.sc-z-input>div.textareaWrapper.sc-z-input>textarea.istyping.sc-z-input{color:var(--myz-blue)}.sc-z-input::-webkit-scrollbar{background:linear-gradient(\n    90deg,\n    var(--bg-white) 2px,\n    var(--bg-grey-200) 4px,\n    var(--bg-white) 8px\n  );border-radius:var(--border-radius);width:10px;margin-right:20px;padding-right:20px}.sc-z-input::-webkit-scrollbar-thumb{background-color:var(--myz-blue);border-radius:var(--border-radius);width:10px;margin-right:20px;padding:20px}.sc-z-input-h>.checkboxWrapper.sc-z-input{display:inline-block;font-family:var(--dashboard-font);font-weight:var(--font-rg);font-size:inherit;position:relative}.sc-z-input-h>.checkboxWrapper.sc-z-input>input[type=\"checkbox\"].sc-z-input{opacity:0;position:absolute;z-index:0}.sc-z-input-h label.sc-z-input{display:block}.sc-z-input-h label.disabledLabel.sc-z-input{color:var(--text-grey-700)}.sc-z-input-h>.checkboxWrapper.sc-z-input>label.checkboxLabel.sc-z-input{display:inline-flex;line-height:16px;color:inherit;font-family:inherit;font-weight:inherit;font-size:inherit;text-transform:inherit;margin:0}.sc-z-input-h>.checkboxWrapper.sc-z-input>label.checkboxLabel.after.sc-z-input{flex-direction:row}.sc-z-input-h>.checkboxWrapper.sc-z-input>label.checkboxLabel.before.sc-z-input{flex-direction:row-reverse}.sc-z-input-h>.checkboxWrapper.sc-z-input>label.checkboxLabel.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.sc-z-input-h>.checkboxWrapper.sc-z-input>label.checkboxLabel.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}.sc-z-input-h>.checkboxWrapper.sc-z-input>label.checkboxLabel.sc-z-input>z-icon.sc-z-input{fill:var(--myz-blue);height:18px;width:18px}.sc-z-input-h>.checkboxWrapper.sc-z-input>input[type=\"checkbox\"].sc-z-input:focus+label.checkboxLabel.sc-z-input>z-icon.sc-z-input{box-shadow:0 0 2px 2px var(--accent-dark);border-radius:2px}.sc-z-input-h>.checkboxWrapper.sc-z-input>input[type=\"checkbox\"].sc-z-input:disabled+label.checkboxLabel.sc-z-input>z-icon.sc-z-input{fill:var(--bg-grey-700);cursor:default}.sc-z-input-h>.checkboxWrapper.sc-z-input>input[type=\"checkbox\"][readonly].sc-z-input+label.checkboxLabel.sc-z-input>z-icon.sc-z-input{fill:var(--bg-grey-800);pointer-events:none;cursor:default}.sc-z-input-h>.radioWrapper.sc-z-input{display:inline-block;font-family:var(--dashboard-font);font-weight:var(--font-rg);font-size:inherit;position:relative}.sc-z-input-h>.radioWrapper.sc-z-input>input[type=\"radio\"].sc-z-input{opacity:0;position:absolute;z-index:0}.sc-z-input-h label.sc-z-input{display:block}.sc-z-input-h label.disabledLabel.sc-z-input{color:var(--text-grey-700)}.sc-z-input-h>.radioWrapper.sc-z-input>label.radioLabel.sc-z-input{display:inline-flex;line-height:16px;color:inherit;font-family:inherit;font-weight:inherit;font-size:inherit;text-transform:inherit;margin:0}.sc-z-input-h>.radioWrapper.sc-z-input>label.radioLabel.after.sc-z-input{flex-direction:row}.sc-z-input-h>.radioWrapper.sc-z-input>label.radioLabel.before.sc-z-input{flex-direction:row-reverse}.sc-z-input-h>.radioWrapper.sc-z-input>label.radioLabel.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.sc-z-input-h>.radioWrapper.sc-z-input>label.radioLabel.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}.sc-z-input-h>.radioWrapper.sc-z-input>label.radioLabel.sc-z-input>z-icon.sc-z-input{fill:var(--myz-blue);height:18px;width:18px}.sc-z-input-h>.radioWrapper.sc-z-input>input[type=\"radio\"].sc-z-input:focus+label.radioLabel.sc-z-input>z-icon.sc-z-input{box-shadow:0 0 2px 2px var(--accent-dark);border-radius:50%}.sc-z-input-h>.radioWrapper.sc-z-input>input[type=\"radio\"].sc-z-input:disabled+label.radioLabel.sc-z-input>z-icon.sc-z-input{fill:var(--bg-grey-700);cursor:default}.sc-z-input-h>.radioWrapper.sc-z-input>input[type=\"radio\"][readonly].sc-z-input+label.radioLabel.sc-z-input>z-icon.sc-z-input{fill:var(--bg-grey-800);pointer-events:none;cursor:default}";
+const stylesCss$4 = ".sc-z-input-h{display:inline-block;width:inherit}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}.sc-z-input-h input.sc-z-input::-ms-clear,.sc-z-input-h input.sc-z-input::-ms-reveal{display:none}input.sc-z-input,textarea.sc-z-input,.textareaWrapper.sc-z-input{background:var(--color-input-field01);border-radius:var(--border-radius-small);border:var(--border-size-small) solid var(--color-surface04);box-sizing:border-box;color:var(--color-text02);fill:var(--color-icon02);font-family:var(--font-family-sans);font-weight:var(--font-rg);font-size:var(--font-size-3);outline:none}input.sc-z-input:focus:focus-visible,.textareaWrapper.sc-z-input:focus-within{box-shadow:var(--shadow-focus-primary)}input.sc-z-input:focus:focus-visible,textarea.sc-z-input:focus:focus-visible{color:var(--color-primary01)}.filled.sc-z-input{border-color:var(--color-surface05)}.input_success.sc-z-input{background:var(--color-success-inverse);border-color:var(--color-success01);fill:var(--color-success01)}.input_error.sc-z-input{background:var(--color-error-inverse);border-color:var(--color-error01);fill:var(--color-error01)}.input_warning.sc-z-input{background:var(--color-warning-inverse);border-color:var(--color-warning01);fill:var(--color-warning01)}input.sc-z-input:hover,.textareaWrapper.sc-z-input:hover{border-width:var(--border-size-medium)}input[readonly].sc-z-input,.readonly.sc-z-input{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) .textareaWrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) z-icon.sc-z-input{border-color:var(--color-disabled01);color:var(--color-disabled02);fill:var(--color-disabled01);pointer-events:none;box-shadow:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input::-webkit-input-placeholder,.sc-z-input::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input:-ms-input-placeholder,.sc-z-input:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input::-moz-placeholder{color:var(--color-text05)}.sc-z-input:-moz-placeholder{color:var(--color-text05)}label.inputLabel.sc-z-input{display:block;margin-bottom:var(--space-unit);color:var(--color-text02);font-family:var(--font-family-sans);text-transform:uppercase;text-align:left}[disabled].sc-z-input-h:not([disabled=\"false\"]) label.inputLabel.sc-z-input{color:var(--color-disabled02)}.textWrapper.sc-z-input>div.sc-z-input{fill:var(--color-icon02)}.textWrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);margin:0;padding:0 calc(var(--space-unit) * 1.5);box-sizing:border-box}.textWrapper.sc-z-input>div.sc-z-input>input.hasIcon.sc-z-input,.textWrapper.sc-z-input>div.sc-z-input>input.hasClearIcon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.textWrapper.sc-z-input>div.sc-z-input>input.hasIcon.hasClearIcon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.textWrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1}.textWrapper.sc-z-input .iconsWrapper.sc-z-input{position:absolute;right:calc(var(--space-unit) * 1.5);top:50%;transform:translateY(-50%);display:flex;z-index:2;pointer-events:none}.textWrapper.sc-z-input .iconsWrapper.sc-z-input>button.iconButton.sc-z-input{background:none;color:inherit;border:0;padding:0;font:inherit;pointer-events:initial}.textWrapper.sc-z-input .iconsWrapper.sc-z-input>button.iconButton.sc-z-input+button.iconButton.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.textWrapper.sc-z-input .iconsWrapper.sc-z-input>button.iconButton.resetIcon.sc-z-input,.textWrapper.sc-z-input .iconsWrapper.sc-z-input>button.iconButton.showHidePasswordIcon.sc-z-input{cursor:pointer}.textWrapper.sc-z-input .iconsWrapper.sc-z-input>button.iconButton.sc-z-input>z-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.textWrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill,.textWrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:hover,.textWrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:focus,.textWrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:active{-webkit-background-clip:text !important}.textareaWrapper.sc-z-input{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input::-webkit-scrollbar{background:linear-gradient(\n    to right,\n    transparent 0 3px,\n    var(--gray200) 3px 7px,\n    transparent 7px 10px\n  );width:10px;border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input{min-height:132px;width:100%;margin:0;padding:0;border:none;resize:none}.radioWrapper.sc-z-input,.checkboxWrapper.sc-z-input{display:inline-flex;flex-direction:row;align-items:center;font-family:var(--font-family-sans);position:relative;color:var(--color-text01);fill:var(--color-primary01)}.radioWrapper.sc-z-input:hover,.checkboxWrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:currentColor}.radioWrapper.sc-z-input>input.sc-z-input,.checkboxWrapper.sc-z-input>input.sc-z-input{position:absolute;opacity:0;z-index:-1;pointer-events:none}.radioWrapper.sc-z-input .radioLabel.sc-z-input,.checkboxWrapper.sc-z-input .checkboxLabel.sc-z-input{display:inline-flex;align-items:center;margin:0;line-height:1;color:inherit;font-family:inherit;font-weight:inherit;font-size:inherit;text-transform:inherit}.radioWrapper.sc-z-input input.sc-z-input:not(:disabled)+.radioLabel.sc-z-input,.checkboxWrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkboxLabel.sc-z-input{cursor:pointer}.radioWrapper.sc-z-input .radioLabel.sc-z-input z-icon.sc-z-input,.checkboxWrapper.sc-z-input .checkboxLabel.sc-z-input z-icon.sc-z-input{fill:inherit;cursor:pointer}.radioWrapper.sc-z-input .radioLabel.after.sc-z-input,.checkboxWrapper.sc-z-input .checkboxLabel.after.sc-z-input{flex-direction:row}.radioWrapper.sc-z-input .radioLabel.before.sc-z-input,.checkboxWrapper.sc-z-input .checkboxLabel.before.sc-z-input{flex-direction:row-reverse}.radioWrapper.sc-z-input .radioLabel.after.sc-z-input>span.sc-z-input,.checkboxWrapper.sc-z-input .checkboxLabel.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radioWrapper.sc-z-input .radioLabel.before.sc-z-input>span.sc-z-input,.checkboxWrapper.sc-z-input .checkboxLabel.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}.radioWrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radioLabel.sc-z-input>z-icon.sc-z-input,.checkboxWrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkboxLabel.sc-z-input>z-icon.sc-z-input{box-shadow:var(--shadow-focus-primary);border-radius:var(--border-radius-small)}.radioWrapper.sc-z-input>input.sc-z-input:disabled+.radioLabel.sc-z-input,.checkboxWrapper.sc-z-input>input.sc-z-input:disabled+.checkboxLabel.sc-z-input{color:var(--color-disabled02)}.radioWrapper.sc-z-input>input.sc-z-input:disabled+.radioLabel.sc-z-input>z-icon.sc-z-input,.checkboxWrapper.sc-z-input>input.sc-z-input:disabled+.checkboxLabel.sc-z-input>z-icon.sc-z-input{fill:var(--color-disabled01);cursor:default}";
 
 const ZInput = class {
   constructor(hostRef) {
@@ -2244,9 +2209,8 @@ const ZInput = class {
     this.startTyping = index.createEvent(this, "startTyping", 7);
     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 = utils.randomId();
+    this.htmlid = `id-${utils.randomId()}`;
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */
@@ -2255,20 +2219,15 @@ const ZInput = class {
     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.hasmessage = true;
+    /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */
+    this.message = true;
     /** the input label position: available for checkbox, radio */
-    this.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.multiple = false;
+    this.labelPosition = index$1.LabelPositions.right;
     /** render clear icon when typing (optional): available for text */
     this.hasclearicon = true;
     this.isTyping = false;
-    this.textareaWrapperHover = "";
-    this.textareaWrapperFocus = "";
     this.passwordHidden = true;
+    this.typingtimeout = 300;
   }
   inputCheckListener(e) {
     const data = e.detail;
@@ -2283,27 +2242,6 @@ const ZInput = class {
         return;
     }
   }
-  /** get the input value */
-  async getValue() {
-    switch (this.type) {
-      case index$1.InputTypeEnum.select:
-        return this.selectElem.getValue();
-      default:
-        return this.value;
-    }
-  }
-  /** set the input value */
-  async setValue(value) {
-    switch (this.type) {
-      case index$1.InputTypeEnum.select:
-        this.selectElem.setValue(value);
-        break;
-      default:
-        if (typeof value === "string")
-          this.value = value;
-        break;
-    }
-  }
   /** get checked status */
   async isChecked() {
     switch (this.type) {
@@ -2311,13 +2249,13 @@ const ZInput = class {
       case index$1.InputTypeEnum.radio:
         return this.checked;
       default:
+        console.warn("`isChecked` method is only available for type `checkbox` and `radio`");
         return false;
     }
   }
-  emitInputChange(value, keycode) {
-    if (!this.isTyping) {
+  emitInputChange(value) {
+    if (!this.isTyping)
       this.emitStartTyping();
-    }
     let validity = {};
     if (this.type === index$1.InputTypeEnum.textarea) {
       validity = this.getValidity("textarea");
@@ -2326,7 +2264,7 @@ const ZInput = class {
       validity = this.getValidity("input");
     }
     this.value = value;
-    this.inputChange.emit({ value, keycode, validity });
+    this.inputChange.emit({ value, validity });
     clearTimeout(this.timer);
     this.timer = setTimeout(() => {
       this.emitStopTyping(this.value, validity);
@@ -2359,7 +2297,7 @@ const ZInput = class {
   }
   /* START text/password/email/number */
   getTextAttributes() {
-    const attr = {
+    return {
       id: this.htmlid,
       name: this.name,
       placeholder: this.placeholder,
@@ -2368,34 +2306,33 @@ const ZInput = class {
       readonly: this.readonly,
       required: this.required,
       title: this.htmltitle,
-      class: `
-        ${this.status ? "input_" + this.status : "input_default"}
-        ${this.isTyping && "istyping"}
-        ${!this.isTyping && this.value && "filled"}
-      `,
-      onInput: (e) => this.emitInputChange(e.target.value, e.keyCode),
+      class: {
+        [`input_${this.status || "default"}`]: true,
+        filled: !!this.value,
+      },
+      autocomplete: this.autocomplete,
+      onInput: (e) => this.emitInputChange(e.target.value),
     };
-    if (this.autocomplete)
-      attr["autocomplete"] = this.autocomplete;
-    return attr;
   }
   renderInputText(type = index$1.InputTypeEnum.text) {
     const attr = this.getTextAttributes();
-    if (this.icon || type === index$1.InputTypeEnum.password)
-      attr.class = attr.class + " hasIcon";
-    if (this.hasclearicon)
-      attr.class = attr.class + " hasClearIcon";
+    if (this.icon || type === index$1.InputTypeEnum.password) {
+      attr.class = Object.assign(Object.assign({}, attr.class), { hasIcon: true });
+    }
+    if (this.hasclearicon) {
+      attr.class = Object.assign(Object.assign({}, attr.class), { hasClearIcon: true });
+    }
     return (index.h("div", { class: "textWrapper" }, this.renderLabel(), index.h("div", null, index.h("input", Object.assign({ type: type === index$1.InputTypeEnum.password && !this.passwordHidden
         ? index$1.InputTypeEnum.text
-        : type }, attr, { "aria-labelledby": `${this.htmlid}_label` })), this.renderIcons()), this.renderMessage()));
+        : type }, attr, { "aria-label": this.ariaLabel || this.label })), this.renderIcons()), this.renderMessage()));
   }
   renderLabel() {
     if (!this.label)
       return;
-    return (index.h("z-input-label", { value: this.label, disabled: this.disabled, "aria-label": this.label, id: `${this.htmlid}_label` }));
+    return (index.h("label", { class: "inputLabel body-5-sb", id: `${this.htmlid}_label`, htmlFor: this.htmlid, "aria-label": this.label }, this.label));
   }
   renderIcons() {
-    return (index.h("span", { class: `iconsWrapper ${this.disabled ? "disabled" : ""}` }, this.renderResetIcon(), this.renderIcon()));
+    return (index.h("span", { class: "iconsWrapper" }, this.renderResetIcon(), this.renderIcon()));
   }
   renderIcon() {
     if (this.type === index$1.InputTypeEnum.password) {
@@ -2403,108 +2340,67 @@ const ZInput = class {
     }
     if (!this.icon)
       return;
-    return index.h("z-icon", { class: "inputIcon", name: this.icon });
+    return (index.h("button", { type: "button", class: "iconButton inputIcon", tabIndex: -1 }, index.h("z-icon", { name: this.icon })));
   }
   renderResetIcon() {
     if (!this.hasclearicon || !this.value || this.disabled || this.readonly)
       return;
-    return (index.h("z-icon", { class: "resetIcon", name: "multiply", onClick: (e) => this.emitInputChange("", e.keyCode) }));
+    return (index.h("button", { type: "button", class: "iconButton resetIcon", "aria-label": "cancella il contenuto dell'input", onClick: () => this.emitInputChange("") }, index.h("z-icon", { name: "multiply" })));
   }
   renderShowHidePassword() {
-    return (index.h("z-icon", { class: "inputIcon", name: this.passwordHidden ? "view" : "view-off", onClick: () => (this.passwordHidden = !this.passwordHidden) }));
+    return (index.h("button", { type: "button", class: "iconButton showHidePasswordIcon", disabled: this.disabled, "aria-label": this.passwordHidden ? "mostra password" : "nascondi password", onClick: () => (this.passwordHidden = !this.passwordHidden) }, index.h("z-icon", { name: this.passwordHidden ? "view-filled" : "view-off-filled" })));
   }
   renderMessage() {
-    if (!this.hasmessage)
+    if (utils.boolean(this.message) === false)
       return;
-    return index.h("z-input-message", { message: this.message, status: this.status });
+    return (index.h("z-input-message", { message: utils.boolean(this.message) === true ? undefined : this.message, status: this.status }));
   }
   /* END text/password/email/number */
   /* START textarea */
   renderTextarea() {
-    return (index.h("div", { class: "textWrapper" }, this.renderLabel(), index.h("div", null, this.renderTextareaBody()), this.renderMessage()));
-  }
-  renderTextareaBody() {
     const attributes = this.getTextAttributes();
-    return (index.h("div", { class: `
-            textareaWrapper
-            ${attributes.class}
-            ${attributes.disabled && " disabled"}
-            ${attributes.readonly && " readonly"}
-            ${this.isTyping && " istyping"}
-            ${this.textareaWrapperFocus}
-            ${this.textareaWrapperHover}
-          ` }, index.h("textarea", Object.assign({}, attributes, this.getTextareaExtraAttributes()))));
-  }
-  getTextareaExtraAttributes() {
-    return {
-      onFocus: () => (this.textareaWrapperFocus = "focus"),
-      onBlur: () => (this.textareaWrapperFocus = ""),
-      onMouseOver: () => (this.textareaWrapperHover = "hover"),
-      onMouseOut: () => (this.textareaWrapperHover = ""),
-    };
+    return (index.h("div", { class: "textWrapper" }, this.renderLabel(), index.h("div", { class: Object.assign(Object.assign({}, attributes.class), { textareaWrapper: true, readonly: attributes.readonly }) }, index.h("textarea", Object.assign({}, attributes, { "aria-label": this.ariaLabel || this.label }))), this.renderMessage()));
   }
   /* END textarea */
-  /* START checkbox */
-  handleCheckboxChange() {
-    this.checked = !this.checked;
+  handleCheck(ev) {
+    this.checked = ev.target.checked;
     this.emitInputCheck(this.checked);
   }
+  /* START checkbox */
   renderCheckbox() {
-    return (index.h("div", { class: "checkboxWrapper" }, index.h("input", { id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: () => this.handleCheckboxChange(), value: this.value }), index.h("label", { htmlFor: this.htmlid, class: `checkboxLabel ${this.labelafter ? "after" : "before"}` }, index.h("z-icon", { name: this.checked ? "checkbox-checked" : "checkbox", "aria-hidden": true }), this.label && index.h("span", { innerHTML: this.label }))));
+    return (index.h("div", { class: "checkboxWrapper" }, index.h("input", { id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }), index.h("label", { htmlFor: this.htmlid, class: {
+        checkboxLabel: true,
+        after: this.labelPosition === index$1.LabelPositions.right,
+        before: this.labelPosition === index$1.LabelPositions.left,
+      } }, index.h("z-icon", { name: this.checked ? "checkbox-checked" : "checkbox", "aria-hidden": "true" }), this.label && index.h("span", { innerHTML: this.label }))));
   }
   /* END checkbox */
   /* START radio */
-  handleRadioChange() {
-    this.checked = true;
-    this.emitInputCheck(this.checked);
-  }
   renderRadio() {
-    return (index.h("div", { class: "radioWrapper" }, index.h("input", { id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: () => this.handleRadioChange(), value: this.value }), index.h("label", { htmlFor: this.htmlid, class: `radioLabel ${this.labelafter ? "after" : "before"}` }, index.h("z-icon", { name: this.checked ? "radio-button-checked" : "radio-button", "aria-hidden": true }), this.label && index.h("span", { innerHTML: this.label }))));
+    return (index.h("div", { class: "radioWrapper" }, index.h("input", { id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: this.handleCheck.bind(this), value: this.value }), index.h("label", { htmlFor: this.htmlid, class: {
+        radioLabel: true,
+        after: this.labelPosition === index$1.LabelPositions.right,
+        before: this.labelPosition === index$1.LabelPositions.left,
+      } }, index.h("z-icon", { name: this.checked ? "radio-button-checked" : "radio-button", "aria-hidden": "true" }), this.label && index.h("span", { innerHTML: this.label }))));
   }
   /* END radio */
-  /* START select */
-  renderSelect() {
-    return (index.h("z-select", { htmlid: this.htmlid, items: this.items, name: this.name, label: this.label, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, htmltitle: this.htmltitle, status: this.status, hasmessage: this.hasmessage, message: this.message, autocomplete: this.autocomplete, multiple: this.multiple, ref: (el) => (this.selectElem = el) }));
-  }
-  /* END select */
   render() {
     switch (this.type) {
-      case index$1.InputTypeEnum.text:
-      case index$1.InputTypeEnum.password:
-      case index$1.InputTypeEnum.number:
-      case index$1.InputTypeEnum.email:
-        return this.renderInputText(this.type);
       case index$1.InputTypeEnum.textarea:
         return this.renderTextarea();
       case index$1.InputTypeEnum.checkbox:
         return this.renderCheckbox();
       case index$1.InputTypeEnum.radio:
         return this.renderRadio();
-      case index$1.InputTypeEnum.select:
-        return this.renderSelect();
       default:
-        return this.renderInputText();
+        return this.renderInputText(this.type);
     }
   }
   get hostElement() { return index.getElement(this); }
 };
-ZInput.style = stylesCss$6;
-
-const stylesCss$5 = ":host>label{display:block;color:var(--text-grey-800);font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:12px;line-height:16px;text-transform:uppercase;text-align:left;margin:var(--space-unit) 0}:host>label.disabled{color:var(--text-grey-700)}";
-
-const ZInputLabel = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** the label is disabled */
-    this.disabled = false;
-  }
-  render() {
-    return index.h("label", { class: this.disabled ? "disabled" : "" }, this.value);
-  }
-};
-ZInputLabel.style = stylesCss$5;
+ZInput.style = stylesCss$4;
 
-const stylesCss$4 = ":host span.statusMsg{font-family:var(--dashboard-font);font-weight:var(--font-rg);font-size:14px;line-height:16px;min-height:16px;color:var(--text-grey-700);fill:var(--text-grey-700);margin-top:var(--space-unit);display:flex}:host span.statusMsg.msg_success{color:var(--status-success-green);fill:var(--status-success-green)}:host span.statusMsg.msg_error{color:var(--status-error-red);fill:var(--status-error-red)}:host span.statusMsg.msg_warning{color:var(--status-warning-yellow-dark);fill:var(--status-warning-yellow-dark)}:host span.statusMsg>z-icon{margin-right:var(--space-unit);margin-top:1px}";
+const stylesCss$3 = ":host{display:flex;align-items:start;min-height:calc(var(--space-unit) * 2);margin-top:var(--space-unit);color:var(--color-text05);fill:currentColor;font-family:var(--font-family-sans);font-size:var(--font-size-2);letter-spacing:0.16px}:host([status='success']){color:var(--color-text-success)}:host([status='error']){color:var(--color-text-error)}:host([status='warning']){color:var(--color-warning02)}:host(:focus){outline:none}:host>z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);margin:calc(var(--space-unit) / 3) var(--space-unit) 0 0}";
 
 const ZInputMessage = class {
   constructor(hostRef) {
@@ -2512,19 +2408,16 @@ const ZInputMessage = class {
     this.statusIcons = {
       success: "checkmark-circle",
       error: "multiply-circled",
-      warning: "exclamation-circle"
+      warning: "exclamation-circle",
     };
   }
-  renderMsgClassName() {
-    return this.status ? `msg_${this.status}` : '';
-  }
   render() {
-    return (index.h("span", { class: `statusMsg ${this.renderMsgClassName()}` }, this.status && this.statusIcons[this.status] && this.message ? (index.h("z-icon", { name: this.statusIcons[this.status], width: 14, height: 14 })) : null, index.h("span", { innerHTML: this.message })));
+    return (index.h(index.Host, { role: "alert", "aria-label": this.message, tabindex: this.message ? 0 : -1 }, this.statusIcons[this.status] && this.message && (index.h("z-icon", { name: this.statusIcons[this.status] })), index.h("span", { innerHTML: this.message })));
   }
 };
-ZInputMessage.style = stylesCss$4;
+ZInputMessage.style = stylesCss$3;
 
-const stylesCss$3 = ":host{font-family:var(--dashboard-font);font-weight:inherit;font-size:inherit;line-height:inherit;outline:none}a{cursor:pointer;color:var(--myz-blue);fill:var(--myz-blue);display:inline-flex;align-items:center;text-decoration:none;padding:calc(var(--space-unit) * .5) 0;border-top:var(--border-size-medium) solid transparent;border-bottom:var(--border-size-medium) solid transparent}a:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark);text-decoration:none}a.disabled{cursor:default;pointer-events:none}a.disabled,a.disabled:active,a.disabled:visited,a.disabled:hover{color:var(--bg-neutral-200);fill:var(--bg-neutral-200);text-decoration:none}a.black,a.black:active,a.black:visited,a.black:hover{color:var(--bg-grey-900);fill:var(--bg-grey-900);text-decoration:none}a.white,a.white:active,a.white:visited,a.white:hover{color:var(--bg-white);fill:var(--bg-white);text-decoration:none}a.active,a.active:active,a.active:visited{color:var(--text-grey-800);fill:var(--text-grey-800);text-decoration:none;border-bottom:var(--border-size-medium) solid var(--myz-blue)}a.big{font-size:16px;font-weight:600}a>z-icon{margin-right:8px}";
+const stylesCss$2 = ":host{--font-size-link:inherit;--font-weight-link:inherit}:host{font-family:var(--dashboard-font);font-weight:var(--font-weight-link);font-size:var(--font-size-link);line-height:inherit;outline:none}a{cursor:pointer;color:var(--color-link-primary);fill:var(--color-link-primary);display:inline-flex;align-items:center;text-decoration:none;padding:calc(var(--space-unit) * 0.5) 0;border-top:var(--border-size-medium) solid transparent;border-bottom:var(--border-size-medium) solid transparent}a:hover,a:focus,a:active{text-decoration:underline}a.active{color:var(--color-active-link);fill:var(--color-active-link)}a:hover,a:focus{color:var(--color-hover-link);fill:var(--color-hover-link)}a:active{color:var(--color-pressed-link);fill:var(--color-pressed-link)}a:visited{color:var(--color-visited-link);fill:var(--color-visited-link)}a.disabled,a.inverse.disabled{cursor:default;pointer-events:none;color:var(--color-disabled03);fill:var(--color-disabled03)}a.underline,a.underline:active,a.underline:hover,a.underline:visited,a.underline.disabled,a.underline.black,a.underline.white{text-decoration:underline}a.disabled,a.disabled:active,a.disabled:visited,a.disabled:hover{text-decoration:none}a.inverse{color:var(--color-inverse-link);fill:var(--color-inverse-link)}a.inverse.active{color:var(--color-inverse-active-link);fill:var(--color-inverse-active-link)}a.inverse:hover,a.inverse:focus{color:var(--color-inverse-hover-link);fill:var(--color-inverse-hover-link)}a.inverse:active{color:var(--color-inverse-pressed-link);fill:var(--color-inverse-pressed-link)}a.inverse:visited{color:var(--color-inverse-visited-link);fill:var(--color-inverse-visited-link)}a.black{color:var(--gray800);fill:var(--gray800);text-decoration:none}a.black:hover,a.black.active{color:var(--color-black);fill:var(--color-black)}a.black:visited{color:var(--gray800);fill:var(--gray800)}a.black:hover,a.black:focus,a.black:active{text-decoration:underline}a.black:active{color:var(--gray700);fill:var(--gray700)}a.white,a.white:active,a.white:hover,a.white.active{color:var(--bg-white);fill:var(--bg-white);text-decoration:none}a.white:visited{color:var(--bg-white);fill:var(--bg-white)}a.white:hover,a.white:focus,a.white:active{text-decoration:underline}a.white.disabled,a.black.disabled{color:var(--gray500);fill:var(--gray500)}a>z-icon:first-child{margin-right:8px}a>z-icon:last-child{margin-left:8px}";
 
 const ZLink = class {
   constructor(hostRef) {
@@ -2541,15 +2434,23 @@ const ZLink = class {
     /** white variant flag (optional) */
     this.iswhite = false;
     /** link text variant (optional) */
-    this.textcolor = 'blue';
+    this.textcolor = "primary";
     /** big link version */
     this.big = false;
+    /** link icon position (optional) */
+    this.iconposition = "left";
+    /** draw underline on text (optional) */
+    this.underline = false;
+    this.iconSize = 18;
     this.emitZLinkClick = this.emitZLinkClick.bind(this);
     this.emitZLinkInteraction = this.emitZLinkInteraction.bind(this);
   }
   componentWillRender() {
     if (this.iswhite) {
-      console.warn('z-link iswhite prop is deprecated and will be dropped in a next release, please use textcolor prop instead');
+      console.warn("z-link iswhite prop is deprecated and will be dropped in a next release, please use textcolor prop instead");
+    }
+    if (this.big) {
+      console.warn("z-link big prop is deprecated and will be dropped in a next release, please override --font-size-link and --font-weight-link variables instead");
     }
   }
   emitZLinkClick(e, linkId) {
@@ -2558,25 +2459,38 @@ const ZLink = class {
   emitZLinkInteraction(e, linkId) {
     this.zLinkClick.emit({ e, linkId });
   }
+  componentDidRender() {
+    if (this.icon) {
+      const height = parseFloat(window.getComputedStyle(this.hostElement).getPropertyValue('font-size'));
+      const currentSize = this.big ? 18 : Math.round(height * 1.125);
+      if (!Number.isNaN(currentSize) && this.iconSize !== currentSize) {
+        this.iconSize = currentSize;
+      }
+    }
+  }
   render() {
-    return (index.h("a", { id: this.htmlid, href: this.href ? this.href : null, class: `${this.isdisabled && "disabled"}
-          ${this.isactive && "active"}
-          ${this.textcolor}
-          ${this.iswhite && "white"}
-          ${this.big && "big"}`, target: this.target, role: this.href ? "link" : "button", tabindex: this.htmltabindex, onClick: (e) => this.emitZLinkClick(e, this.htmlid) }, this.icon && index.h("z-icon", { name: this.icon, width: this.big ? 18 : 12, height: this.big ? 18 : 12 }), index.h("slot", null)));
+    const style = this.big ? { "--font-size-link": "16px", "--font-weight-link": "600" } : {};
+    return (index.h(index.Host, { style: style }, index.h("a", { id: this.htmlid, href: this.href ? this.href : null, class: `${this.isdisabled ? "disabled" : ""}
+            ${this.isactive ? "active" : ""}
+            ${this.textcolor}
+            ${this.iswhite ? "white" : ""}
+            ${this.underline ? "underline" : ""}`, target: this.target, role: this.href ? "link" : "button", tabindex: this.isdisabled ? -1 : this.htmltabindex, onClick: (e) => this.emitZLinkClick(e, this.htmlid) }, this.iconposition === "right" && index.h("slot", null), this.icon &&
+      index.h("z-icon", { style: { "--z-icon-width": this.iconSize.toString(), "--z-icon-height": this.iconSize.toString() }, name: this.icon, height: this.iconSize, width: this.iconSize }), this.iconposition === "left" && index.h("slot", null))));
   }
+  get hostElement() { return index.getElement(this); }
 };
-ZLink.style = stylesCss$3;
+ZLink.style = stylesCss$2;
 
-const stylesCss$2 = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}:host>div{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.7);width:100%;height:100%;z-index:1000;overflow:auto;overflow:-moz-scrollbars-none;-ms-overflow-style:none;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host>div::-webkit-scrollbar{width:0 !important}:host>div>div{z-index:1010;width:100%;margin:0;background:var(--bg-white)}:host>div>div>header{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between;align-items:stretch;align-content:space-between;background:var(--bg-grey-050)}:host>div>div>header>z-icon{cursor:pointer;fill:var(--myz-blue);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);transform:scale(0.9)}:host>div>div>header>div{margin:calc(var(--space-unit) * 2) calc(var(--space-unit) * 2)}:host>div>div>header>div>h1,:host>div>div>header>div>h2{font-family:var(--dashboard-font);font-weight:var(--font-rg);color:var(--text-grey-800);margin:0;padding:0}:host>div>div>header>div>h1{font-size:20px;line-height:28px}:host>div>div>header>div>h2{font-size:16px;line-height:24px;margin-top:var(--space-unit)}:host>div>div>main{background:white;overflow:hidden}@media only screen and (min-width: 768px){:host>div>div{width:auto;min-width:300px;min-height:300px;margin-top:calc(var(--space-unit) * 6);background:none}:host>div>div>header{border-radius:var(--border-radius) var(--border-radius) 0 0}:host>div>div>header>z-icon{margin:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 3) calc(var(--space-unit) * 1.5) 0px;transform:scale(1)}:host>div>div>header>div{margin:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 3)}:host>div>div>main{border-radius:0 0 var(--border-radius) var(--border-radius)}:host>div>div>div.bottomBackground{background:transparent;height:calc(var(--space-unit) * 4)}}";
+const stylesCss$1 = ":host{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;flex-direction:row;justify-content:center;width:100%;height:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.modal-background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.modal-container{display:flex;flex-direction:column;z-index:1010;width:100%;height:100vh;overflow:-moz-scrollbars-none;overflow:hidden}.modal-container>header{display:flex;flex-wrap:nowrap;flex-direction:row;align-items:flex-start;justify-content:flex-start;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);background:var(--color-surface02)}.modal-container>header button{margin:0;padding:0;border:none;background:transparent;cursor:pointer;margin-left:auto}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.5);--z-icon-height:calc(var(--space-unit) * 2.5);display:flex;fill:var(--color-icon01)}.modal-container>header>div{display:flex;flex-direction:column;width:100%;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header h2{margin:0;padding:0;font-weight:var(--font-rg);color:var(--color-text01)}.modal-container>header h1{font-size:var(--font-size-5);line-height:1.4;letter-spacing:0}.modal-container>header h2{font-size:var(--font-size-3);line-height:1.5;letter-spacing:0}.modal-container>header>div *:empty{display:none}.modal-container>header h1+h2{margin-top:calc(var(--space-unit) * 0.5)}.modal-container>.modal-content{flex:1 auto;background:var(--color-surface01);overflow:auto;overflow-x:hidden}.modal-container .modal-content::-webkit-scrollbar{background:linear-gradient(\n    to right,\n    transparent 0 3px,\n    var(--gray200) 3px 7px,\n    transparent 7px 10px\n  );width:10px;border-radius:var(--border-radius)}.modal-container .modal-content::-webkit-scrollbar-track{background-color:transparent}.modal-container .modal-content::-webkit-scrollbar-thumb{background-color:var(--color-primary01);border-radius:var(--border-radius);width:10px}.modal-container .modal-content::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.modal-container .modal-content{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.modal-container{position:fixed;top:calc(var(--space-unit) * 6);left:50%;transform:translateX(-50%);width:auto;height:auto;min-width:calc(var(--space-unit) * 40);min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius)}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 768px) and (max-width: 1151px){.modal-container>header{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){.modal-container>header{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 4)}.modal-container>header h1{font-size:var(--font-size-6);line-height:1.33;letter-spacing:0}.modal-container>header h2{font-size:var(--font-size-4);line-height:1.5;letter-spacing:0}.modal-container>header h1+h2{margin-top:0}}";
 
 const ZModal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.modalClose = index.createEvent(this, "modalClose", 7);
     this.modalHeaderActive = index.createEvent(this, "modalHeaderActive", 7);
-    this.emitModalClose = this.emitModalClose.bind(this);
-    this.emitModalHeaderActive = this.emitModalHeaderActive.bind(this);
+    this.modalBackgroundClick = index.createEvent(this, "modalBackgroundClick", 7);
+    /** aria-label for close button (optional) */
+    this.closeButtonLabel = "close modal";
   }
   emitModalClose() {
     this.modalClose.emit({ modalid: this.modalid });
@@ -2584,287 +2498,19 @@ const ZModal = class {
   emitModalHeaderActive() {
     this.modalHeaderActive.emit({ modalid: this.modalid });
   }
-  render() {
-    return (index.h("div", { "data-action": "modalBackground", "data-modal": this.modalid }, index.h("div", { id: this.modalid }, index.h("header", { onClick: this.emitModalHeaderActive }, index.h("div", null, this.modaltitle && index.h("h1", null, this.modaltitle), this.modalsubtitle && index.h("h2", null, this.modalsubtitle)), index.h("z-icon", { name: "multiply-circle-filled", width: 24, height: 24, onClick: () => this.emitModalClose(), "data-action": "modalClose", "data-modal": this.modalid, onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitModalClose), tabindex: "0" })), index.h("main", null, index.h("slot", { name: "modalContent" })), index.h("div", { class: "bottomBackground", "data-action": "modalBackground", "data-modal": this.modalid }))));
-  }
-};
-ZModal.style = stylesCss$2;
-
-const stylesCss$1 = ":host{display:inline-block;width:inherit}:host ul[role=\"listbox\"]{background:var(--bg-white);border-radius:0px;border:var(--border-size-small) solid var(--bg-grey-200);border-color:var(--bg-grey-200);box-sizing:border-box;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-weight:var(--font-rg);font-size:16px;outline:none}:host .filled{border-color:var(--text-grey-800) !important}:host li[role=\"option\"]:focus{border-color:transparent;box-shadow:0 0 2px 2px var(--accent-dark);outline:none}:host>div.selectWrapper>z-input{width:100%}:host>div.selectWrapper>div{position:relative}:host>div.selectWrapper>div.closed{height:0px;overflow:hidden}:host>div.selectWrapper>div>div.ulScrollWrapper{background:var(--bg-white);position:absolute;padding:calc(var(--space-unit) * .5) var(--space-unit);border:var(--border-size-small) solid var(--bg-grey-200);border-top:none;width:100%;box-sizing:border-box}:host>div.selectWrapper>div.closed>div.ulScrollWrapper{z-index:10}:host>div.selectWrapper>div.open>div.ulScrollWrapper{z-index:20}:host>div.selectWrapper>div>div.ulScrollWrapper>ul{list-style:none;margin:0;padding:0;border:0px;max-height:240px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--myz-blue) var(--bg-grey-200);position:relative}:host>div.selectWrapper>div>div.ulScrollWrapper>ul::-webkit-scrollbar{background:linear-gradient(\n    90deg,\n    var(--bg-white) 2px,\n    var(--bg-grey-200) 4px,\n    var(--bg-white) 8px\n  );border-radius:var(--border-radius);width:10px}:host>div.selectWrapper>div>div.ulScrollWrapper>ul::-webkit-scrollbar-thumb{background-color:var(--myz-blue);border-radius:var(--border-radius);width:10px}:host>div.selectWrapper>div>div.ulScrollWrapper>ul>li{display:flex;align-items:center;box-sizing:border-box;min-height:44px;padding:calc(var(--space-unit) * 1.5);text-align:left;cursor:pointer;border-bottom:var(--border-size-small) solid var(--bg-grey-200)}:host>div.selectWrapper>div>div.ulScrollWrapper>ul>li:hover{color:var(--myz-blue-dark);background:var(--bg-grey-050)}:host>div.selectWrapper>div>div.ulScrollWrapper>ul>li:focus{margin:2px}:host>div.selectWrapper>div>div.ulScrollWrapper>ul>li[aria-selected=\"\"]{font-weight:var(--font-sb)}:host>div.selectWrapper>div>div.ulScrollWrapper>ul>li.disabled{color:var(--text-grey-700);cursor:default;pointer-events:none}:host>div.selectWrapper>div>div.ulScrollWrapper>ul>li.noResults{color:var(--myz-blue);fill:var(--myz-blue)}:host>div.selectWrapper>div>div.ulScrollWrapper>ul>li.noResults>z-icon{margin-right:var(--space-unit)}:host>div.selectWrapper>div.chipsWrapper{padding-bottom:var(--space-unit)}:host>div.selectWrapper>div.chipsWrapper>z-button-filter{display:inline-block;margin:4px}";
-
-const ZSelect = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.optionSelect = index.createEvent(this, "optionSelect", 7);
-    /** the id of the input element */
-    this.htmlid = utils.randomId();
-    /** the input is disabled */
-    this.disabled = false;
-    /** the input is readonly */
-    this.readonly = false;
-    /** show input helper message (optional): available for text, password, number, email, textarea, select */
-    this.hasmessage = true;
-    /** the input has autocomplete option */
-    this.autocomplete = false;
-    /** multiple options can be selected */
-    this.multiple = false;
-    /** no result text message */
-    this.noresultslabel = "Nessun risultato";
-    this.isOpen = false;
-    this.itemsList = [];
-    this.toggleSelectUl = this.toggleSelectUl.bind(this);
-    this.selectItem = this.selectItem.bind(this);
-    this.handleSelectFocus = this.handleSelectFocus.bind(this);
-  }
-  watchItems() {
-    this.itemsList = this.getInitialItemsArray();
-    typeof this.items === "string" ? JSON.parse(this.items) : this.items;
-    this.selectedItems = this.itemsList.filter((item) => item.selected);
-  }
-  /** get the input selected options */
-  async getSelectedItems() {
-    return this.selectedItems;
-  }
-  /** get the input value */
-  async getValue() {
-    return this.getSelectedValues();
-  }
-  /** set the input value */
-  async setValue(value) {
-    let values = [];
-    if (typeof value === "string") {
-      values.push(value);
-    }
-    else {
-      values = value;
-    }
-    this.selectedItems = this.itemsList.filter((item) => values.includes(item.id));
-  }
-  emitOptionSelect() {
-    this.optionSelect.emit({
-      id: this.htmlid,
-      selected: this.getSelectedValues(),
-    });
-  }
-  componentWillLoad() {
-    this.watchItems();
-  }
-  componentWillRender() {
-    this.filterItems(this.searchString);
-  }
-  getInitialItemsArray() {
-    return typeof this.items === "string" ? JSON.parse(this.items) : this.items;
-  }
-  mapSelectedItemsToItemsArray() {
-    const initialItemsList = this.getInitialItemsArray();
-    return initialItemsList.map((item) => {
-      const found = this.selectedItems.find((selected) => selected.id === item.id);
-      item.selected = !!found;
-      return item;
-    });
-  }
-  getSelectedValues() {
-    if (this.multiple) {
-      return this.selectedItems.map((item) => item.id);
-    }
-    if (!this.multiple && this.selectedItems.length) {
-      return this.selectedItems[0].id;
-    }
-    return null;
-  }
-  filterItems(searchString) {
-    const prevList = this.mapSelectedItemsToItemsArray();
-    if (!(searchString === null || searchString === void 0 ? void 0 : searchString.length)) {
-      this.itemsList = prevList;
-    }
-    else {
-      this.itemsList = prevList
-        .filter((item) => {
-        return item.name.toUpperCase().includes(searchString.toUpperCase());
-      })
-        .map((item) => {
-        const start = item.name
-          .toUpperCase()
-          .indexOf(searchString.toUpperCase());
-        const end = start + searchString.length;
-        const newName = item.name.substring(0, start) +
-          item.name.substring(start, end).bold() +
-          item.name.substring(end, item.name.length);
-        item.name = newName;
-        return item;
-      });
-    }
-  }
-  hasAutcomplete() {
-    return (this.autocomplete === true ||
-      this.autocomplete === "true" ||
-      this.autocomplete === "on");
-  }
-  handleInputChange(e) {
-    this.searchString = e.detail.value;
-    if (!this.isOpen)
-      this.toggleSelectUl();
-  }
-  selectItem(item, selected) {
-    if (item && item.disabled)
-      return;
-    this.itemsList = this.mapSelectedItemsToItemsArray();
-    this.itemsList = this.itemsList.map((i) => {
-      if (!this.multiple)
-        i.selected = false;
-      if (i.id === (item ? item.id : null))
-        i.selected = selected;
-      return i;
-    });
-    this.selectedItems = this.itemsList.filter((item) => item.selected);
-    this.emitOptionSelect();
-    if (this.searchString)
-      this.searchString = null;
-  }
-  arrowsSelectNav(e, key) {
-    const arrows = [index$1.keybordKeyCodeEnum.ARROW_DOWN, index$1.keybordKeyCodeEnum.ARROW_UP];
-    if (!arrows.includes(e.keyCode))
-      return;
-    e.preventDefault();
-    e.stopPropagation();
-    if (!this.isOpen)
-      this.toggleSelectUl();
-    let index;
-    if (e.keyCode === index$1.keybordKeyCodeEnum.ARROW_DOWN) {
-      index = key + 1 === this.itemsList.length ? 0 : key + 1;
-    }
-    else if (e.keyCode === index$1.keybordKeyCodeEnum.ARROW_UP) {
-      index = key <= 0 ? this.itemsList.length - 1 : key - 1;
-    }
-    this.focusSelectItem(index);
-  }
-  focusSelectItem(index) {
-    const focusElem = this.hostElement.shadowRoot.getElementById(`${this.htmlid}_${index}`);
-    if (focusElem)
-      focusElem.focus();
-  }
-  toggleSelectUl(selfFocusOnClose = false) {
-    if (this.disabled || this.readonly)
-      return;
-    if (!this.isOpen) {
-      document.addEventListener("click", this.handleSelectFocus);
-      document.addEventListener("keyup", this.handleSelectFocus);
-    }
-    else {
-      document.removeEventListener("click", this.handleSelectFocus);
-      document.removeEventListener("keyup", this.handleSelectFocus);
-      if (selfFocusOnClose) {
-        this.hostElement.shadowRoot
-          .getElementById(`${this.htmlid}_input`)
-          .focus();
-      }
-    }
-    this.isOpen = !this.isOpen;
-  }
-  handleInputClick(e) {
-    const cp = e.composedPath();
-    const clearIcon = cp.find((item) => item.classList && item.classList.contains("resetIcon"));
-    if (clearIcon) {
-      e.stopPropagation();
-      return;
-    }
-    this.toggleSelectUl();
-  }
-  handleSelectFocus(e) {
-    if (e instanceof KeyboardEvent && e.keyCode === index$1.keybordKeyCodeEnum.ESC) {
-      e.stopPropagation();
-      return this.toggleSelectUl(true);
-    }
-    if (e instanceof KeyboardEvent &&
-      e.keyCode !== index$1.keybordKeyCodeEnum.TAB &&
-      e.keyCode !== index$1.keybordKeyCodeEnum.ENTER) {
-      return;
-    }
-    const tree = utils.getElementTree(utils.getClickedElement());
-    const parent = tree.find((elem) => {
-      return ((elem.nodeName.toLowerCase() === "z-input" &&
-        elem.id === `${this.htmlid}_input`) ||
-        (this.multiple &&
-          elem.nodeName.toLowerCase() === "ul" &&
-          elem.id === this.htmlid));
-    });
-    if (!parent) {
-      this.toggleSelectUl(e instanceof MouseEvent ? true : false);
-    }
-  }
-  scrollToLetter(letter) {
-    const foundItem = this.itemsList.find((item) => item.name.charAt(0) === letter);
-    if (foundItem)
-      this.focusSelectItem(this.itemsList.indexOf(foundItem));
-  }
-  renderLabel() {
-    if (!this.label)
-      return;
-    return (index.h("z-input-label", { value: this.label, disabled: this.disabled, "aria-label": this.label, id: `${this.htmlid}_input_label` }));
-  }
-  renderInput() {
-    return (index.h("z-input", { id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_input`, placeholder: this.placeholder, value: !this.isOpen && !this.multiple && this.selectedItems.length
-        ? this.selectedItems[0].name.replace(/<[^>]+>/g, "")
-        : null, icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: this.hasAutcomplete(), hasmessage: false, disabled: this.disabled, readonly: this.readonly || (!this.hasAutcomplete() && this.isOpen), status: this.isOpen ? index$1.InputStatusEnum.selecting : this.status, onClick: (e) => {
-        this.handleInputClick(e);
-      }, onKeyUp: (e) => {
-        if (e.keyCode !== 13)
-          e.preventDefault();
-        utils.handleKeyboardSubmit(e, this.toggleSelectUl);
-      }, onKeyDown: (e) => this.arrowsSelectNav(e, this.selectedItems.length
-        ? this.itemsList.indexOf(this.selectedItems[0])
-        : -1), onInputChange: (e) => {
-        this.handleInputChange(e);
-      }, onKeyPress: (e) => {
-        if (!this.hasAutcomplete()) {
-          e.preventDefault();
-          this.scrollToLetter(String.fromCharCode(e.keyCode));
-        }
-      } }));
-  }
-  renderChips() {
-    if (!this.multiple || !this.selectedItems.length)
-      return;
-    return (index.h("div", { class: `chipsWrapper ${this.isOpen ? "open" : ""}` }, this.selectedItems.map((item) => (index.h("z-button-filter", { filterid: item.id, filtername: item.name.replace(/<[^>]+>/g, ""), issmall: true, onRemovefilter: () => this.selectItem(item, false) })))));
-  }
-  renderSelectUl() {
-    return (index.h("div", { class: this.isOpen ? "open" : "closed" }, index.h("div", { class: "ulScrollWrapper" }, index.h("ul", { role: "listbox", tabindex: this.disabled || this.readonly || !this.isOpen ? -1 : 0, id: this.htmlid, "aria-activedescendant": !this.multiple && this.selectedItems.length
-        ? this.selectedItems[0].id
-        : null, "aria-multiselectable": !!this.multiple, class: `
-            ${this.disabled ? " disabled" : ""}
-            ${this.readonly ? " readonly" : ""}
-            ${!this.isOpen && this.status
-        ? " input_" + this.status
-        : " input_default"}
-            ${this.selectedItems.length ? " filled" : ""}
-          ` }, this.renderSelectUlItems()))));
-  }
-  renderSelectUlItems() {
-    if (!this.itemsList.length)
-      return this.renderNoSearchResults();
-    return this.itemsList.map((item, key) => {
-      return (index.h("li", { role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": !!item.selected, class: item.disabled && "disabled", id: `${this.htmlid}_${key}`, onClick: () => this.selectItem(item, true), onKeyUp: (e) => utils.handleKeyboardSubmit(e, this.selectItem, item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, index.h("span", { innerHTML: item.name })));
-    });
-  }
-  renderNoSearchResults() {
-    return (index.h("li", { class: "noResults" }, index.h("z-icon", { name: "circle-cross-stroke" }), this.noresultslabel));
-  }
-  renderMessage() {
-    if (!this.hasmessage)
-      return;
-    return index.h("z-input-message", { message: this.message, status: this.status });
+  emitBackgroundClick() {
+    this.modalBackgroundClick.emit({ modalid: this.modalid });
   }
   render() {
-    return (index.h("div", { class: "selectWrapper" }, this.renderLabel(), this.renderChips(), this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+    return [
+      index.h("div", { class: "modal-container", id: this.modalid, role: "dialog" }, index.h("header", { onClick: this.emitModalHeaderActive.bind(this) }, index.h("div", null, this.modaltitle && index.h("h1", null, this.modaltitle), this.modalsubtitle && index.h("h2", null, this.modalsubtitle)), index.h("slot", { name: "modalCloseButton" }, index.h("button", { "aria-label": this.closeButtonLabel, onClick: this.emitModalClose.bind(this) }, index.h("z-icon", { name: "multiply-circle-filled" })))), index.h("div", { class: "modal-content" }, index.h("slot", { name: "modalContent" }))),
+      index.h("div", { class: "modal-background", "data-action": "modalBackground", "data-modal": this.modalid, onClick: this.emitBackgroundClick.bind(this) })
+    ];
   }
-  get hostElement() { return index.getElement(this); }
-  static get watchers() { return {
-    "items": ["watchItems"]
-  }; }
 };
-ZSelect.style = stylesCss$1;
+ZModal.style = stylesCss$1;
 
-const stylesCss = ":host>*{font-family:var(--dashboard-font);margin:0}:host(.regular)>*{font-weight:var(--font-rg)}:host(.semibold)>*{font-weight:600}:host(.light)>*{font-weight:300}:host(.h1)>*{font-size:32px;line-height:40px}:host(.h2)>*{font-size:28px;line-height:36px}:host(.h3)>*{font-size:24px;line-height:32px}:host(.h4)>*{font-size:20px;line-height:28px}:host(.b1)>*{font-size:20px;line-height:28px}:host(.b2)>*{font-size:18px;line-height:28px}:host(.b3)>*{font-size:16px;line-height:24px}:host(.b4)>*{font-size:14px;line-height:20px}:host(.b5)>*{font-size:12px;line-height:16px}";
+const stylesCss = ":host>*{font-family:var(--dashboard-font);margin:0}:host(.regular)>*{font-weight:var(--font-rg)}:host(.semibold)>*{font-weight:600}:host(.light)>*{font-weight:300}:host(.h1)>*{font-size:32px;line-height:40px}:host(.h2)>*{font-size:28px;line-height:36px}:host(.h3)>*{font-size:24px;line-height:32px}:host(.h4)>*{font-size:20px;line-height:28px}:host(.b1)>*{font-size:20px;line-height:28px}:host(.b2)>*{font-size:18px;line-height:28px}:host(.b3)>*{font-size:16px;line-height:24px}:host(.b4)>*{font-size:14px;line-height:20px}:host(.b5)>*{font-size:12px;line-height:16px}:host(:focus-visible){outline:none}";
 
 const ZTypography = class {
   constructor(hostRef) {
@@ -2892,13 +2538,10 @@ exports.license_activation_form = LicenseActivationForm;
 exports.license_activation_modal = LicenseActivationModal;
 exports.z_body = ZBody;
 exports.z_button = ZButton;
-exports.z_button_filter = ZButtonFilter;
 exports.z_icon = ZIcon;
 exports.z_info_box = ZInfoBox;
 exports.z_input = ZInput;
-exports.z_input_label = ZInputLabel;
 exports.z_input_message = ZInputMessage;
 exports.z_link = ZLink;
 exports.z_modal = ZModal;
-exports.z_select = ZSelect;
 exports.z_typography = ZTypography;