@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-73981.0 → 0.0.0-bugfix-dev-KB-76362.0

package/dist/collection/components/ez-split-button/ez-split-button.css

@@ -21,7 +21,7 @@
     --ez-split-button__right-button--padding-left: 8px;
     /* general */
     /*@doc Define a cor do label.*/
-    --ez-split-button--color: var(--title--primary, #FFF);
+    --ez-split-button--color: var(--title--primary, #2B3A54);
     /*@doc Define o tamanho do label.*/
     --ez-split-button--font-size: var(--text--small, 12px);
     /*@doc Define a família da fonte do label.*/
@@ -29,17 +29,17 @@
     /*@doc Define o peso da fonte do label.*/
     --ez-split-button--font-weight: var(--text-weight--large);
     /*@doc Define a cor de fundo do botão.*/
-    --ez-split-button--background-color: var(--background--medium, #008561);
+    --ez-split-button--background-color: var(--background--light, #ffffff);
     /*@doc Define o raio da borda do botão.*/
-    --ez-split-button--border-radius: var(--border--radius-large, 12px);
+    --ez-split-button--border-radius: var(--border--radius-large, 24px);
     /*@doc Define o estilo da borda do botão.*/
-    --ez-split-button--border: none;
+    --ez-split-button--border: 1px solid var(--color--strokes);
     /*@doc Define o alinhamento horizontal do conteúdo do botão.*/
     --ez-split-button--justify-content: center;
     /*@doc Define a cor do texto e do ícone quando o cursor está sobre o botão.*/
-    --ez-split-button--hover-color: var(--color--primary-600);
+    --ez-split-button--hover-color: var(--color--primary-600, #007a5a);
     /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
-    --ez-split-button--hover--background-color: var(--background--medium, var(--ez-split-button--background-color));
+    --ez-split-button--hover--background-color: var(--background--light, #ffffff);
     /*@doc Define a cor do texto quando o botão está desabilitado.*/
     --ez-split-button--disabled-color: var(--text--disable);
     /*@doc Define a cor de fundo quando o botão está desabilitado.*/
@@ -81,7 +81,7 @@
     background-color: var(--ez-split-button--background-color);
     color: var(--ez-split-button--color);
     fill: var(--ez-split-button--color);
-    border: var(--ez-split-button--border);
+    border: none;
     justify-content: var(--ez-split-button--justify-content);
   }
 
@@ -97,11 +97,28 @@
     fill: var(--ez-split-button--active-color);
     --ez-icon--color: var(--ez-split-button--active-color);
   }
+  .ez-split-button__left-button{
+    border: var(--ez-split-button--border);
+    border-right: none;
+  }
+  .ez-split-button__right-button{
+    border: var(--ez-split-button--border);
+    border-left: none;
+  }
 
-  .ez-split-button__left-button:focus,
+  .ez-split-button__left-button:focus{
+    box-shadow: 
+    0 0 0 2px var(--color--primary-300), /* right */
+    0 2px 0 0 var(--color--primary-300), /* bottom */
+    0 -2px 0 0 var(--color--primary-300); /* top */
+
+  }
   .ez-split-button__right-button:focus {
-    outline: var(--ez-split-button--focus--border);
-    box-shadow: var(--ez-split-button--focus--box-shadow);
+  box-shadow: 
+    2px 0 0 0 var(--color--primary-300), /* right */
+    0 2px 0 0 var(--color--primary-300), /* bottom */
+    0 -2px 0 0 var(--color--primary-300); /* top */
+
   }
 
   .ez-split-button__left-button:hover,
@@ -113,6 +130,16 @@
     --ez-icon--color: var(--ez-split-button--hover-color);
   }
 
+  .ez-split-button__left-button:active,
+  .ez-split-button__right-button:active {
+    outline: none;
+    box-shadow: none;
+    background-color: var(--ez-split-button--active--background-color);
+    color: var(--ez-split-button--active-color);
+    fill: var(--ez-split-button--active-color);
+    --ez-icon--color: var(--ez-split-button--active-color);
+  }
+
   .ez-split-button__left-button:disabled,
   .ez-split-button__left-button:disabled label,
   .ez-split-button__right-button:disabled{
@@ -123,7 +150,15 @@
     --ez-icon--color: var(--ez-split-button--disabled-color);
     cursor: not-allowed;
   }
-
+  .ez-split-button__left-button:disabled{
+    border: var(--ez-split-button--disabled-border);
+    border-right: none;
+  }
+  .ez-split-button__right-button:disabled{
+    border: var(--ez-split-button--disabled-border);
+    border-left: none;
+  }
+  
   button.large {
     height: var(--ez-split-button__large--height);
   }
@@ -161,6 +196,7 @@
     border-bottom-right-radius: var(--ez-split-button--border-radius);
     border-top-left-radius: 0;
     border-bottom-left-radius:0;
+    border-right: var(--ez-split-button--border);
   }
   
   .ez-split-button__right-button--medium {

package/dist/collection/components/ez-text-area/ez-text-area.css

@@ -13,24 +13,25 @@
   /*@doc Define o peso da fonte do label do componente.*/
   --text-area--font-weight: var(--text-weight--medium, 400);
   /*@doc Define a cor da fonte do input e label do componente.*/
-  --text-area--color: var(--title--primary, #000);
+  --text-area--color: var(--title--primary, #2B3A54);
 
   /* input */
   /*@doc Define a cor de fundo do input.*/
-  --text-area__input--background-color: var(--background--medium, #e0e0e0);
+  --text-area__input--background-color: var(--background--light, #FFFFFF);
   /*@doc Define o estilo da borda do input.*/
   --text-area__input--border: var(--border--medium, 2px solid);
   /*@doc Define a cor da borda do input.*/
-  --text-area__input--border-color: var(--text-area__input--background-color);
-  /*no modo normal usamos a borda com a mesma cor do bg*/
+  --text-area__input--border-color: var(--color--strokes,#DCE0E8);
   /*@doc Define a cor da borda do input quando focado.*/
   --text-area__input--focus--border-color: var(--color--primary, #008561);
   /*@doc Define a cor de fundo do input quando desabilitado.*/
-  --text-area__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
+  --text-area__input--disabled--background-color: var(--background--medium, #F0F3F7);
   /*@doc Define a cor do texto do input.*/
-  --text-area__input--disabled--color: var(--text--disable, #AFB6C0);
+  --text-area__input--disabled--color: var(--text--primary, #626E82);
+  /*@doc Define a borda do texto do input quando desabilitado.*/
+  --text-area__input--disabled--border--color: var(--color--strokes,#DCE0E8);
   /*@doc Define a cor da borda do input quando com erro.*/
-  --text-area__input--error--border-color: #CC2936;
+  --text-area__input--error--border-color: var(--color-alert--error-800,#BD0025);
 
   /* message box */
   /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
@@ -38,7 +39,7 @@
   /*@doc Define a cor da fonte da mensagem quando info.*/
   --text-area__message_box--info--color: var(--color--success, #22085d);
   /*@doc Define a cor da fonte da mensagem quando erro.*/
-  --text-area__message_box--error--color: var(--color--error, #FF0000);
+  --text-area__message_box--error--color: var(--color-alert--error-800,#BD0025);
 
   /* label */
   /*@doc Define o posicionamento do label.*/
@@ -87,6 +88,8 @@ textarea:disabled {
   /*public*/
   background-color: transparent;
   color: var(--text-area__input--disabled--color);
+  border: var(--text-area__input--disabled--border);
+  cursor: not-allowed;
 }
 
 .textarea {
@@ -102,6 +105,13 @@ textarea:disabled {
   border-color: var(--text-area__input--border-color);
   background-color: var(--text-area__input--background-color);
 }
+.textarea--disabled{
+  border-radius: var(--text-area--border-radius);
+  border: var(--text-area__input--border);
+  border-color: var(--text-area__input--disabled--border--color);
+  background-color: var(--text-area__input--disabled--background-color);
+  cursor: not-allowed;
+}
 
 .textarea--resizable {
   resize: both;
@@ -169,6 +179,7 @@ textarea:disabled {
 
 .textarea__label--disabled {
   color: var(--text-area__input--disabled--color);
+  cursor: not-allowed;
 }
 
 .textarea--slim {
@@ -216,27 +227,12 @@ textarea:disabled {
   color: var(--text-area--color);
 }
 
-.textarea--slim:disabled::-webkit-input-placeholder { /* WebKit browsers */
-  /*public*/
-  color: var(--text-area__input--disabled--color);
-}
-
-.textarea--slim:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-  /*public*/
-  color: var(--text-area__input--disabled--color);
-}
-
-.textarea--slim:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
-  /*public*/
-  color: var(--text-area__input--disabled--color);
-}
-
-.textarea--slim:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
-  /*public*/
-  color: var(--text-area__input--disabled--color);
-}
-
+.textarea--slim:disabled::-webkit-input-placeholder, /* WebKit browsers */
+.textarea--slim:disabled:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
+.textarea--slim:disabled::-moz-placeholder, /* Mozilla Firefox 19+ */
+.textarea--slim:disabled:-ms-input-placeholder, /* Internet Explorer 10+ */
 .textarea--slim:disabled::placeholder {
   /*public*/
   color: var(--text-area__input--disabled--color);
+  cursor: not-allowed
 }

package/dist/collection/components/ez-text-area/ez-text-area.js

@@ -149,7 +149,7 @@ export class EzTextArea {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
-    return (h(Host, null, h("div", { class: "textarea", ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
+    return (h(Host, null, h("div", { class: `textarea ${this.enabled ? "" : "textarea--disabled"}`, ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
       h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "textarea__label" : "textarea__label textarea__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
       : null, h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo("input"), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: {
         "textarea--slim": this.mode === "slim",

package/dist/collection/components/ez-text-input/ez-text-input.css

@@ -6,6 +6,8 @@
   --ez-text-input--width: 100%;
   /*@doc Define a largura do slot que contém o ícone.*/
   --ez-text-input__icon--width: 48px;
+  --ez-text-input__icon--left--width: var(--ez-text-input__icon--width);
+  --ez-text-input__icon--right--width: var(--ez-text-input__icon--width);
   /*@doc Define a altura do componente em modo "slim".*/
   --ez-text-input--height--slim: 32px;
 
@@ -23,20 +25,25 @@
 
   /* input */
   /*@doc Define a cor de fundo do input.*/
-  --ez-text-input__input--background-color: var(--background--medium, #e0e0e0);
+  --ez-text-input__input--background-color: var(--background--light, #ffffff);
   /*@doc Define o estilo da borda do input.*/
-  --ez-text-input__input--border: var(--border--medium, 2px solid);
+  --ez-text-input__input--border: var(--border--small, 1px solid);
   /*@doc Define a cor da borda do input.*/
-  --ez-text-input__input--border-color: var(--ez-text-input__input--background-color);
-  /*no modo normal usamos a borda com a mesma cor do bg*/
+  --ez-text-input__input--border-color: var(--color--strokes,#DCE0E8);
   /*@doc Define a cor da borda do input quando focado.*/
   --ez-text-input__input--focus--border-color: var(--color--primary, #008561);
+
+  /* input disabled */
   /*@doc Define a cor de fundo do input quando desabilitado.*/
-  --ez-text-input__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
+  --ez-text-input__input--disabled--background-color: var(--background--medium, #F0F3F7);
   /*@doc Define a cor do texto do input.*/
-  --ez-text-input__input--disabled--color: var(--text--disable, #AFB6C0);
+  --ez-text-input__input--disabled--color: var(--text--primary, #626E82);
+
+  /* input error */
   /*@doc Define a cor da borda do input quando com erro.*/
-  --ez-text-input__input--error--border-color: #CC2936;
+  --ez-text-input__input--error--border-color: var(--color-alert--error-800,#BD0025);
+
+  
   /*@doc Define a cor do input quando não possuir borda*/
   --ez-text-input__input--noborder-color: white;
   /*@doc Define o padding do input*/
@@ -44,11 +51,11 @@
 
   /* message box */
   /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
-  --ez-text-input__message_box--font-size: var(--text--small, 12px);
+  --ez-text-input__message_box--font-size: var(--text--extra-small, 10px);
   /*@doc Define a cor da fonte da mensagem quando info.*/
   --ez-text-input__message_box--info--color: var(--color--success, #22085d);
   /*@doc Define a cor da fonte da mensagem quando erro.*/
-  --ez-text-input__message_box--error--color: var(--color--error, #FF0000);
+  --ez-text-input__message_box--error--color: var(--color-alert--error-800,#BD0025);
 
   /* label */
   /*@doc Define o posicionamento do label.*/
@@ -61,7 +68,9 @@
   --ez-text-input__label--padding-right: 12px;
 
   /*@doc Define a cor do ícone do slot.*/
-  --ez-text-input__input--focus--icon-color: var(--ez-text-input__input--focus--border-color);
+  --ez-text-input__input--focus--icon-color: var(--title--primary, #2B3A54);
+  /*@doc Define a cor do ícone do slot quando disabled.*/
+  --ez-text-input__input--disabled--focus--icon-color: var(--text--primary, #626E82);
 
 
   /***************
@@ -95,12 +104,15 @@ input {
   color: var(--ez-text-input--color);
   font-weight: var(--ez-text-input--font-weight);
   padding: var(--ez-text-input__input--padding);
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 input:disabled {
   /*public*/
   background-color: var(--ez-text-input__input--disabled--background-color);
   color: var(--ez-text-input__input--disabled--color);
+  cursor: not-allowed;
 }
 
 input:focus {
@@ -111,11 +123,11 @@ input:focus {
 }
 
 input.icon--left {
-  padding-left: var(--ez-text-input__icon--width);
+  padding-left: var(--ez-text-input__icon--left--width);
 }
 
 input.icon--right { 
-  padding-right: var(--ez-text-input__icon--width);
+  padding-right: var(--ez-text-input__icon--right--width);
 }
 
 input.hasError {
@@ -131,16 +143,17 @@ input.text--right {
   text-align: right;
 }
 
+input:disabled,
 input:read-only {
-  cursor: default;
+  cursor: not-allowed;
 }
 
 .message-box {
   /*private*/
-  min-height: 16px;
+  min-height: 14px;
   min-width: 100%;
   margin-top: 3px;
-  line-height: 12px;
+  line-height: 10px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -188,27 +201,26 @@ input:read-only {
 
 .input__label--disabled {
   color: var(--ez-text-input__input--disabled--color);
+  cursor: not-allowed;
 }
 
+.input__label--left.input__label--right {
+  left: calc(var(--ez-text-input__icon--left--width) + 2px);
+  /*borda*/
+  width: calc(100% - (var(--ez-text-input__icon--right--width) + var(--ez-text-input__icon--left--width)));
+}
 .input__label--left {
   /*public*/
   text-align: left;
-  left: calc(var(--ez-text-input__icon--width) + 2px);
+  left: calc(var(--ez-text-input__icon--left--width) + 2px);
   /*borda*/
-  width: calc(100% - var(--ez-text-input__icon--width));
+  width: calc(100% - var(--ez-text-input__icon--left--width));
 }
 
 .input__label--right {
   /*public*/
-  right: var(--ez-text-input__icon--width);
-  width: calc(100% - var(--ez-text-input__icon--width));
-}
-
-/* ISSO TA ERRADO CRIAR INPUT__LABEL--BOTH */
-.input__label--left.input__label--right {
-  left: calc(var(--ez-text-input__icon--width) + 2px);
-  /*borda*/
-  width: calc(100% - var(--ez-text-input__icon--width) * 2);
+  right: var(--ez-text-input__icon--right--width);
+  width: calc(100% - var(--ez-text-input__icon--right--width));
 }
 
 .input--with--label {
@@ -268,26 +280,10 @@ input:read-only {
   color: var(--ez-text-input--color);
 }
 
-.input--slim:disabled::-webkit-input-placeholder { /* WebKit browsers */
-  /*public*/
-  color: var(--ez-text-input__input--disabled--color);
-}
-
-.input--slim:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-  /*public*/
-  color: var(--ez-text-input__input--disabled--color);
-}
-
-.input--slim:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
-  /*public*/
-  color: var(--ez-text-input__input--disabled--color);
-}
-
-.input--slim:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
-  /*public*/
-  color: var(--ez-text-input__input--disabled--color);
-}
-
+.input--slim:disabled::-webkit-input-placeholder, /* WebKit browsers */
+.input--slim:disabled:-moz-placeholder, /* Mozilla Firefox 4 to 18 */
+.input--slim:disabled::-moz-placeholder, /* Mozilla Firefox 19+ */
+.input--slim:disabled:-ms-input-placeholder, /* Internet Explorer 10+ */
 .input--slim:disabled::placeholder {
   /*public*/
   color: var(--ez-text-input__input--disabled--color);

package/dist/collection/components/ez-text-input/ez-text-input.js

@@ -165,9 +165,9 @@ export class EzTextInput {
       content.style.justifyContent = "center";
       content.style.overflow = "hidden";
       content.style.top = "0px";
-      content.style.width = "var(--ez-text-input__icon--width)";
       content.style.height = this.mode != "slim" ? "var(--ez-text-input--height)" : "var(--ez-text-input--height--slim)";
       if (slot.name == "leftIcon") {
+        content.style.width = "var(--ez-text-input__icon--left--width)";
         content.style.left = "0px";
         content.style.borderRadius = "var(--ez-text-input--border-radius) 0 0 var(--ez-text-input--border-radius)";
         this._inputElem.classList.add("icon--left");
@@ -177,6 +177,7 @@ export class EzTextInput {
         this._contentLeftSlot = content;
       }
       else if (slot.name == "rightIcon") {
+        content.style.width = "var(--ez-text-input__icon--right--width)";
         content.style.right = "0px";
         content.style.borderRadius = "0 var(--ez-text-input--border-radius) var(--ez-text-input--border-radius) 0";
         this._inputElem.classList.add("icon--right");