@zanichelli/delta_share 2.0.6 → 2.0.7

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9ca7d5e5.js');
+const index = require('./index-458dc8f4.js');
 const _commonjsHelpers = require('./_commonjsHelpers-537d719a.js');
-const index$1 = require('./index-9c6fd1db.js');
-const icons = require('./icons-2aca6c75.js');
-const utils = require('./utils-8a10bba9.js');
-require('./breakpoints-a55736d0.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');
 
 var DeviceEnum;
 (function (DeviceEnum) {
@@ -1963,15 +1963,17 @@ const LicenseActivationForm = class {
     this.submitButtonClick = index.createEvent(this, "submitButtonClick", 7);
     this.redirectToSupport = this.redirectToSupport.bind(this);
   }
+  watchPropHandler() {
+    if (!this.requestLoading) {
+      if (this.inputMessageRef && this.error) {
+        this.inputMessageRef.focus();
+      }
+    }
+  }
   componentWillLoad() {
     this.showInfoBox = !!this.initialShowInfoBox;
     this.inputVal = this.initialCode ? this.initialCode : "";
   }
-  componentDidUpdate() {
-    if (this.inputMessageRef && this.error) {
-      this.inputMessageRef.focus();
-    }
-  }
   handleFormInputChange(detail) {
     this.inputVal = detail.value;
     this.formInputChange.emit(detail);
@@ -1999,7 +2001,7 @@ const LicenseActivationForm = class {
         ? previewInputPlaceholder
         : placeholder, status: this.variant === LicenseActivationVariantEnum.box
         ? null
-        : inputStatus, message: false, htmltitle: placeholder, disabled: !!this.requestLoading, onInputChange: (e) => this.handleFormInputChange(e.detail) }), this.renderInputMessage()));
+        : inputStatus, hasmessage: false, htmltitle: placeholder, disabled: !!this.requestLoading, onInputChange: (e) => this.handleFormInputChange(e.detail) }), this.renderInputMessage()));
   }
   renderInputMessage() {
     const { inputMessage, inputStatus } = this.formTexts;
@@ -2014,9 +2016,13 @@ const LicenseActivationForm = class {
   }
   renderButton() {
     const disabled = (this.variant === LicenseActivationVariantEnum.modal && !this.inputVal) ||
-      !!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)));
+      !!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));
   }
   renderAdditionalDescription() {
     const { additionalDescription } = this.formTexts;
@@ -2087,6 +2093,9 @@ const LicenseActivationForm = class {
   render() {
     return (index.h(index.Host, { variant: this.variant }, index.h("div", null, this.renderAdditionalDescription(), this.renderInput(), this.renderButton()), this.renderInfoLink(), index.h("div", null, this.renderInfoBox(), this.renderErrorSection())));
   }
+  static get watchers() { return {
+    "requestLoading": ["watchPropHandler"]
+  }; }
 };
 LicenseActivationForm.style = licenseActivationFormCss;
 
@@ -2122,11 +2131,11 @@ const ZBody = class {
     this.variant = "regular";
   }
   render() {
-    return (index.h("z-typography", { tabIndex: 0, component: this.component || "span", level: `b${this.level}`, variant: this.variant }, index.h("slot", null)));
+    return (index.h("z-typography", { component: this.component || "span", level: `b${this.level}`, variant: this.variant }, index.h("slot", null)));
   }
 };
 
-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 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 ZButton = class {
   constructor(hostRef) {
@@ -2135,41 +2144,72 @@ const ZButton = class {
     this.disabled = false;
     /** HTML button type attribute. */
     this.type = index$1.ButtonTypeEnum.button;
-    /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
+    /** Graphical variant: `primary`, `secondary` and `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;
   }
-  getAttributes() {
-    return {
-      id: this.htmlid,
-      "aria-label": this.ariaLabel,
-      class: {
-        container: true,
-        [this.variant]: true,
-        [this.size]: true,
-        "has-text": !!this.hostElement.textContent
-      }
-    };
+  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)));
   }
   render() {
-    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)));
+    if (this.isfixed) {
+      return this.renderFixedPillow(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)));
+    return this.renderDynamicPillow(this.filtername);
   }
-  get hostElement() { return index.getElement(this); }
 };
-ZButton.style = stylesCss$7;
+ZButtonFilter.style = stylesCss$9;
 
-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 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 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 {
@@ -2177,12 +2217,12 @@ const ZIcon = class {
     }
   }
   render() {
-    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])));
+    return (index.h("svg", { viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid }, this.selectPathOrPolygon(icons.icons[this.name])));
   }
 };
-ZIcon.style = stylesCss$6;
+ZIcon.style = stylesCss$8;
 
-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 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 ZInfoBox = class {
   constructor(hostRef) {
@@ -2198,9 +2238,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$5;
+ZInfoBox.style = stylesCss$7;
 
-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 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 ZInput = class {
   constructor(hostRef) {
@@ -2209,8 +2249,9 @@ 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 = `id-${utils.randomId()}`;
+    this.htmlid = utils.randomId();
     /** the input is disabled */
     this.disabled = false;
     /** the input is readonly */
@@ -2219,15 +2260,20 @@ const ZInput = class {
     this.required = false;
     /** checked: available for checkbox, radio */
     this.checked = false;
-    /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */
-    this.message = true;
+    /** show input helper message (optional): available for text, password, number, email, textarea, select */
+    this.hasmessage = true;
     /** the input label position: available for checkbox, radio */
-    this.labelPosition = index$1.LabelPositions.right;
+    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;
     /** 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;
@@ -2242,6 +2288,27 @@ 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) {
@@ -2249,13 +2316,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) {
-    if (!this.isTyping)
+  emitInputChange(value, keycode) {
+    if (!this.isTyping) {
       this.emitStartTyping();
+    }
     let validity = {};
     if (this.type === index$1.InputTypeEnum.textarea) {
       validity = this.getValidity("textarea");
@@ -2264,7 +2331,7 @@ const ZInput = class {
       validity = this.getValidity("input");
     }
     this.value = value;
-    this.inputChange.emit({ value, validity });
+    this.inputChange.emit({ value, keycode, validity });
     clearTimeout(this.timer);
     this.timer = setTimeout(() => {
       this.emitStopTyping(this.value, validity);
@@ -2297,7 +2364,7 @@ const ZInput = class {
   }
   /* START text/password/email/number */
   getTextAttributes() {
-    return {
+    const attr = {
       id: this.htmlid,
       name: this.name,
       placeholder: this.placeholder,
@@ -2306,33 +2373,34 @@ const ZInput = class {
       readonly: this.readonly,
       required: this.required,
       title: this.htmltitle,
-      class: {
-        [`input_${this.status || "default"}`]: true,
-        filled: !!this.value,
-      },
-      autocomplete: this.autocomplete,
-      onInput: (e) => this.emitInputChange(e.target.value),
+      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),
     };
+    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 = Object.assign(Object.assign({}, attr.class), { hasIcon: true });
-    }
-    if (this.hasclearicon) {
-      attr.class = Object.assign(Object.assign({}, attr.class), { hasClearIcon: true });
-    }
+    if (this.icon || type === index$1.InputTypeEnum.password)
+      attr.class = attr.class + " hasIcon";
+    if (this.hasclearicon)
+      attr.class = attr.class + " hasClearIcon";
     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-label": this.ariaLabel || this.label })), this.renderIcons()), this.renderMessage()));
+        : type }, attr, { "aria-labelledby": `${this.htmlid}_label` })), this.renderIcons()), this.renderMessage()));
   }
   renderLabel() {
     if (!this.label)
       return;
-    return (index.h("label", { class: "inputLabel body-5-sb", id: `${this.htmlid}_label`, htmlFor: this.htmlid, "aria-label": this.label }, this.label));
+    return (index.h("z-input-label", { value: this.label, disabled: this.disabled, "aria-label": this.label, id: `${this.htmlid}_label` }));
   }
   renderIcons() {
-    return (index.h("span", { class: "iconsWrapper" }, this.renderResetIcon(), this.renderIcon()));
+    return (index.h("span", { class: `iconsWrapper ${this.disabled ? "disabled" : ""}` }, this.renderResetIcon(), this.renderIcon()));
   }
   renderIcon() {
     if (this.type === index$1.InputTypeEnum.password) {
@@ -2340,67 +2408,108 @@ const ZInput = class {
     }
     if (!this.icon)
       return;
-    return (index.h("button", { type: "button", class: "iconButton inputIcon", tabIndex: -1 }, index.h("z-icon", { name: this.icon })));
+    return index.h("z-icon", { class: "inputIcon", name: this.icon });
   }
   renderResetIcon() {
     if (!this.hasclearicon || !this.value || this.disabled || this.readonly)
       return;
-    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" })));
+    return (index.h("z-icon", { class: "resetIcon", name: "multiply", onClick: (e) => this.emitInputChange("", e.keyCode) }));
   }
   renderShowHidePassword() {
-    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" })));
+    return (index.h("z-icon", { class: "inputIcon", name: this.passwordHidden ? "view" : "view-off", onClick: () => (this.passwordHidden = !this.passwordHidden) }));
   }
   renderMessage() {
-    if (utils.boolean(this.message) === false)
+    if (!this.hasmessage)
       return;
-    return (index.h("z-input-message", { message: utils.boolean(this.message) === true ? undefined : this.message, status: this.status }));
+    return index.h("z-input-message", { message: 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: "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()));
+    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 = ""),
+    };
   }
   /* END textarea */
-  handleCheck(ev) {
-    this.checked = ev.target.checked;
+  /* START checkbox */
+  handleCheckboxChange() {
+    this.checked = !this.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.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 }))));
+    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 }))));
   }
   /* 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.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 }))));
+    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 }))));
   }
   /* 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(this.type);
+        return this.renderInputText();
     }
   }
   get hostElement() { return index.getElement(this); }
 };
-ZInput.style = stylesCss$4;
+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;
 
-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 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 ZInputMessage = class {
   constructor(hostRef) {
@@ -2408,16 +2517,19 @@ 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(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 })));
+    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 })));
   }
 };
-ZInputMessage.style = stylesCss$3;
+ZInputMessage.style = stylesCss$4;
 
-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 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 ZLink = class {
   constructor(hostRef) {
@@ -2434,23 +2546,15 @@ const ZLink = class {
     /** white variant flag (optional) */
     this.iswhite = false;
     /** link text variant (optional) */
-    this.textcolor = "primary";
+    this.textcolor = 'blue';
     /** 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");
-    }
-    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");
+      console.warn('z-link iswhite prop is deprecated and will be dropped in a next release, please use textcolor prop instead');
     }
   }
   emitZLinkClick(e, linkId) {
@@ -2459,38 +2563,25 @@ 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() {
-    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))));
+    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)));
   }
-  get hostElement() { return index.getElement(this); }
 };
-ZLink.style = stylesCss$2;
+ZLink.style = stylesCss$3;
 
-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 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 ZModal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.modalClose = index.createEvent(this, "modalClose", 7);
     this.modalHeaderActive = index.createEvent(this, "modalHeaderActive", 7);
-    this.modalBackgroundClick = index.createEvent(this, "modalBackgroundClick", 7);
-    /** aria-label for close button (optional) */
-    this.closeButtonLabel = "close modal";
+    this.emitModalClose = this.emitModalClose.bind(this);
+    this.emitModalHeaderActive = this.emitModalHeaderActive.bind(this);
   }
   emitModalClose() {
     this.modalClose.emit({ modalid: this.modalid });
@@ -2498,19 +2589,287 @@ const ZModal = class {
   emitModalHeaderActive() {
     this.modalHeaderActive.emit({ modalid: this.modalid });
   }
-  emitBackgroundClick() {
-    this.modalBackgroundClick.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 });
   }
   render() {
-    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) })
-    ];
+    return (index.h("div", { class: "selectWrapper" }, this.renderLabel(), this.renderChips(), this.renderInput(), this.renderSelectUl(), this.renderMessage()));
   }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "items": ["watchItems"]
+  }; }
 };
-ZModal.style = stylesCss$1;
+ZSelect.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}:host(:focus-visible){outline:none}";
+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 ZTypography = class {
   constructor(hostRef) {
@@ -2538,10 +2897,13 @@ 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;