@sankhyalabs/ezui 0.0.0-bugfix-dev-kb-74339.1 → 0.0.0-bugfix-dev-KB-74224.0

package/dist/collection/components/ez-search/ez-search.js

@@ -18,6 +18,7 @@ export class EzSearch {
     this._visibleOptions = undefined;
     this._startLoading = false;
     this._showLoading = true;
+    this._showLoadingDescription = false;
     this._criteria = undefined;
     this.value = undefined;
     this.label = undefined;
@@ -340,10 +341,13 @@ export class EzSearch {
     this._startLoading = false;
     if (source instanceof Promise) {
       this._showLoading = true;
+      this._showLoadingDescription = true;
       source.then(result => {
-        this._showLoading = false;
         this.updateSource(result);
-      }).catch(() => this._showLoading = false);
+      }).finally(() => {
+        this._showLoading = false;
+        this._showLoadingDescription = false;
+      });
       this.updateVisibleOptions();
     }
     else {
@@ -446,19 +450,6 @@ export class EzSearch {
       this.controlListWithOnlyOne();
     }
   }
-  validateDescriptionValue() {
-    if (StringUtils.isEmpty(this.value)) {
-      return;
-    }
-    if (!this.validateNewValue(this.value, this._currentValue)) {
-      return;
-    }
-    let value = this.value;
-    if (typeof value === "object") {
-      return;
-    }
-    this.loadDescriptionValue(value);
-  }
   async loadDescriptionValue(argument) {
     var _a, _b;
     if (argument == undefined) {
@@ -557,7 +548,6 @@ export class EzSearch {
     (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
       ElementIDUtils.addIDInfoIfNotExists(elem, "itemSearch");
     });
-    this.validateDescriptionValue();
   }
   componentDidLoad() {
     this._currentValue = this.value;
@@ -680,10 +670,13 @@ export class EzSearch {
   canShowListOptions() {
     return !this._showLoading && this._visibleOptions.length > 0;
   }
+  canShowLoadSpinDescription() {
+    return this._showLoadingDescription && this._floatingID == undefined;
+  }
   render() {
     var _a;
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.ensureClearButtonVisible)
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, this.canShowLoadSpinDescription() ? h("div", { class: "message__loading" }) : h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.ensureClearButtonVisible)
       ? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
       : undefined), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
       && this._visibleOptions.length === 0
@@ -1071,6 +1064,7 @@ export class EzSearch {
       "_visibleOptions": {},
       "_startLoading": {},
       "_showLoading": {},
+      "_showLoadingDescription": {},
       "_criteria": {}
     };
   }

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

@@ -23,20 +23,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 +49,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 +66,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);
 
 
   /***************
@@ -101,6 +108,7 @@ 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 {
@@ -131,16 +139,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,6 +197,7 @@ input:read-only {
 
 .input__label--disabled {
   color: var(--ez-text-input__input--disabled--color);
+  cursor: not-allowed;
 }
 
 .input__label--left {
@@ -268,26 +278,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

@@ -202,6 +202,9 @@ export class EzTextInput {
     this.observeMask();
     this.adjustFloatingLabel();
     this.adjustBorderInput();
+    this._inputElem.addEventListener('focus', () => {
+      this._inputElem.setSelectionRange(0, this._inputElem.value.length);
+    });
   }
   componentWillLoad() {
     this.observeMask();

package/dist/collection/utils/form/DataBinder.js

@@ -160,10 +160,10 @@ export default class DataBinder {
     if (oldBind) {
       oldBind.destroy();
     }
+    this.bindSearchOptionsLoader(fieldName, field);
     field["value"] = this._dataUnit.getFieldValue(fieldName);
     this.updateErrorMessage(fieldName, field);
     this._fields.set(fieldName, Bind.create(fieldName, field, (fieldName, waitingChange) => this.changeStarted(fieldName, waitingChange), (fieldName) => this.cancelWaitingChange(fieldName), (fieldName, newValue) => this.setFieldValue(fieldName, newValue)));
-    this.bindSearchOptionsLoader(fieldName, field);
     this.applyEzUploadContext(fieldName, field);
   }
   changeStarted(fieldName, waitingChange) {