@zanichelli/albe-web-components 3.2.2 → 4.0.0

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

@@ -3,7 +3,7 @@
 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 breakpoints = require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ".sc-z-file-h{font-family:var(--font-family-sans);font-weight:var(--font-rg);position:relative}.sc-z-file-h>z-tooltip.sc-z-file{z-index:10}.sc-z-file-h>z-tooltip.sc-z-file>.tootip-content.sc-z-file{white-space:nowrap}.sc-z-file-h>z-chip.sc-z-file span.sc-z-file{max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.33;letter-spacing:0.32px;display:block}";
@@ -35,7 +35,6 @@ const ZFile = class {
     (_b = (_a = this.icon) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
   }
   elementHasEllipsis() {
-    console.log(this.ellipsis, this.ellipsis.offsetWidth, this.ellipsis.scrollWidth);
     return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
   }
   render() {

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

@@ -3,7 +3,7 @@
 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 = ":host{width:100%}footer{width:auto;height:auto;box-sizing:border-box;font-family:var(--font-family-sans);font-size:13px;padding:var(--space-unit) 0;background-color:var(--gray900);color:var(--gray50)}footer *{box-sizing:border-box}footer>section>div{display:grid}#top{padding:0 calc(var(--space-unit) * 2)}#bottom{width:auto;height:auto;margin:0;padding:0 calc(var(--space-unit) * 2);white-space:pre-line;font-size:12px}#bottom>div{display:grid;grid-template-columns:1fr}#bottom>div>div.item{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 1;height:auto;width:auto;padding:calc(var(--space-unit) * 2) 0}#bottom>div>div.item:nth-child(1){order:2}#bottom>div>div.item:nth-child(2){order:1;border-bottom:1px solid var(--gray50)}#bottom>div>div.item>div.social{display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:repeat(auto-fill, 24px);column-gap:12px;padding:0;margin-bottom:0px}#bottom>div>div.bottom-links{display:none}#bottom>div>div.item>p{margin:var(--space-unit) 0;padding:var(--space-unit) 0}#bottom>div>div.item>p:first-child{margin-top:0}#bottom>div>div.item>p:last-child{margin-bottom:0}#bottom>div>div.logo>p>span{display:block}#extension{padding:0 calc(var(--space-unit) * 2)}#extension>div{display:grid;grid-template-columns:1fr;grid-row-gap:var(--space-unit);align-items:center}#extension z-divider{margin-top:var(--space-unit)}#extension z-button-deprecated{margin-left:var(--space-unit)}div.limited-width{margin:auto;max-width:var(--mw)}@media only screen and (min-width: 768px){footer{padding:0}#top{background-color:var(--gray800);padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3)}#top z-footer-section:last-child{display:none}#bottom{background-color:var(--gray900);padding:0 calc(var(--space-unit) * 3)}#bottom>div{grid-template-columns:repeat(4, 1fr);grid-column-gap:var(--grid-tablet-margin)}#bottom>div>div.item{margin:0}#bottom>div>div.item:nth-child(1){order:1}#bottom>div>div.item:nth-child(2){order:2;border-bottom:none}#bottom>div>div.item>p{padding-top:0}#bottom>div>div.logo>z-logo{width:auto;height:39px}#bottom>div>div.bottom-links{display:block;grid-column:span 2;order:3}#bottom>div>div.bottom-links{display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(auto-fill, 24px);grid-column-gap:var(--grid-tablet-margin);font-size:12px}#extension{margin:auto;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 3) 0;background-color:var(--gray800);color:white;grid-template-columns:1fr 1fr}#extension>div>div{text-align:end}#extension z-divider{grid-column:1 / span 2}}@media only screen and (min-width: 1152px){#top{width:100%}#top>div{grid-template-columns:repeat(6, 1fr);grid-column-gap:var(--grid-desktop-margin)}#bottom>div>div.item:nth-child(1)>p:nth-of-type(2){font-size:10px}#bottom>div>div.item>p{padding-bottom:0;margin-bottom:calc(var(--space-unit) * 2)}#bottom>div>div.item>div.social{margin-top:0}#bottom>div>div.bottom-links{padding:calc(var(--space-unit) * 2) 0 0 0}#bottom>div>div.bottom-links{grid-template-columns:repeat(3, 1fr);grid-column-gap:var(--grid-desktop-margin);margin:0}}@media only screen and (min-width: 1366px){#top{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4)}#bottom{padding:0 calc(var(--space-unit) * 4)}#extension{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4) 0}}";
 

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

@@ -0,0 +1,271 @@
+'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 = ".sc-z-input-deprecated-h{display:inline-block;width:inherit}input.sc-z-input-deprecated::-ms-clear,input.sc-z-input-deprecated::-ms-reveal{display:none}.sc-z-input-deprecated-h input.sc-z-input-deprecated::-ms-clear,.sc-z-input-deprecated-h input.sc-z-input-deprecated::-ms-reveal{display:none}input.sc-z-input-deprecated,textarea.sc-z-input-deprecated,.textareaWrapper.sc-z-input-deprecated,ul[role=\"listbox\"].sc-z-input-deprecated{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-deprecated:focus:focus-visible,li[role=\"option\"].sc-z-input-deprecated:focus:focus-visible,.focus.sc-z-input-deprecated{box-shadow:var(--shadow-focus-primary)}.filled.sc-z-input-deprecated{border-color:var(--color-surface05)}.input_success.sc-z-input-deprecated,.input_success.sc-z-input-deprecated:hover,.input_success.hover.sc-z-input-deprecated{background:var(--color-success-inverse);border-color:var(--color-success01);fill:var(--color-success01)}.input_error.sc-z-input-deprecated,.input_error.sc-z-input-deprecated:hover,.input_error.hover.sc-z-input-deprecated{background:var(--color-error-inverse);border-color:var(--color-error01);fill:var(--color-error01)}.input_warning.sc-z-input-deprecated,.input_warning.sc-z-input-deprecated:hover,.input_warning.hover.sc-z-input-deprecated{background:var(--color-warning-inverse);border-color:var(--color-warning01);fill:var(--color-warning01)}input[readonly].sc-z-input-deprecated,.readonly.sc-z-input-deprecated{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}input.sc-z-input-deprecated:disabled,.disabled.sc-z-input-deprecated,.filled.sc-z-input-deprecated:disabled{border-color:var(--color-disabled01);color:var(--color-disabled02);fill:var(--color-disabled01);pointer-events:none;box-shadow:none}input.sc-z-input-deprecated::placeholder,textarea.sc-z-input-deprecated::placeholder{color:var(--color-text05)}.sc-z-input-deprecated::-webkit-input-placeholder,.sc-z-input-deprecated::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input-deprecated:-ms-input-placeholder,.sc-z-input-deprecated:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input-deprecated::-moz-placeholder{color:var(--color-text05)}.sc-z-input-deprecated:-moz-placeholder{color:var(--color-text05)}.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated{fill:var(--color-icon02)}.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated{width:100%;height:calc(var(--space-unit) * 5.5);margin:0;padding:0 calc(var(--space-unit) * 4.5) 0 calc(var(--space-unit) * 1.5);box-sizing:border-box}.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.hasIcon.sc-z-input-deprecated,.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.hasClearIcon.sc-z-input-deprecated{padding-right:calc(var(--space-unit) * 4)}.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.hasIcon.hasClearIcon.sc-z-input-deprecated{padding-right:calc(var(--space-unit) * 7)}.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated{position:relative;z-index:1}.textWrapper.sc-z-input-deprecated .iconsWrapper.sc-z-input-deprecated{position:absolute;bottom:calc(var(--space-unit) * 1.5);right:calc(var(--space-unit) * 1.5);display:flex;z-index:2}.textWrapper.sc-z-input-deprecated .iconsWrapper.sc-z-input-deprecated>z-icon.sc-z-input-deprecated{--z-icon-width:18px;--z-icon-height:18px;display:block;margin-left:calc(var(--space-unit) * 0.5)}.textWrapper.sc-z-input-deprecated .iconsWrapper.sc-z-input-deprecated>z-icon.resetIcon.sc-z-input-deprecated,.textWrapper.sc-z-input-deprecated .iconsWrapper.sc-z-input-deprecated>z-icon.showHidePasswordIcon.sc-z-input-deprecated{cursor:pointer}.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated:-webkit-autofill,.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated:-webkit-autofill:hover,.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated:-webkit-autofill:focus,.textWrapper.sc-z-input-deprecated>div.sc-z-input-deprecated>input.sc-z-input-deprecated:-webkit-autofill:active{-webkit-background-clip:text !important}.textareaWrapper.sc-z-input-deprecated{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input-deprecated::-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-deprecated::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input-deprecated::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input-deprecated::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input-deprecated{min-height:132px;width:100%;margin:0;padding:0;border:none;resize:none}.radioWrapper.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated{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-deprecated:hover,.checkboxWrapper.sc-z-input-deprecated:hover{color:var(--color-hover-primary);fill:currentColor}.radioWrapper.sc-z-input-deprecated>input.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated>input.sc-z-input-deprecated{position:absolute;opacity:0;z-index:-1;pointer-events:none}.radioWrapper.sc-z-input-deprecated .radioLabel.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated .checkboxLabel.sc-z-input-deprecated{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-deprecated input.sc-z-input-deprecated:not(:disabled)+.radioLabel.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated input.sc-z-input-deprecated:not(:disabled)+.checkboxLabel.sc-z-input-deprecated{cursor:pointer}.radioWrapper.sc-z-input-deprecated .radioLabel.sc-z-input-deprecated z-icon.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated .checkboxLabel.sc-z-input-deprecated z-icon.sc-z-input-deprecated{fill:inherit;cursor:pointer}.radioWrapper.sc-z-input-deprecated .radioLabel.after.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated .checkboxLabel.after.sc-z-input-deprecated{flex-direction:row}.radioWrapper.sc-z-input-deprecated .radioLabel.before.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated .checkboxLabel.before.sc-z-input-deprecated{flex-direction:row-reverse}.radioWrapper.sc-z-input-deprecated .radioLabel.after.sc-z-input-deprecated>span.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated .checkboxLabel.after.sc-z-input-deprecated>span.sc-z-input-deprecated{margin-left:var(--space-unit)}.radioWrapper.sc-z-input-deprecated .radioLabel.before.sc-z-input-deprecated>span.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated .checkboxLabel.before.sc-z-input-deprecated>span.sc-z-input-deprecated{margin-right:var(--space-unit)}.radioWrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:focus:focus-visible+.radioLabel.sc-z-input-deprecated>z-icon.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:focus:focus-visible+.checkboxLabel.sc-z-input-deprecated>z-icon.sc-z-input-deprecated{box-shadow:var(--shadow-focus-primary);border-radius:var(--border-radius-small)}.radioWrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:disabled+.radioLabel.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:disabled+.checkboxLabel.sc-z-input-deprecated{color:var(--color-disabled02)}.radioWrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:disabled+.radioLabel.sc-z-input-deprecated>z-icon.sc-z-input-deprecated,.checkboxWrapper.sc-z-input-deprecated>input.sc-z-input-deprecated:disabled+.checkboxLabel.sc-z-input-deprecated>z-icon.sc-z-input-deprecated{fill:var(--color-disabled01);cursor:default}";
+
+const ZInputDeprecated = 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);
+    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;
+    /** the input is required (optional): available for text, password, number, email, textarea, checkbox */
+    this.required = false;
+    /** checked: available for checkbox, radio */
+    this.checked = false;
+    /** show input helper message (optional): available for text, password, number, email, textarea, select */
+    this.hasmessage = true;
+    /** the input label position: available for checkbox, radio */
+    this.labelafter = true;
+    /** timeout setting before trigger `inputChange` event (optional): available for text, textarea */
+    this.typingtimeout = 300;
+    /** multiple options can be selected (optional): available for select */
+    this.multiple = false;
+    /** render clear icon when typing (optional): available for text */
+    this.hasclearicon = true;
+    this.isTyping = false;
+    this.textareaWrapperHover = "";
+    this.textareaWrapperFocus = "";
+    this.passwordHidden = true;
+  }
+  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 the input value */
+  async getValue() {
+    switch (this.type) {
+      // @ts-ignore
+      case "select":
+        return this.selectElem.getValue();
+      default:
+        return this.value;
+    }
+  }
+  /** set the input value */
+  async setValue(value) {
+    switch (this.type) {
+      // @ts-ignore
+      case "select":
+        this.selectElem.setValue(value);
+        break;
+      default:
+        if (typeof value === "string")
+          this.value = value;
+        break;
+    }
+  }
+  /** get checked status */
+  async isChecked() {
+    switch (this.type) {
+      case index$1.InputTypeEnum.checkbox:
+      case index$1.InputTypeEnum.radio:
+        return this.checked;
+      default:
+        return false;
+    }
+  }
+  emitInputChange(value, keycode) {
+    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, keycode, 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() {
+    const attr = {
+      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"}`,
+        this.isTyping && "istyping",
+        !this.isTyping && this.value && "filled",
+      ]
+        .filter(Boolean)
+        .join(" "),
+      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 += " hasIcon";
+    }
+    if (this.hasclearicon) {
+      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()));
+  }
+  renderLabel() {
+    if (!this.label)
+      return;
+    return (index.h("z-input-label", { htmlfor: this.htmlid, value: this.label, disabled: this.disabled, "aria-label": this.label, id: `${this.htmlid}_label` }));
+  }
+  renderIcons() {
+    return (index.h("span", { class: {
+        iconsWrapper: true,
+        disabled: this.disabled,
+      } }, this.renderResetIcon(), this.renderIcon()));
+  }
+  renderIcon() {
+    if (this.type === index$1.InputTypeEnum.password) {
+      return this.renderShowHidePassword();
+    }
+    if (!this.icon)
+      return;
+    return index.h("z-icon", { class: "inputIcon", name: this.icon });
+  }
+  renderResetIcon() {
+    if (!this.hasclearicon || !this.value || this.disabled || this.readonly)
+      return;
+    return (index.h("z-icon", { class: "resetIcon", name: "multiply", onClick: (e) => this.emitInputChange("", e.keyCode) }));
+  }
+  renderShowHidePassword() {
+    return (index.h("z-icon", { class: "showHidePasswordIcon", name: this.passwordHidden ? "view-filled" : "view-off-filled", onClick: () => (this.passwordHidden = !this.passwordHidden) }));
+  }
+  renderMessage() {
+    if (!this.hasmessage)
+      return;
+    return index.h("z-input-message", { message: 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: [
+        "textareaWrapper",
+        attributes.class,
+        attributes.disabled && "disabled",
+        attributes.readonly && "readonly",
+        this.isTyping && "istyping",
+        this.textareaWrapperFocus,
+        this.textareaWrapperHover,
+      ]
+        .filter(Boolean)
+        .join(" ") }, index.h("textarea", Object.assign({}, attributes, { onFocus: () => (this.textareaWrapperFocus = "focus"), onBlur: () => (this.textareaWrapperFocus = ""), onMouseOver: () => (this.textareaWrapperHover = "hover"), onMouseOut: () => (this.textareaWrapperHover = ""), "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.labelafter,
+        before: !this.labelafter,
+      } }, 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.labelafter,
+        before: !this.labelafter,
+      } }, 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, "aria-label": this.ariaLabel, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, htmltitle: this.htmltitle, status: this.status, message: !this.hasmessage ? false : this.message, autocomplete: this.autocomplete, 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();
+      // @ts-ignore
+      case "select":
+        return this.renderSelect();
+      default:
+        return this.renderInputText();
+    }
+  }
+  get hostElement() { return index.getElement(this); }
+};
+ZInputDeprecated.style = stylesCss;
+
+exports.z_input_deprecated = ZInputDeprecated;

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;