npm - @zanichelli/albe-web-components - Versions diffs - 5.5.6-cs1 → 5.6.0 - Mend

@zanichelli/albe-web-components 5.5.6-cs1 → 5.6.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 (867) 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 { InputTypeEnum, LabelPositions, } 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 = LabelPositions.right;
     /** render clear icon when typing (optional): available for text */
     this.hasclearicon = true;
     this.isTyping = false;
@@ -26,18 +26,21 @@ 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 InputTypeEnum.radio:
+        if (data.type === InputTypeEnum.radio &&
+          data.name === this.name &&
+          data.id !== this.htmlid) {
           this.checked = false;
         }
-        break;
+      default:
+        return;
     }
   }
   /** get checked status */
   async isChecked() {
     switch (this.type) {
-      case InputTypeEnum.CHECKBOX:
-      case InputTypeEnum.RADIO:
+      case InputTypeEnum.checkbox:
+      case InputTypeEnum.radio:
         return this.checked;
       default:
         console.warn("`isChecked` method is only available for type `checkbox` and `radio`");
@@ -45,11 +48,10 @@ 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 === InputTypeEnum.textarea) {
       validity = this.getValidity("textarea");
     }
     else {
@@ -99,7 +101,7 @@ export class ZInput {
       required: this.required,
       title: this.htmltitle,
       class: {
-        [`input-${this.status}`]: !!this.status,
+        [`input_${this.status || "default"}`]: true,
         filled: !!this.value,
       },
       autocomplete: this.autocomplete,
@@ -107,9 +109,8 @@ export class ZInput {
     };
   }
   getNumberAttributes(type) {
-    if (type != InputTypeEnum.NUMBER) {
+    if (type != InputTypeEnum.number)
       return;
-    }
     return {
       min: this.min,
       max: this.max,
@@ -117,66 +118,67 @@ 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 != InputTypeEnum.password &&
+      type != InputTypeEnum.text &&
+      type != InputTypeEnum.tel &&
+      type != InputTypeEnum.search &&
+      type != InputTypeEnum.url &&
+      type != InputTypeEnum.email)
       return;
-    }
     return {
       pattern: this.pattern,
     };
   }
-  renderInputText(type = InputTypeEnum.TEXT) {
+  renderInputText(type = InputTypeEnum.text) {
     const attr = Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type));
-    if (this.icon || type === InputTypeEnum.PASSWORD) {
-      Object.assign(attr.class, { "has-icon": true });
+    if (this.icon || type === InputTypeEnum.password) {
+      attr.class = Object.assign(Object.assign({}, attr.class), { hasIcon: true });
     }
-    if (this.hasclearicon && type != InputTypeEnum.NUMBER) {
-      Object.assign(attr.class, { "has-clear-icon": true });
+    if (this.hasclearicon && type != InputTypeEnum.number) {
+      attr.class = Object.assign(Object.assign({}, attr.class), { hasClearIcon: true });
     }
-    return (h("div", { class: "text-wrapper" }, 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: "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()));
   }
   renderLabel() {
-    if (!this.label) {
+    if (!this.label)
       return;
-    }
-    return (h("label", { class: "input-label body-5-sb", id: `${this.htmlid}_label`, htmlFor: this.htmlid, "aria-label": this.label }, this.label));
+    return (h("label", { class: "inputLabel body-5-sb", id: `${this.htmlid}_label`, htmlFor: this.htmlid, "aria-label": this.label }, this.label));
   }
   renderIcons() {
-    return (h("span", { class: "icons-wrapper" }, this.renderResetIcon(), this.renderIcon()));
+    return (h("span", { class: "iconsWrapper" }, this.renderResetIcon(), this.renderIcon()));
   }
   renderIcon() {
-    if (this.type === InputTypeEnum.PASSWORD) {
+    if (this.type === InputTypeEnum.password) {
       return this.renderShowHidePassword();
     }
-    if (!this.icon) {
+    if (!this.icon)
       return;
-    }
-    return (h("button", { type: "button", class: "icon-button input-icon", tabIndex: -1 }, h("z-icon", { name: this.icon })));
+    return (h("button", { type: "button", class: "iconButton inputIcon", 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 == InputTypeEnum.number)
       return;
-    }
-    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" })));
+    return (h("button", { type: "button", class: "iconButton resetIcon", "aria-label": "cancella il contenuto dell'input", onClick: () => this.emitInputChange("") }, h("z-icon", { name: "multiply" })));
   }
   renderShowHidePassword() {
-    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" })));
+    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" })));
   }
   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: "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()));
+    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()));
   }
   /* END textarea */
   handleCheck(ev) {
@@ -185,29 +187,29 @@ export class ZInput {
   }
   /* START checkbox */
   renderCheckbox() {
-    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 === LabelPositions.RIGHT,
-        "before": this.labelPosition === LabelPositions.LEFT,
+    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,
       } }, 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: "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 === LabelPositions.RIGHT,
-        "before": this.labelPosition === LabelPositions.LEFT,
+    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,
       } }, 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 InputTypeEnum.textarea:
         return this.renderTextarea();
-      case InputTypeEnum.CHECKBOX:
+      case InputTypeEnum.checkbox:
         return this.renderCheckbox();
-      case InputTypeEnum.RADIO:
+      case InputTypeEnum.radio:
         return this.renderRadio();
       default:
         return this.renderInputText(this.type);
@@ -249,10 +251,10 @@ export class ZInput {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "InputTypeEnum",
-          "resolved": "InputTypeEnum.CHECKBOX | InputTypeEnum.EMAIL | InputTypeEnum.NUMBER | InputTypeEnum.PASSWORD | InputTypeEnum.RADIO | InputTypeEnum.SEARCH | InputTypeEnum.TEL | InputTypeEnum.TEXT | InputTypeEnum.TEXTAREA | InputTypeEnum.URL",
+          "original": "InputTypeBean",
+          "resolved": "\"checkbox\" | \"email\" | \"number\" | \"password\" | \"radio\" | \"search\" | \"tel\" | \"text\" | \"textarea\" | \"url\"",
           "references": {
-            "InputTypeEnum": {
+            "InputTypeBean": {
               "location": "import",
               "path": "../../../beans"
             }
@@ -445,10 +447,10 @@ export class ZInput {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "InputStatusEnum",
-          "resolved": "InputStatusEnum.ERROR | InputStatusEnum.SUCCESS | InputStatusEnum.WARNING",
+          "original": "InputStatusBean",
+          "resolved": "\"error\" | \"success\" | \"warning\"",
           "references": {
-            "InputStatusEnum": {
+            "InputStatusBean": {
               "location": "import",
               "path": "../../../beans"
             }
@@ -485,9 +487,14 @@ export class ZInput {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "LabelPositions",
-          "resolved": "LabelPositions.LEFT | LabelPositions.RIGHT",
-          "references": {}
+          "original": "LabelPosition",
+          "resolved": "\"left\" | \"right\"",
+          "references": {
+            "LabelPosition": {
+              "location": "import",
+              "path": "../../../beans"
+            }
+          }
         },
         "required": false,
         "optional": true,
@@ -497,7 +504,7 @@ export class ZInput {
         },
         "attribute": "label-position",
         "reflect": false,
-        "defaultValue": "LabelPositions.RIGHT"
+        "defaultValue": "LabelPositions.right"
       },
       "autocomplete": {
         "type": "string",

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

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

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": "InputStatusEnum",
-          "resolved": "InputStatusEnum.ERROR | InputStatusEnum.SUCCESS | InputStatusEnum.WARNING",
+          "original": "InputStatusBean",
+          "resolved": "\"error\" | \"success\" | \"warning\"",
           "references": {
-            "InputStatusEnum": {
+            "InputStatusBean": {
               "location": "import",
               "path": "../../../beans"
             }