@sankhyalabs/ezui 5.22.0-dev.14 → 5.22.0-dev.141

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

@@ -5,13 +5,27 @@
   /*@doc Define a largura do componente.*/
   --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--width: 30px;
   /*@doc Define a altura do componente em modo "slim".*/
   --ez-text-input--height--slim: 32px;
+  /*@doc Define a largura maxima do componente.*/
+  --ez-text-input__min-width: 0px;
+  /*@doc Define a largura minima do componente.*/
+  --ez-text-input__max-width: 100%;
 
   /* general */
   /*@doc Define o raio da borda do input do componente.*/
   --ez-text-input--border-radius: var(--border--radius-medium, 12px);
+
+  /*@doc Define o raio da borda no top esquerdo do componente.*/
+  --ez-text-input--border-top-left-radius: var(--ez-text-input--border-radius);
+  /*@doc Define o raio da borda inferior esquerda do componente.*/
+  --ez-text-input--border-bottom-left-radius: var(--ez-text-input--border-radius);
+  /*@doc Define o raio da borda no top direito do componente.*/
+  --ez-text-input--border-top-right-radius: var(--ez-text-input--border-radius);
+  /*@doc Define o raio da borda inferior direita do componente.*/
+  --ez-text-input--border-bottom-right-radius: var(--ez-text-input--border-radius);
+
   /*@doc Define o tamanho da fonte do input e label do componente.*/
   --ez-text-input--font-size: var(--text--medium, 14px);
   /*@doc Define a família da fonte do input, label e caixa de mensagem do componente.*/
@@ -20,35 +34,41 @@
   --ez-text-input--font-weight: var(--text-weight--medium, 400);
   /*@doc Define a cor da fonte do input e label do componente.*/
   --ez-text-input--color: var(--title--primary, #2B3A54);
+  /*@doc Define a margem abaixo do componente.*/
+  --ez-text-input__margin-bottom: var(--space--small);
 
   /* 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*/
   --ez-text-input__input--padding: var(--space--medium, 6px);
+  /*@doc Define a cor do placeholder do input.*/
+  --ez-text-input__placeholder--color: var(--text--secondary, #a2abb9);
+
 
-  /* message box */
-  /*@doc Define o tamanho da fonte da mensagem abaixo do input.*/
-  --ez-text-input__message_box--font-size: var(--text--small, 12px);
-  /*@doc Define a cor da fonte da mensagem quando info.*/
-  --ez-text-input__message_box--info--color: var(--color--success, #22085d);
+  /* tooltip icon */
   /*@doc Define a cor da fonte da mensagem quando erro.*/
-  --ez-text-input__message_box--error--color: var(--color--error, #FF0000);
+  --ez-text-input__tooltip_icon--error--color: var(--color-alert--error-800,#BD0025);
 
   /* label */
   /*@doc Define o posicionamento do label.*/
@@ -61,7 +81,20 @@
   --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);
+
+  /*Error icon*/
+  /*@doc Define o espaçamento lateral do icone de erro.*/
+  --ez-text-input__tooltip-icon--spacing: var(--space--large);
+  /*@doc Define a largura do icone de erro.*/
+  --ez-text-input__tooltip-icon---width: var(--space--large);
+  /*@doc Define a margem horizontal do icone de erro.*/
+  --ez-text-input__tooltip-icon---horizontal-margin: var(--space--medium, 12px);
+  /*@doc Define a margem vertical do icone de erro.*/
+  --ez-text-input__tooltip-icon---vertical-margin: 10px;
+  
 
 
   /***************
@@ -73,6 +106,8 @@
   position: relative;
   /*public*/
   width: var(--ez-text-input--width);
+  min-width: var(--ez-text-input__min-width);
+  max-width: var(--ez-text-input__max-width);
 }
 
 :host(.grid_editor){
@@ -83,10 +118,16 @@ input {
   /*private*/
   width: 100%;
   box-sizing: border-box;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 
   /*public*/
   height: var(--ez-text-input--height);
-  border-radius: var(--ez-text-input--border-radius);
+  border-top-left-radius: var(--ez-text-input--border-top-left-radius);
+  border-bottom-left-radius: var(--ez-text-input--border-bottom-left-radius);
+  border-top-right-radius: var(--ez-text-input--border-top-right-radius);
+  border-bottom-right-radius: var(--ez-text-input--border-bottom-right-radius);
   font-family: var(--ez-text-input--font-family);
   font-size: var(--ez-text-input--font-size);
   border: var(--ez-text-input__input--border);
@@ -95,17 +136,31 @@ input {
   color: var(--ez-text-input--color);
   font-weight: var(--ez-text-input--font-weight);
   padding: var(--ez-text-input__input--padding);
+  margin-bottom: var(--ez-text-input__margin-bottom);
+}
+
+input.no--margin {
+  --ez-text-input__margin-bottom: 0;
 }
 
 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 {
   /*private*/
   outline: none;
+  border: var(--border--medium, 2px solid);
+  /*public*/
+  border-color: var(--ez-text-input__input--focus--border-color);
+}
+
+input.focused{
+  /*private*/
+  border: var(--border--medium, 2px solid);
   /*public*/
   border-color: var(--ez-text-input__input--focus--border-color);
 }
@@ -113,14 +168,22 @@ input:focus {
 input.icon--left {
   padding-left: var(--ez-text-input__icon--width);
 }
+input.icon--left.hasError {
+  padding-right: var(--ez-text-input__icon--width);
+}
 
 input.icon--right { 
   padding-right: var(--ez-text-input__icon--width);
 }
+input.icon--right.hasError {
+  padding-right: calc(var(--ez-text-input__icon--width) + var(--ez-text-input__tooltip-icon--spacing));
+}
 
 input.hasError {
   color: var(--ez-text-input--color);
+  border: var(--border--medium, 2px solid);
   border-color: var(--ez-text-input__input--error--border-color);
+  padding-right: calc(var(--ez-text-input__tooltip-icon---width) + (2*var(--ez-text-input__tooltip-icon---horizontal-margin)));
 }
 
 input:disabled.hasError {
@@ -131,29 +194,14 @@ input.text--right {
   text-align: right;
 }
 
+input:disabled,
 input:read-only {
-  cursor: default;
-}
-
-.message-box {
-  /*private*/
-  min-height: 16px;
-  min-width: 100%;
-  margin-top: 3px;
-  line-height: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  /*public*/
-  font-family: var(--ez-text-input--font-family);
-  font-size: var(--ez-text-input__message_box--font-size);
-  color: var(--ez-text-input__message_box--info--color);
+  cursor: not-allowed;
 }
 
 .hasError {
   /*public*/
-  color: var(--ez-text-input__message_box--error--color);
+  color: var(--ez-text-input__tooltip_icon--error--color);
 }
 
 .input__label {
@@ -178,7 +226,9 @@ input:read-only {
   left: var(--ez-text-input__label--padding-left);
   padding-right: var(--ez-text-input__label--padding-right);
 }
-
+.input__label.hasError {
+  width: calc(100% - 2*(var(--ez-text-input__tooltip-icon--spacing)));
+}
 .input__label--floated {
   font-family: var(--ez-text-input--font-family);
   font-size: var(--text--extra-small);
@@ -188,6 +238,7 @@ input:read-only {
 
 .input__label--disabled {
   color: var(--ez-text-input__input--disabled--color);
+  cursor: not-allowed;
 }
 
 .input__label--left {
@@ -198,17 +249,25 @@ input:read-only {
   width: calc(100% - var(--ez-text-input__icon--width));
 }
 
+.input__label--left.hasError {
+  width: calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing));
+}
+
 .input__label--right {
   /*public*/
   right: var(--ez-text-input__icon--width);
   width: calc(100% - var(--ez-text-input__icon--width));
 }
+.input__label--right.hasError {
+  width: calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing));
+}
 
 /* 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);
+
 }
 
 .input--with--label {
@@ -228,66 +287,23 @@ input:read-only {
   font-weight: bold;
 }
 
-.input--slim::-webkit-input-placeholder { /* Edge */
-  /*public*/
-  font-family: var(--ez-text-input--font-family);
-  font-size: var(--ez-text-input--font-size);
-  font-weight: var(--ez-text-input--font-weight);
-  color: var(--ez-text-input--color);
-}
-
-.input--slim:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-  /*public*/
-  font-family: var(--ez-text-input--font-family);
-  font-size: var(--ez-text-input--font-size);
-  font-weight: var(--ez-text-input--font-weight);
-  color: var(--ez-text-input--color);
-}
-
-.input--slim::-moz-placeholder { /* Mozilla Firefox 19+ */
-  /*public*/
-  font-family: var(--ez-text-input--font-family);
-  font-size: var(--ez-text-input--font-size);
-  font-weight: var(--ez-text-input--font-weight);
-  color: var(--ez-text-input--color);
-}
-
-.input--slim:-ms-input-placeholder { /* Internet Explorer 10-11 */
-  /*public*/
-  font-family: var(--ez-text-input--font-family);
-  font-size: var(--ez-text-input--font-size);
-  font-weight: var(--ez-text-input--font-weight);
-  color: var(--ez-text-input--color);
-}
+.input--slim::-webkit-input-placeholder,  /* Edge */
+  .input--slim:-moz-placeholder,            /* Firefox 4-18 */
+  .input--slim::-moz-placeholder,           /* Firefox 19+ */
+  .input--slim:-ms-input-placeholder,       /* IE 10-11 */
+  .input--slim::placeholder {               /* Modern browsers */
+    /*public*/
+    font-family: var(--ez-text-input--font-family);
+    font-size: var(--ez-text-input--font-size);
+    font-weight: var(--ez-text-input--font-weight);
+    color: var(--ez-text-input__placeholder--color);
+  }
 
-.input--slim::placeholder {
-  /*public*/
-  font-family: var(--ez-text-input--font-family);
-  font-size: var(--ez-text-input--font-size);
-  font-weight: var(--ez-text-input--font-weight);
-  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);
@@ -298,4 +314,28 @@ input.input__slim--noborder {
   border: 0 none;
   outline: 0;
   background: var(--ez-text-input__input--noborder-color);
+}
+
+ez-icon.tooltip-icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  width: var(--ez-text-input__tooltip-icon---width);
+  height: 22px;
+  margin: var(--ez-text-input__tooltip-icon---vertical-margin) var(--ez-text-input__tooltip-icon---horizontal-margin);
+  top: 0;
+  right: 0;
+  z-index: var(--elevation--4);
+  border-radius: var(--ez-text-input--border-radius);
+
+  
+}
+ez-icon.tooltip-icon.rightIconSlot{
+  right: var(--ez-text-input__tooltip-icon--spacing);
+}
+
+ez-icon.tooltip-icon.hasError{
+  --ez-icon--color: var(--ez-text-input__tooltip_icon--error--color);
 }