@zanichelli/albe-web-components 3.2.1 → 4.0.1

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

@@ -0,0 +1,272 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-84b7063a.js');
+const index$1 = require('./index-6b6a3299.js');
+const utils = require('./utils-8cc414c9.js');
+require('./breakpoints-88c4fd6c.js');
+
+const stylesCss$1 = "label{display:block;margin:var(--space-unit) 0;color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);line-height:1.33;letter-spacing:0.32px;text-transform:uppercase;text-align:left}label.disabled{color:var(--color-disabled02)}";
+
+const ZInputLabel = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** the label is disabled */
+    this.disabled = false;
+  }
+  render() {
+    return index.h("label", { htmlFor: this.htmlfor, class: { disabled: this.disabled } }, this.value);
+  }
+};
+ZInputLabel.style = stylesCss$1;
+
+const stylesCss = ".sc-z-select-h{display:inline-block;width:inherit;font-family:var(--font-family-sans);font-weight:var(--font-rg);font-size:var(--font-size-3);color:var(--color-text02)}.selectWrapper.sc-z-select>z-input.sc-z-select{width:100%}.selectWrapper.sc-z-select>div.sc-z-select{position:relative}.selectWrapper.sc-z-select>div.closed.sc-z-select{height:0;overflow:hidden}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select{background:var(--color-surface01);position:absolute;padding:calc(var(--space-unit) * 0.5) var(--space-unit);border:var(--border-size-small) solid var(--gray200);border-top:none;width:100%;box-sizing:border-box;outline:none}.selectWrapper.sc-z-select .closed.sc-z-select .ulScrollWrapper.sc-z-select{z-index:10}.selectWrapper.sc-z-select .open.sc-z-select .ulScrollWrapper.sc-z-select{z-index:20}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select>z-list.sc-z-select{position:relative;padding:calc(var(--space-unit) * 0.5);max-height:240px;overflow:auto;outline:none;scrollbar-color:var(--color-primary01) transparent}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select>z-list.sc-z-select::-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)}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-track{background-color:transparent}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select>z-list.sc-z-select::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select span.sc-z-select{display:block;padding:0 calc(var(--space-unit) * 1.5)}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select span.selected.sc-z-select{font-weight:bold}.selectWrapper.sc-z-select .ulScrollWrapper.sc-z-select .noResults.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}";
+
+const ZSelect = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.optionSelect = index.createEvent(this, "optionSelect", 7);
+    /** the id of the input element */
+    this.htmlid = `id-${utils.randomId()}`;
+    /** the input is disabled */
+    this.disabled = false;
+    /** the input is readonly */
+    this.readonly = false;
+    /** input helper message (optional) - if set to `false` message won't be displayed */
+    this.message = true;
+    /** the input has autocomplete option */
+    this.autocomplete = false;
+    /** no result text message */
+    this.noresultslabel = "Nessun risultato";
+    this.isOpen = false;
+    this.selectedItem = null;
+    this.itemsList = [];
+    this.toggleSelectUl = this.toggleSelectUl.bind(this);
+    this.selectItem = this.selectItem.bind(this);
+    this.handleSelectFocus = this.handleSelectFocus.bind(this);
+  }
+  watchItems() {
+    this.itemsList = this.getInitialItemsArray();
+    this.selectedItem = this.itemsList.find((item) => item.selected);
+  }
+  /** get the input selected options */
+  async getSelectedItem() {
+    return this.selectedItem;
+  }
+  /** get the input value */
+  async getValue() {
+    return this.getSelectedValue();
+  }
+  /** set the input value */
+  async setValue(value) {
+    let values = [];
+    if (typeof value === "string") {
+      values.push(value);
+    }
+    else {
+      values = value;
+    }
+    this.selectedItem = this.itemsList.find((item) => values.includes(item.id));
+  }
+  emitOptionSelect() {
+    this.optionSelect.emit({
+      id: this.htmlid,
+      selected: this.getSelectedValue(),
+    });
+  }
+  componentWillLoad() {
+    this.watchItems();
+  }
+  componentWillRender() {
+    this.filterItems(this.searchString);
+  }
+  getInitialItemsArray() {
+    return typeof this.items === "string" ? JSON.parse(this.items) : this.items;
+  }
+  mapSelectedItemToItemsArray() {
+    const initialItemsList = this.getInitialItemsArray();
+    return initialItemsList.map((item) => {
+      var _a;
+      item.selected = item.id === ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id);
+      return item;
+    });
+  }
+  getSelectedValue() {
+    var _a;
+    return (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id;
+  }
+  filterItems(searchString) {
+    const prevList = this.mapSelectedItemToItemsArray();
+    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) +
+          `<strong>${item.name.substring(start, end)}</strong>` +
+          item.name.substring(end, item.name.length);
+        item.name = newName;
+        return item;
+      });
+    }
+  }
+  hasAutocomplete() {
+    return utils.boolean(this.autocomplete) === true;
+  }
+  handleInputChange(e) {
+    this.searchString = e.detail.value;
+    if (!this.isOpen)
+      this.toggleSelectUl();
+  }
+  selectItem(item, selected) {
+    if (item && item.disabled)
+      return;
+    this.itemsList = this.mapSelectedItemToItemsArray();
+    this.itemsList = this.itemsList.map((i) => {
+      i.selected = false;
+      if (i.id === (item ? item.id : null))
+        i.selected = selected;
+      return i;
+    });
+    this.selectedItem = this.itemsList.find((item) => item.selected);
+    this.emitOptionSelect();
+    if (this.searchString)
+      this.searchString = null;
+  }
+  arrowsSelectNav(e, key) {
+    const arrows = [index$1.KeyboardCodeEnum.ARROW_DOWN, index$1.KeyboardCodeEnum.ARROW_UP];
+    if (!arrows.includes(e.key))
+      return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (!this.isOpen)
+      this.toggleSelectUl();
+    let index;
+    if (e.key === index$1.KeyboardCodeEnum.ARROW_DOWN) {
+      index = key + 1 === this.itemsList.length ? 0 : key + 1;
+    }
+    else if (e.key === index$1.KeyboardCodeEnum.ARROW_UP) {
+      index = key <= 0 ? this.itemsList.length - 1 : key - 1;
+    }
+    this.focusSelectItem(index);
+  }
+  focusSelectItem(index) {
+    const focusElem = this.element.querySelector(`#${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.element.querySelector(`#${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.key === index$1.KeyboardCodeEnum.ESC) {
+      e.stopPropagation();
+      return this.toggleSelectUl(true);
+    }
+    if (e instanceof KeyboardEvent &&
+      e.key !== index$1.KeyboardCodeEnum.TAB &&
+      e.key !== index$1.KeyboardCodeEnum.ENTER) {
+      return;
+    }
+    const tree = utils.getElementTree(utils.getClickedElement());
+    const parent = tree.find((elem) => {
+      return (elem.nodeName.toLowerCase() === "z-input" &&
+        elem.id === `${this.htmlid}_input`);
+    });
+    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));
+  }
+  renderInput() {
+    return (index.h("z-input", { id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_input`, placeholder: this.placeholder, value: !this.isOpen && this.selectedItem
+        ? this.selectedItem.name.replace(/<[^>]+>/g, "")
+        : null, label: this.label, "aria-label": this.ariaLabel, icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: this.hasAutocomplete(), message: false, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, onClick: (e) => {
+        this.handleInputClick(e);
+      }, onKeyUp: (e) => {
+        if (e.keyCode !== 13)
+          e.preventDefault();
+        utils.handleKeyboardSubmit(e, this.toggleSelectUl);
+      }, onKeyDown: (e) => {
+        return this.arrowsSelectNav(e, this.selectedItem ? this.itemsList.indexOf(this.selectedItem) : -1);
+      }, onInputChange: (e) => {
+        this.handleInputChange(e);
+      }, onKeyPress: (e) => {
+        if (!this.hasAutocomplete()) {
+          e.preventDefault();
+          this.scrollToLetter(String.fromCharCode(e.keyCode));
+        }
+      } }));
+  }
+  renderSelectUl() {
+    var _a;
+    return (index.h("div", { class: this.isOpen ? "open" : "closed", tabindex: "-1" }, index.h("div", { class: "ulScrollWrapper", tabindex: "-1" }, index.h("z-list", { role: "listbox", tabindex: this.disabled || this.readonly || !this.isOpen ? -1 : 0, id: this.htmlid, "aria-activedescendant": (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id, "aria-multiselectable": false, class: {
+        disabled: this.disabled,
+        readonly: this.readonly,
+        filled: !!this.selectedItem,
+        [`input_${this.status}`]: !this.isOpen && !!this.status,
+        input_default: this.isOpen || !this.status,
+      } }, this.renderSelectUlItems()))));
+  }
+  renderSelectUlItems() {
+    if (!this.itemsList.length)
+      return this.renderNoSearchResults();
+    return this.itemsList.map((item, key) => {
+      return (index.h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: index$1.ListDividerType.element, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": !!item.selected, id: `${this.htmlid}_${key}`, onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, index.h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
+    });
+  }
+  renderNoSearchResults() {
+    return (index.h("z-list-element", { color: "blue500", class: "noResults" }, index.h("z-icon", { name: "multiply-circle", fill: "blue500" }), this.noresultslabel));
+  }
+  renderMessage() {
+    if (utils.boolean(this.message) === false)
+      return;
+    return (index.h("z-input-message", { message: utils.boolean(this.message) === true ? undefined : this.message, status: this.status }));
+  }
+  render() {
+    return (index.h("div", { class: "selectWrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "items": ["watchItems"]
+  }; }
+};
+ZSelect.style = stylesCss;
+
+exports.z_input_label = ZInputLabel;
+exports.z_select = ZSelect;

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

@@ -0,0 +1,228 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-84b7063a.js');
+const index$1 = require('./index-6b6a3299.js');
+const utils = require('./utils-8cc414c9.js');
+require('./breakpoints-88c4fd6c.js');
+
+const stylesCss$1 = ".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) {
+    index.registerInstance(this, hostRef);
+    this.inputChange = index.createEvent(this, "inputChange", 7);
+    this.startTyping = index.createEvent(this, "startTyping", 7);
+    this.stopTyping = index.createEvent(this, "stopTyping", 7);
+    this.inputCheck = index.createEvent(this, "inputCheck", 7);
+    /** the id of the input element */
+    this.htmlid = `id-${utils.randomId()}`;
+    /** the input is disabled */
+    this.disabled = false;
+    /** the input is readonly */
+    this.readonly = false;
+    /** the input is required (optional): available for text, password, number, email, textarea, checkbox */
+    this.required = false;
+    /** checked: available for checkbox, radio */
+    this.checked = false;
+    /** 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.labelPosition = index$1.LabelPositions.right;
+    /** render clear icon when typing (optional): available for text */
+    this.hasclearicon = true;
+    this.isTyping = false;
+    this.passwordHidden = true;
+    this.typingtimeout = 300;
+  }
+  inputCheckListener(e) {
+    const data = e.detail;
+    switch (this.type) {
+      case index$1.InputTypeEnum.radio:
+        if (data.type === index$1.InputTypeEnum.radio &&
+          data.name === this.name &&
+          data.id !== this.htmlid) {
+          this.checked = false;
+        }
+      default:
+        return;
+    }
+  }
+  /** get checked status */
+  async isChecked() {
+    switch (this.type) {
+      case index$1.InputTypeEnum.checkbox:
+      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)
+      this.emitStartTyping();
+    let validity = {};
+    if (this.type === index$1.InputTypeEnum.textarea) {
+      validity = this.getValidity("textarea");
+    }
+    else {
+      validity = this.getValidity("input");
+    }
+    this.value = value;
+    this.inputChange.emit({ value, validity });
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => {
+      this.emitStopTyping(this.value, validity);
+    }, this.typingtimeout);
+  }
+  emitStartTyping() {
+    this.isTyping = true;
+    this.startTyping.emit();
+  }
+  emitStopTyping(value, validity) {
+    this.isTyping = false;
+    this.stopTyping.emit({
+      value: value,
+      validity: validity,
+    });
+  }
+  emitInputCheck(checked) {
+    this.inputCheck.emit({
+      id: this.htmlid,
+      checked: checked,
+      type: this.type,
+      name: this.name,
+      value: this.value,
+      validity: this.getValidity("input"),
+    });
+  }
+  getValidity(type) {
+    const input = this.hostElement.querySelector(type);
+    return input.validity;
+  }
+  /* START text/password/email/number */
+  getTextAttributes() {
+    return {
+      id: this.htmlid,
+      name: this.name,
+      placeholder: this.placeholder,
+      value: this.value,
+      disabled: this.disabled,
+      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),
+    };
+  }
+  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 });
+    }
+    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()));
+  }
+  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));
+  }
+  renderIcons() {
+    return (index.h("span", { class: "iconsWrapper" }, this.renderResetIcon(), this.renderIcon()));
+  }
+  renderIcon() {
+    if (this.type === index$1.InputTypeEnum.password) {
+      return this.renderShowHidePassword();
+    }
+    if (!this.icon)
+      return;
+    return (index.h("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("button", { class: "iconButton resetIcon", "aria-label": "cancella il contenuto dell'input", onClick: () => this.emitInputChange("") }, index.h("z-icon", { name: "multiply" })));
+  }
+  renderShowHidePassword() {
+    return (index.h("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 (utils.boolean(this.message) === false)
+      return;
+    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() {
+    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()));
+  }
+  /* END textarea */
+  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.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 */
+  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 }))));
+  }
+  /* END radio */
+  render() {
+    switch (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();
+      default:
+        return this.renderInputText(this.type);
+    }
+  }
+  get hostElement() { return index.getElement(this); }
+};
+ZInput.style = stylesCss$1;
+
+const stylesCss = ":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) {
+    index.registerInstance(this, hostRef);
+    this.statusIcons = {
+      success: "checkmark-circle",
+      error: "multiply-circled",
+      warning: "exclamation-circle",
+    };
+  }
+  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 })));
+  }
+};
+ZInputMessage.style = stylesCss;
+
+exports.z_input = ZInput;
+exports.z_input_message = ZInputMessage;

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

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-84b7063a.js');
+const index$1 = require('./index-6b6a3299.js');
+
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.z-list-group-header-container{color:var(--gray700);font-size:var(--font-size-2);font-weight:var(--font-sb) !important;line-height:1.4;letter-spacing:0.16px}:host>.z-list-group-header-container.has-header{padding-top:var(--space-unit);padding-bottom:var(--space-unit)}:host>.z-list-group-header-container.has-header>z-divider{margin-top:var(--space-unit)}";
+
+const ZListGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * [optional] Sets size of inside elements.
+     */
+    this.size = index$1.ListSize.medium;
+    /**
+     * [optional] Sets the position where to insert the divider.
+     */
+    this.dividerType = index$1.ListDividerType.none;
+    /**
+     * [optional] Sets the divider size.
+     */
+    this.dividerSize = index$1.DividerSize.small;
+    /**
+     * [optional] Sets the divider color.
+     */
+    this.dividerColor = "gray200";
+  }
+  componentDidLoad() {
+    const children = this.host.children;
+    for (let i = 0; i < children.length; i++) {
+      if (children.length - 1 > i) {
+        children[i].setAttribute("divider-type", this.dividerType);
+        children[i].setAttribute("divider-size", this.dividerSize);
+        children[i].setAttribute("divider-color", this.dividerColor);
+      }
+      children[i].setAttribute("size", this.size);
+    }
+  }
+  componentWillLoad() {
+    this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
+  }
+  render() {
+    return (index.h(index.Host, { role: "group" }, index.h("div", { class: {
+        "z-list-group-header-container": true,
+        "has-header": this.hasHeader,
+      } }, index.h("slot", { name: "header-title" }), this.dividerType === index$1.ListDividerType.header && (index.h("z-divider", { color: this.dividerColor, size: this.dividerSize }))), index.h("slot", null)));
+  }
+  get host() { return index.getElement(this); }
+};
+ZListGroup.style = stylesCss;
+
+exports.z_list_group = ZListGroup;

package/dist/cjs/{z-list_3.cjs.entry.js → z-list_2.cjs.entry.js}

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-84b7063a.js');
-const index$1 = require('./index-b1289f95.js');
+const index$1 = require('./index-6b6a3299.js');
 
-const stylesCss$2 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:flex;flex-direction:column}";
+const stylesCss$1 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:flex;flex-direction:column}";
 
 const ZList = class {
   constructor(hostRef) {
@@ -29,9 +29,9 @@ const ZList = class {
   }
   get host() { return index.getElement(this); }
 };
-ZList.style = stylesCss$2;
+ZList.style = stylesCss$1;
 
-const stylesCss$1 = ":host{outline:none}:host>.container,:host>.container-contextual-menu{--background-color-list-element:var(--bg-white);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02);font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}:host([size=\"small\"])>.container{padding:calc(var(--space-unit) / 2) 0;min-height:calc(var(--space-unit) * 4)}:host([size=\"medium\"])>.container{padding:var(--space-unit) 0;min-height:calc(var(--space-unit) * 5)}:host([size=\"large\"])>.container{padding:calc(var(--space-unit) * 2) 0;min-height:calc(var(--space-unit) * 7)}:host([size=\"x-large\"])>.container{padding:calc(var(--space-unit) * 3) 0;min-height:calc(var(--space-unit) * 9)}:host([expandable])>.container,:host([expandable])>.container-contextual-menu,:host([clickable])>.container,:host([clickable])>.container-contextual-menu{cursor:pointer}:host([expandable]:hover)>.container,:host([expandable]:hover)>.container-contextual-menu,:host([clickable]:hover)>.container,:host([clickable]:hover)>.container-contextual-menu{background-color:var(--background-hover-color-list-element)}:host([expandable]:focus:focus-visible)>.container,:host([expandable]:focus:focus-visible)>.container-contextual-menu,:host([clickable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container-contextual-menu{box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([expandable]:active)>.container-contextual-menu,:host([clickable]:active)>.container,:host([clickable]:active)>.container-contextual-menu{background-color:var(--background-active-color-list-element)}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container,:host>.container-contextual-menu>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded,:host>.container-contextual-menu>.z-list-element-inner-container.expanded{display:block}:host([clickable]:hover)>.container-contextual-menu{background-color:var(--color-surface03)}.container-contextual-menu:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}";
+const stylesCss = ":host{outline:none}:host>.container,:host>.container-contextual-menu{--background-color-list-element:var(--bg-white);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02);font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}:host([size=\"small\"])>.container{padding:calc(var(--space-unit) / 2) 0;min-height:calc(var(--space-unit) * 4)}:host([size=\"medium\"])>.container{padding:var(--space-unit) 0;min-height:calc(var(--space-unit) * 5)}:host([size=\"large\"])>.container{padding:calc(var(--space-unit) * 2) 0;min-height:calc(var(--space-unit) * 7)}:host([size=\"x-large\"])>.container{padding:calc(var(--space-unit) * 3) 0;min-height:calc(var(--space-unit) * 9)}:host([expandable])>.container,:host([expandable])>.container-contextual-menu,:host([clickable])>.container,:host([clickable])>.container-contextual-menu{cursor:pointer}:host([expandable]:hover)>.container,:host([expandable]:hover)>.container-contextual-menu,:host([clickable]:hover)>.container,:host([clickable]:hover)>.container-contextual-menu{background-color:var(--background-hover-color-list-element)}:host([expandable]:focus:focus-visible)>.container,:host([expandable]:focus:focus-visible)>.container-contextual-menu,:host([clickable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container-contextual-menu{box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([expandable]:active)>.container-contextual-menu,:host([clickable]:active)>.container,:host([clickable]:active)>.container-contextual-menu{background-color:var(--background-active-color-list-element)}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container,:host>.container-contextual-menu>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded,:host>.container-contextual-menu>.z-list-element-inner-container.expanded{display:block}:host([clickable]:hover)>.container-contextual-menu{background-color:var(--color-surface03)}.container-contextual-menu:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}";
 
 const ZListElement = class {
   /**
@@ -173,54 +173,7 @@ const ZListElement = class {
   }
   get host() { return index.getElement(this); }
 };
-ZListElement.style = stylesCss$1;
-
-const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.z-list-group-header-container{color:var(--gray700);font-size:var(--font-size-2);font-weight:var(--font-sb) !important;line-height:1.4;letter-spacing:0.16px}:host>.z-list-group-header-container.has-header{padding-top:var(--space-unit);padding-bottom:var(--space-unit)}:host>.z-list-group-header-container.has-header>z-divider{margin-top:var(--space-unit)}";
-
-const ZListGroup = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * [optional] Sets size of inside elements.
-     */
-    this.size = index$1.ListSize.medium;
-    /**
-     * [optional] Sets the position where to insert the divider.
-     */
-    this.dividerType = index$1.ListDividerType.none;
-    /**
-     * [optional] Sets the divider size.
-     */
-    this.dividerSize = index$1.DividerSize.small;
-    /**
-     * [optional] Sets the divider color.
-     */
-    this.dividerColor = "gray200";
-  }
-  componentDidLoad() {
-    const children = this.host.children;
-    for (let i = 0; i < children.length; i++) {
-      if (children.length - 1 > i) {
-        children[i].setAttribute("divider-type", this.dividerType);
-        children[i].setAttribute("divider-size", this.dividerSize);
-        children[i].setAttribute("divider-color", this.dividerColor);
-      }
-      children[i].setAttribute("size", this.size);
-    }
-  }
-  componentWillLoad() {
-    this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
-  }
-  render() {
-    return (index.h(index.Host, { role: "group" }, index.h("div", { class: {
-        "z-list-group-header-container": true,
-        "has-header": this.hasHeader,
-      } }, index.h("slot", { name: "header-title" }), this.dividerType === index$1.ListDividerType.header && (index.h("z-divider", { color: this.dividerColor, size: this.dividerSize }))), index.h("slot", null)));
-  }
-  get host() { return index.getElement(this); }
-};
-ZListGroup.style = stylesCss;
+ZListElement.style = stylesCss;
 
 exports.z_list = ZList;
 exports.z_list_element = ZListElement;
-exports.z_list_group = ZListGroup;