npm - @zanichelli/albe-web-components - Versions diffs - 5.6.2 → 6.0.0 - Mend

@zanichelli/albe-web-components 5.6.2 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (874) hide show

package/dist/collection/components/inputs/z-input/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { h, } from "@stencil/core";
-import { InputTypeEnum, LabelPositions, } from "../../../beans";
+import { h } from "@stencil/core";
+import { InputType, LabelPosition } from "../../../beans";
 import { boolean, randomId } from "../../../utils/utils";
 export class ZInput {
   constructor() {
@@ -16,7 +16,7 @@ export class ZInput {
     /** 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 = LabelPositions.right;
+    this.labelPosition = LabelPosition.RIGHT;
     /** render clear icon when typing (optional): available for text */
     this.hasclearicon = true;
     this.isTyping = false;
@@ -26,21 +26,18 @@ export class ZInput {
   inputCheckListener(e) {
     const data = e.detail;
     switch (this.type) {
-      case InputTypeEnum.radio:
-        if (data.type === InputTypeEnum.radio &&
-          data.name === this.name &&
-          data.id !== this.htmlid) {
+      case InputType.RADIO:
+        if (data.type === InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {
           this.checked = false;
         }
-      default:
-        return;
+        break;
     }
   }
   /** get checked status */
   async isChecked() {
     switch (this.type) {
-      case InputTypeEnum.checkbox:
-      case InputTypeEnum.radio:
+      case InputType.CHECKBOX:
+      case InputType.RADIO:
         return this.checked;
       default:
         console.warn("`isChecked` method is only available for type `checkbox` and `radio`");
@@ -48,10 +45,11 @@ export class ZInput {
     }
   }
   emitInputChange(value) {
-    if (!this.isTyping)
+    if (!this.isTyping) {
       this.emitStartTyping();
-    let validity = {};
-    if (this.type === InputTypeEnum.textarea) {
+    }
+    let validity;
+    if (this.type === InputType.TEXTAREA) {
       validity = this.getValidity("textarea");
     }
     else {
@@ -101,7 +99,7 @@ export class ZInput {
       required: this.required,
       title: this.htmltitle,
       class: {
-        [`input_${this.status || "default"}`]: true,
+        [`input-${this.status}`]: !!this.status,
         filled: !!this.value,
       },
       autocomplete: this.autocomplete,
@@ -109,8 +107,9 @@ export class ZInput {
     };
   }
   getNumberAttributes(type) {
-    if (type != InputTypeEnum.number)
+    if (type != InputType.NUMBER) {
       return;
+    }
     return {
       min: this.min,
       max: this.max,
@@ -118,67 +117,66 @@ export class ZInput {
     };
   }
   getPatternAttribute(type) {
-    if (type != InputTypeEnum.password &&
-      type != InputTypeEnum.text &&
-      type != InputTypeEnum.tel &&
-      type != InputTypeEnum.search &&
-      type != InputTypeEnum.url &&
-      type != InputTypeEnum.email)
+    if (type != InputType.PASSWORD &&
+      type != InputType.TEXT &&
+      type != InputType.TEL &&
+      type != InputType.SEARCH &&
+      type != InputType.URL &&
+      type != InputType.EMAIL) {
       return;
+    }
     return {
       pattern: this.pattern,
     };
   }
-  renderInputText(type = InputTypeEnum.text) {
+  renderInputText(type = InputType.TEXT) {
     const attr = Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type));
-    if (this.icon || type === InputTypeEnum.password) {
-      attr.class = Object.assign(Object.assign({}, attr.class), { hasIcon: true });
+    if (this.icon || type === InputType.PASSWORD) {
+      Object.assign(attr.class, { "has-icon": true });
     }
-    if (this.hasclearicon && type != InputTypeEnum.number) {
-      attr.class = Object.assign(Object.assign({}, attr.class), { hasClearIcon: true });
+    if (this.hasclearicon && type != InputType.NUMBER) {
+      Object.assign(attr.class, { "has-clear-icon": true });
     }
-    return (h("div", { class: "textWrapper" }, this.renderLabel(), h("div", null, h("input", Object.assign({ type: type === InputTypeEnum.password && !this.passwordHidden
-        ? InputTypeEnum.text
-        : type }, attr, { "aria-label": this.ariaLabel || this.label })), this.renderIcons()), this.renderMessage()));
+    return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", null, h("input", Object.assign({ type: type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type }, attr, { "aria-label": this.ariaLabel || this.label })), this.renderIcons()), this.renderMessage()));
   }
   renderLabel() {
-    if (!this.label)
+    if (!this.label) {
       return;
-    return (h("label", { class: "inputLabel body-5-sb", id: `${this.htmlid}_label`, htmlFor: this.htmlid, "aria-label": this.label }, this.label));
+    }
+    return (h("label", { class: "input-label body-5-sb", id: `${this.htmlid}_label`, htmlFor: this.htmlid, "aria-label": this.label }, this.label));
   }
   renderIcons() {
-    return (h("span", { class: "iconsWrapper" }, this.renderResetIcon(), this.renderIcon()));
+    return (h("span", { class: "icons-wrapper" }, this.renderResetIcon(), this.renderIcon()));
   }
   renderIcon() {
-    if (this.type === InputTypeEnum.password) {
+    if (this.type === InputType.PASSWORD) {
       return this.renderShowHidePassword();
     }
-    if (!this.icon)
+    if (!this.icon) {
       return;
-    return (h("button", { type: "button", class: "iconButton inputIcon", tabIndex: -1 }, h("z-icon", { name: this.icon })));
+    }
+    return (h("button", { type: "button", class: "icon-button input-icon", tabIndex: -1 }, h("z-icon", { name: this.icon })));
   }
   renderResetIcon() {
-    if (!this.hasclearicon ||
-      !this.value ||
-      this.disabled ||
-      this.readonly ||
-      this.type == InputTypeEnum.number)
+    if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {
       return;
-    return (h("button", { type: "button", class: "iconButton resetIcon", "aria-label": "cancella il contenuto dell'input", onClick: () => this.emitInputChange("") }, h("z-icon", { name: "multiply" })));
+    }
+    return (h("button", { type: "button", class: "icon-button reset-icon", "aria-label": "cancella il contenuto dell'input", onClick: () => this.emitInputChange("") }, h("z-icon", { name: "multiply" })));
   }
   renderShowHidePassword() {
-    return (h("button", { type: "button", class: "iconButton showHidePasswordIcon", disabled: this.disabled, "aria-label": this.passwordHidden ? "mostra password" : "nascondi password", onClick: () => (this.passwordHidden = !this.passwordHidden) }, h("z-icon", { name: this.passwordHidden ? "view-filled" : "view-off-filled" })));
+    return (h("button", { type: "button", class: "icon-button toggle-password-icon", disabled: this.disabled, "aria-label": this.passwordHidden ? "mostra password" : "nascondi password", onClick: () => (this.passwordHidden = !this.passwordHidden) }, h("z-icon", { name: this.passwordHidden ? "view-filled" : "view-off-filled" })));
   }
   renderMessage() {
-    if (boolean(this.message) === false)
+    if (boolean(this.message) === false) {
       return;
+    }
     return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status }));
   }
   /* END text/password/email/number */
   /* START textarea */
   renderTextarea() {
     const attributes = this.getTextAttributes();
-    return (h("div", { class: "textWrapper" }, this.renderLabel(), h("div", { class: Object.assign(Object.assign({}, attributes.class), { textareaWrapper: true, readonly: attributes.readonly }) }, h("textarea", Object.assign({}, attributes, { "aria-label": this.ariaLabel || this.label }))), this.renderMessage()));
+    return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", { class: Object.assign(Object.assign({}, attributes.class), { "textarea-wrapper": true, "readonly": attributes.readonly }) }, h("textarea", Object.assign({}, attributes, { "aria-label": this.ariaLabel || this.label }))), this.renderMessage()));
   }
   /* END textarea */
   handleCheck(ev) {
@@ -187,29 +185,29 @@ export class ZInput {
   }
   /* START checkbox */
   renderCheckbox() {
-    return (h("div", { class: "checkboxWrapper" }, 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 }), h("label", { htmlFor: this.htmlid, class: {
-        checkboxLabel: true,
-        after: this.labelPosition === LabelPositions.right,
-        before: this.labelPosition === LabelPositions.left,
+    return (h("div", { class: "checkbox-wrapper" }, 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 }), h("label", { htmlFor: this.htmlid, class: {
+        "checkbox-label": true,
+        "after": this.labelPosition === LabelPosition.RIGHT,
+        "before": this.labelPosition === LabelPosition.LEFT,
       } }, h("z-icon", { name: this.checked ? "checkbox-checked" : "checkbox", "aria-hidden": "true" }), this.label && h("span", { innerHTML: this.label }))));
   }
   /* END checkbox */
   /* START radio */
   renderRadio() {
-    return (h("div", { class: "radioWrapper" }, 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 }), h("label", { htmlFor: this.htmlid, class: {
-        radioLabel: true,
-        after: this.labelPosition === LabelPositions.right,
-        before: this.labelPosition === LabelPositions.left,
+    return (h("div", { class: "radio-wrapper" }, 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 }), h("label", { htmlFor: this.htmlid, class: {
+        "radio-label": true,
+        "after": this.labelPosition === LabelPosition.RIGHT,
+        "before": this.labelPosition === LabelPosition.LEFT,
       } }, h("z-icon", { name: this.checked ? "radio-button-checked" : "radio-button", "aria-hidden": "true" }), this.label && h("span", { innerHTML: this.label }))));
   }
   /* END radio */
   render() {
     switch (this.type) {
-      case InputTypeEnum.textarea:
+      case InputType.TEXTAREA:
         return this.renderTextarea();
-      case InputTypeEnum.checkbox:
+      case InputType.CHECKBOX:
         return this.renderCheckbox();
-      case InputTypeEnum.radio:
+      case InputType.RADIO:
         return this.renderRadio();
       default:
         return this.renderInputText(this.type);
@@ -251,10 +249,10 @@ export class ZInput {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "InputTypeBean",
-          "resolved": "\"checkbox\" | \"email\" | \"number\" | \"password\" | \"radio\" | \"search\" | \"tel\" | \"text\" | \"textarea\" | \"url\"",
+          "original": "InputType",
+          "resolved": "InputType.CHECKBOX | InputType.EMAIL | InputType.NUMBER | InputType.PASSWORD | InputType.RADIO | InputType.SEARCH | InputType.TEL | InputType.TEXT | InputType.TEXTAREA | InputType.URL",
           "references": {
-            "InputTypeBean": {
+            "InputType": {
               "location": "import",
               "path": "../../../beans"
             }
@@ -447,10 +445,10 @@ export class ZInput {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "InputStatusBean",
-          "resolved": "\"error\" | \"success\" | \"warning\"",
+          "original": "InputStatus",
+          "resolved": "InputStatus.ERROR | InputStatus.SUCCESS | InputStatus.WARNING",
           "references": {
-            "InputStatusBean": {
+            "InputStatus": {
               "location": "import",
               "path": "../../../beans"
             }
@@ -488,13 +486,8 @@ export class ZInput {
         "mutable": false,
         "complexType": {
           "original": "LabelPosition",
-          "resolved": "\"left\" | \"right\"",
-          "references": {
-            "LabelPosition": {
-              "location": "import",
-              "path": "../../../beans"
-            }
-          }
+          "resolved": "LabelPosition.LEFT | LabelPosition.RIGHT",
+          "references": {}
         },
         "required": false,
         "optional": true,
@@ -504,7 +497,7 @@ export class ZInput {
         },
         "attribute": "label-position",
         "reflect": false,
-        "defaultValue": "LabelPositions.right"
+        "defaultValue": "LabelPosition.RIGHT"
       },
       "autocomplete": {
         "type": "string",

package/dist/collection/components/inputs/z-input/styles.css CHANGED Viewed

@@ -16,22 +16,22 @@ input::-ms-reveal {
 input,
 textarea,
-.textareaWrapper {
+.textarea-wrapper {
+  box-sizing: border-box;
+  border: var(--border-size-small) solid var(--color-surface04);
   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);
+  font-weight: var(--font-rg);
   outline: none;
 }
 /* FOCUS */
 input:focus:focus-visible,
-.textareaWrapper:focus-within {
+.textarea-wrapper:focus-within {
   box-shadow: var(--shadow-focus-primary);
 }
@@ -46,27 +46,27 @@ textarea:focus:focus-visible {
 }
 /* STATUSES (success, warning, error) */
-.input_success {
-  background: var(--color-success-inverse);
+.input-success {
   border-color: var(--color-success01);
+  background: var(--color-success-inverse);
   fill: var(--color-success01);
 }
-.input_error {
-  background: var(--color-error-inverse);
+.input-error {
   border-color: var(--color-error01);
+  background: var(--color-error-inverse);
   fill: var(--color-error01);
 }
-.input_warning {
-  background: var(--color-warning-inverse);
+.input-warning {
   border-color: var(--color-warning01);
+  background: var(--color-warning-inverse);
   fill: var(--color-warning01);
 }
 /* HOVER */
 input:hover,
-.textareaWrapper:hover {
+.textarea-wrapper:hover {
   outline: var(--border-size-medium) solid var(--color-surface04);
   outline-offset: -2px;
 }
@@ -81,13 +81,13 @@ input[readonly],
 /* DISABLED */
 :host([disabled]:not([disabled="false"])) input,
-:host([disabled]:not([disabled="false"])) .textareaWrapper,
+:host([disabled]:not([disabled="false"])) .textarea-wrapper,
 :host([disabled]:not([disabled="false"])) z-icon {
   border-color: var(--color-disabled01);
+  box-shadow: none;
   color: var(--color-disabled02);
   fill: var(--color-disabled01);
   pointer-events: none;
-  box-shadow: none;
 }
 :host([disabled]:not([disabled="false"])) input:hover {
@@ -100,95 +100,90 @@ textarea::placeholder {
   color: var(--color-text05);
 }
-::-webkit-input-placeholder,
 ::-webkit-textarea-placeholder {
   color: var(--color-text05);
 }
-:-ms-input-placeholder,
 :-ms-textarea-placeholder {
   color: var(--color-text05);
 }
-::-moz-placeholder {
+::placeholder {
   color: var(--color-text05);
 }
-:-moz-placeholder {
+:placeholder {
   color: var(--color-text05);
 }
 /* LABEL */
-label.inputLabel {
+label.input-label {
   display: block;
   padding-bottom: var(--space-unit);
   color: var(--color-text02);
   font-family: var(--font-family-sans);
   font-size: var(--font-size-1);
   font-weight: var(--font-sb);
-  text-transform: uppercase;
   text-align: left;
+  text-transform: uppercase;
 }
-:host([disabled]:not([disabled="false"])) label.inputLabel {
+:host([disabled]:not([disabled="false"])) label.input-label {
   color: var(--color-disabled02);
 }
-.textWrapper > div {
+.text-wrapper > div {
+  position: relative;
+  z-index: 1;
   fill: var(--color-icon02);
 }
-.textWrapper > div > input {
+.text-wrapper > div > input {
   width: 100%;
   height: calc(var(--space-unit) * 5.5);
-  margin: 0;
-  padding: 0 calc(var(--space-unit) * 1.5);
   box-sizing: border-box;
+  padding: 0 calc(var(--space-unit) * 1.5);
+  margin: 0;
 }
-.textWrapper > div > input.hasIcon,
-.textWrapper > div > input.hasClearIcon {
+.text-wrapper > div > input.has-icon,
+.text-wrapper > div > input.has-clear-icon {
   padding-right: calc(var(--space-unit) * 5.25);
 }
-.textWrapper > div > input.hasIcon.hasClearIcon {
+.text-wrapper > div > input.has-icon.has-clear-icon {
   padding-right: calc(var(--space-unit) * 8);
 }
-.textWrapper > div {
-  position: relative;
-  z-index: 1;
-}
-.textWrapper .iconsWrapper {
+.text-wrapper .icons-wrapper {
   position: absolute;
-  right: calc(var(--space-unit) * 1.5);
+  z-index: 2;
   top: 50%;
-  transform: translateY(-50%);
+  right: calc(var(--space-unit) * 1.5);
   display: flex;
-  z-index: 2;
   pointer-events: none;
+  transform: translateY(-50%);
 }
-.textWrapper .iconsWrapper > button.iconButton {
+.text-wrapper .icons-wrapper > button.icon-button {
+  padding: 0;
+  border: 0;
   background: none;
   color: inherit;
-  border: 0;
-  padding: 0;
   font: inherit;
   pointer-events: initial;
 }
-.textWrapper .iconsWrapper > button.iconButton + button.iconButton {
+.text-wrapper .icons-wrapper > button.icon-button + button.icon-button {
   margin-left: calc(var(--space-unit) * 0.5);
 }
-.textWrapper .iconsWrapper > button.iconButton.resetIcon,
-.textWrapper .iconsWrapper > button.iconButton.showHidePasswordIcon {
+.text-wrapper .icons-wrapper > button.icon-button.reset-icon,
+.text-wrapper .icons-wrapper > button.icon-button.toggle-password-icon {
   cursor: pointer;
 }
-.textWrapper .iconsWrapper > button.iconButton > z-icon {
+.text-wrapper .icons-wrapper > button.icon-button > z-icon {
   --z-icon-width: 18px;
   --z-icon-height: 18px;
@@ -196,14 +191,14 @@ label.inputLabel {
 }
 /* Disable background color webkit */
-.textWrapper > div > input:-webkit-autofill,
-.textWrapper > div > input:-webkit-autofill:hover,
-.textWrapper > div > input:-webkit-autofill:focus,
-.textWrapper > div > input:-webkit-autofill:active {
-  -webkit-background-clip: text !important;
+.text-wrapper > div > input:-webkit-autofill,
+.text-wrapper > div > input:-webkit-autofill:hover,
+.text-wrapper > div > input:-webkit-autofill:focus,
+.text-wrapper > div > input:-webkit-autofill:active {
+  background-clip: text !important;
 }
-.textareaWrapper {
+.textarea-wrapper {
   padding: calc(var(--space-unit) * 1.5);
   /* Firefox scrollbar */
@@ -211,13 +206,8 @@ label.inputLabel {
 }
 textarea::-webkit-scrollbar {
-  background: linear-gradient(
-    to right,
-    transparent 0 3px,
-    var(--gray200) 3px 7px,
-    transparent 7px 10px
-  );
   width: 10px;
+  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
   border-radius: var(--border-radius);
 }
@@ -236,99 +226,99 @@ textarea::-webkit-scrollbar-thumb:hover {
 }
 textarea {
-  min-height: 132px;
   width: 100%;
-  margin: 0;
+  min-height: 132px;
   padding: 0;
   border: none;
+  margin: 0;
   resize: none;
 }
-.radioWrapper,
-.checkboxWrapper {
+.radio-wrapper,
+.checkbox-wrapper {
+  position: relative;
   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);
+  font-family: var(--font-family-sans);
 }
-.radioWrapper:hover,
-.checkboxWrapper:hover {
+.radio-wrapper:hover,
+.checkbox-wrapper:hover {
   color: var(--color-hover-primary);
-  fill: currentColor;
+  fill: currentcolor;
 }
-.radioWrapper > input,
-.checkboxWrapper > input {
+.radio-wrapper > input,
+.checkbox-wrapper > input {
   position: absolute;
-  opacity: 0;
   z-index: -1;
+  opacity: 0;
   pointer-events: none;
 }
-.radioWrapper .radioLabel,
-.checkboxWrapper .checkboxLabel {
+.radio-wrapper .radio-label,
+.checkbox-wrapper .checkbox-label {
   display: inline-flex;
   align-items: center;
   margin: 0;
-  line-height: 1;
   color: inherit;
   font-family: inherit;
-  font-weight: inherit;
   font-size: inherit;
+  font-weight: inherit;
+  line-height: 1;
   text-transform: inherit;
 }
-.radioWrapper input:not(:disabled) + .radioLabel,
-.checkboxWrapper input:not(:disabled) + .checkboxLabel {
+.radio-wrapper input:not(:disabled) + .radio-label,
+.checkbox-wrapper input:not(:disabled) + .checkbox-label {
   cursor: pointer;
 }
-.radioWrapper .radioLabel z-icon,
-.checkboxWrapper .checkboxLabel z-icon {
-  fill: inherit;
+.radio-wrapper .radio-label z-icon,
+.checkbox-wrapper .checkbox-label z-icon {
   cursor: pointer;
+  fill: inherit;
 }
-.radioWrapper .radioLabel.after,
-.checkboxWrapper .checkboxLabel.after {
+.radio-wrapper .radio-label.after,
+.checkbox-wrapper .checkbox-label.after {
   flex-direction: row;
 }
-.radioWrapper .radioLabel.before,
-.checkboxWrapper .checkboxLabel.before {
+.radio-wrapper .radio-label.before,
+.checkbox-wrapper .checkbox-label.before {
   flex-direction: row-reverse;
 }
-.radioWrapper .radioLabel.after > span,
-.checkboxWrapper .checkboxLabel.after > span {
+.radio-wrapper .radio-label.after > span,
+.checkbox-wrapper .checkbox-label.after > span {
   margin-left: var(--space-unit);
 }
-.radioWrapper .radioLabel.before > span,
-.checkboxWrapper .checkboxLabel.before > span {
+.radio-wrapper .radio-label.before > span,
+.checkbox-wrapper .checkbox-label.before > span {
   margin-right: var(--space-unit);
 }
 /* focus */
-.radioWrapper > input:focus:focus-visible + .radioLabel > z-icon,
-.checkboxWrapper > input:focus:focus-visible + .checkboxLabel > z-icon {
-  box-shadow: var(--shadow-focus-primary);
+.radio-wrapper > input:focus:focus-visible + .radio-label > z-icon,
+.checkbox-wrapper > input:focus:focus-visible + .checkbox-label > z-icon {
   border-radius: var(--border-radius-small);
+  box-shadow: var(--shadow-focus-primary);
 }
 /* disabled */
-.radioWrapper > input:disabled + .radioLabel,
-.checkboxWrapper > input:disabled + .checkboxLabel {
+.radio-wrapper > input:disabled + .radio-label,
+.checkbox-wrapper > input:disabled + .checkbox-label {
   color: var(--color-disabled02);
 }
-.radioWrapper > input:disabled + .radioLabel > z-icon,
-.checkboxWrapper > input:disabled + .checkboxLabel > z-icon {
-  fill: var(--color-disabled01);
+.radio-wrapper > input:disabled + .radio-label > z-icon,
+.checkbox-wrapper > input:disabled + .checkbox-label > z-icon {
   cursor: default;
+  fill: var(--color-disabled01);
 }

package/dist/collection/components/inputs/z-input-message/index.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class ZInputMessage {
     };
   }
   render() {
-    return (h(Host, { role: "alert", "aria-label": this.message, tabindex: this.message ? 0 : -1 }, this.statusIcons[this.status] && this.message && (h("z-icon", { name: this.statusIcons[this.status] })), h("span", { innerHTML: this.message })));
+    return (h(Host, { role: "alert", "aria-label": this.message, tabindex: this.message ? 0 : -1 }, this.statusIcons[this.status] && this.message && h("z-icon", { name: this.statusIcons[this.status] }), h("span", { innerHTML: this.message })));
   }
   static get is() { return "z-input-message"; }
   static get encapsulation() { return "shadow"; }
@@ -45,10 +45,10 @@ export class ZInputMessage {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "InputStatusBean",
-          "resolved": "\"error\" | \"success\" | \"warning\"",
+          "original": "InputStatus",
+          "resolved": "InputStatus.ERROR | InputStatus.SUCCESS | InputStatus.WARNING",
           "references": {
-            "InputStatusBean": {
+            "InputStatus": {
               "location": "import",
               "path": "../../../beans"
             }