@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-77126.0 → 0.0.0-bugfix-dev-KB-77074.0

package/dist/collection/components/ez-combo-box/ez-combo-box.js

@@ -1,4 +1,4 @@
-import { ElementIDUtils, FloatingManager, ObjectUtils, StringUtils } from "@sankhyalabs/core";
+import { ElementIDUtils, FloatingManager, ObjectUtils } from "@sankhyalabs/core";
 import { h, Host } from "@stencil/core";
 import { CSSVarsUtils } from "../../utils";
 export class EzComboBox {
@@ -25,13 +25,12 @@ export class EzComboBox {
     this.suppressSearch = false;
     this.optionLoader = undefined;
     this.suppressEmptyOption = false;
-    this.stopPropagateEnterKeyEvent = true;
+    this.stopPropagateEnterKeyEvent = false;
     this.canShowError = true;
     this.mode = "regular";
     this.hideErrorOnFocusOut = true;
     this.listOptionsPosition = undefined;
     this.isTextSearch = false;
-    this.autoFocus = false;
   }
   observeErrorMessage() {
     var _a;
@@ -94,9 +93,9 @@ export class EzComboBox {
   /**
    * Aplica o foco no campo.
    */
-  async setFocus(options) {
+  async setFocus() {
     if (this._textInput) {
-      this._textInput.setFocus(options);
+      this._textInput.setFocus();
     }
   }
   /**
@@ -256,15 +255,11 @@ export class EzComboBox {
       : undefined, h("span", { class: "item__label " + (this.showOptionValue ? "item__label--bold" : ""), title: opt.label }, opt.label));
   }
   showOptions() {
-    var _a, _b;
     if (!this.enabled)
       return;
     if (this.isOptionsVisible()) {
       return;
     }
-    const valueString = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.value;
-    const indexValue = this._visibleOptions.findIndex(option => option.value === valueString);
-    this._preSelection = indexValue === -1 ? 0 : indexValue;
     if (!!this._resizeObserver)
       this._resizeObserver.observe(this._textInput);
     this._floatingID = FloatingManager.float(this._listWrapper, this._listContainer, { autoClose: true, isFixed: true, backClickListener: () => this.hideOptions() });
@@ -306,26 +301,11 @@ export class EzComboBox {
         liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
     });
   }
-  selectCurrentOption(focusOnInput = true) {
+  selectCurrentOption() {
     if (this._preSelection !== undefined) {
-      this.selectOption(this._visibleOptions[this._preSelection], focusOnInput);
+      this.selectOption(this._visibleOptions[this._preSelection]);
       this._preSelection = undefined;
     }
-    else {
-      this.controlListWithOnlyOne(focusOnInput);
-    }
-  }
-  controlListWithOnlyOne(focusOnInput = true) {
-    var _a;
-    const source = (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.filter((opt) => opt.label !== "" && opt.value != undefined);
-    if ((source === null || source === void 0 ? void 0 : source.length) > 0) {
-      let title = StringUtils.decodeHtmlEntities(source[0].label);
-      const option = {
-        value: source[0].value,
-        label: title,
-      };
-      this.selectOption(option, focusOnInput);
-    }
   }
   updateSource(source) {
     this._startLoading = false;
@@ -351,7 +331,7 @@ export class EzComboBox {
       }
     }
   }
-  selectOption(newOption, focusOnInput = true) {
+  selectOption(newOption) {
     var _a, _b;
     const currentValue = this.getSelectedOption(this.value);
     if ((((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOption === null || newOption === void 0 ? void 0 : newOption.value) === null || _b === void 0 ? void 0 : _b.toString()))
@@ -362,11 +342,6 @@ export class EzComboBox {
     else {
       this.resetOptions();
     }
-    if (focusOnInput) {
-      setTimeout(() => {
-        this.setFocus();
-      }, 0);
-    }
   }
   loadOptions(mode, argument = "") {
     this._criteria = argument;
@@ -450,11 +425,6 @@ export class EzComboBox {
         }
       });
     });
-    if (this.autoFocus) {
-      requestAnimationFrame(() => {
-        this.setFocus({ selectText: true });
-      });
-    }
   }
   //---------------------------------------------
   // Event handlers
@@ -509,24 +479,18 @@ export class EzComboBox {
     }
     switch (event.key) {
       case "ArrowDown":
-        event.stopPropagation();
-        if (this.canShowListOptions())
-          event.preventDefault();
         this.showOptions();
         this.nextOption();
+        event.stopPropagation();
         break;
       case "ArrowUp":
-        event.stopPropagation();
-        if (this.canShowListOptions())
-          event.preventDefault();
         this.showOptions();
         this.previousOption();
+        event.stopPropagation();
         break;
       case "Enter":
         this.handleEventPropagation(event);
-        if (this.isOptionsVisible()) {
-          this.selectCurrentOption();
-        }
+        this.selectCurrentOption();
         break;
       case "Escape":
         if (this.isOptionsVisible()) {
@@ -538,7 +502,7 @@ export class EzComboBox {
       case "Tab":
         this._tabPressed = true;
         if (this.isOptionsVisible()) {
-          this.selectCurrentOption(false);
+          this.selectCurrentOption();
         }
         this.resetOptions();
         break;
@@ -814,7 +778,7 @@ export class EzComboBox {
         },
         "attribute": "stop-propagate-enter-key-event",
         "reflect": false,
-        "defaultValue": "true"
+        "defaultValue": "false"
       },
       "canShowError": {
         "type": "boolean",
@@ -906,24 +870,6 @@ export class EzComboBox {
         "attribute": "is-text-search",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "autoFocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Se true o campo de texto receber\u00E1 o foco ao ser renderizado."
-        },
-        "attribute": "auto-focus",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }
@@ -978,18 +924,11 @@ export class EzComboBox {
       },
       "setFocus": {
         "complexType": {
-          "signature": "(options?: TFocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
+          "signature": "() => Promise<void>",
+          "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
-            },
-            "TFocusOptions": {
-              "location": "import",
-              "path": "../ez-text-input/ez-text-input"
             }
           },
           "return": "Promise<void>"

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

@@ -12,7 +12,6 @@ export class EzDateInput {
     this.errorMessage = undefined;
     this.mode = "regular";
     this.canShowError = true;
-    this.autoFocus = false;
   }
   observeLabel() {
     if (this._textInput) {
@@ -49,8 +48,8 @@ export class EzDateInput {
   /**
    * Aplica o foco no campo.
    */
-  async setFocus(options) {
-    this._textInput.setFocus(options);
+  async setFocus() {
+    this._textInput.setFocus();
   }
   /**
    * Remove o foco do campo.
@@ -168,11 +167,6 @@ export class EzDateInput {
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
-    if (this.autoFocus) {
-      requestAnimationFrame(() => {
-        this.setFocus({ selectText: true });
-      });
-    }
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
@@ -298,24 +292,6 @@ export class EzDateInput {
         "attribute": "can-show-error",
         "reflect": true,
         "defaultValue": "true"
-      },
-      "autoFocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Se true o campo de texto receber\u00E1 o foco ao ser renderizado."
-        },
-        "attribute": "auto-focus",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }
@@ -380,18 +356,11 @@ export class EzDateInput {
     return {
       "setFocus": {
         "complexType": {
-          "signature": "(options?: TFocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
+          "signature": "() => Promise<void>",
+          "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
-            },
-            "TFocusOptions": {
-              "location": "import",
-              "path": "../ez-text-input/ez-text-input"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/ez-date-time-input/ez-date-time-input.js

@@ -13,7 +13,6 @@ export class EzDateTimeInput {
     this.showSeconds = false;
     this.mode = "regular";
     this.canShowError = true;
-    this.autoFocus = false;
   }
   observeLabel() {
     if (this._textInput) {
@@ -50,8 +49,8 @@ export class EzDateTimeInput {
   /**
    * Aplica o foco no campo.
    */
-  async setFocus(options) {
-    this._textInput.setFocus(options);
+  async setFocus() {
+    this._textInput.setFocus();
   }
   /**
    * Remove o foco do campo.
@@ -218,11 +217,6 @@ export class EzDateTimeInput {
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
-    if (this.autoFocus) {
-      requestAnimationFrame(() => {
-        this.setFocus({ selectText: true });
-      });
-    }
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
@@ -366,24 +360,6 @@ export class EzDateTimeInput {
         "attribute": "can-show-error",
         "reflect": true,
         "defaultValue": "true"
-      },
-      "autoFocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Se true o campo de texto receber\u00E1 o foco ao ser renderizado."
-        },
-        "attribute": "auto-focus",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }
@@ -448,18 +424,11 @@ export class EzDateTimeInput {
     return {
       "setFocus": {
         "complexType": {
-          "signature": "(options?: TFocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
+          "signature": "() => Promise<void>",
+          "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
-            },
-            "TFocusOptions": {
-              "location": "import",
-              "path": "../ez-text-input/ez-text-input"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/ez-dialog/ez-dialog.css

@@ -2,7 +2,7 @@
 
   /* Container */
   /*@doc Define o espaçamento do container.*/
-  --dialog__container-padding: var(--space--sm, 24px);
+  --dialog__container-padding: var(--space--large, 24px);
   
   /* Botões */
   /*@doc Define a cor de fundo do botão de fechar.*/
@@ -31,7 +31,7 @@
   /*@doc Define o peso do texto da mensagem.*/
   --dialog__body--text-weight--medium: var(--text-weight--medium, 400);
   /*@doc Define o espaçamento inferior do texto da mensagem.*/
-  --dialog__body--padding-bottom: var(--space--medium, 12px);
+  --dialog__body--padding-bottom: var(--space--large, 24px);
   /*@doc Define o tamanho do texto da mensagem.*/
   --dialog__body--font-size: var(--text--medium, 14px);
   /*@doc Define a cor do texto da mensagem.*/
@@ -141,7 +141,7 @@ h2 {
   color: var(--dialog__body--color);
   max-height: 30vh;
   content-visibility: auto;
-  margin-bottom: var(--space--medium);
+  margin-bottom: 24px;
   overflow-y: auto;
 }
 

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

@@ -1,7 +1,6 @@
 import { h, forceUpdate, } from '@stencil/core';
 import { DialogType } from "./DialogType";
 import { ElementIDUtils, FloatingManager } from "@sankhyalabs/core";
-import FocusResolver from '../../utils/FocusResolver';
 class Message {
   constructor(title, message, dialogType, confirm, icon, labelCancel, labelConfirm, btnConfirmDanger, callBack, beforeClose) {
     this.title = title;
@@ -165,7 +164,6 @@ export class EzDialog {
     const dialog = this._element.shadowRoot.querySelector('.overlay .dialog');
     if (dialog instanceof HTMLDivElement) {
       dialog.style.outline = 'none';
-      this._lastActiveElement = document.activeElement;
       dialog.focus();
     }
   }
@@ -178,13 +176,7 @@ export class EzDialog {
   focusOnPrimaryButton() {
     const btnConfirm = this._element.shadowRoot.querySelector(`#${this.PRIMARY_BUTTON_ID}`);
     const buttonElement = btnConfirm === null || btnConfirm === void 0 ? void 0 : btnConfirm.shadowRoot.querySelector('button');
-    requestAnimationFrame(() => {
-      buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.focus();
-    });
-  }
-  disconnectedCallback() {
-    FocusResolver.resolveFocus(this._lastActiveElement);
-    this._lastActiveElement = undefined;
+    buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.focus();
   }
   render() {
     if (this.opened && this._currentMessage) {

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

@@ -1,4 +1,15 @@
 :host {
+  /*@doc Define a largura do slot direito.*/
+  --ez-filter-slot--right--width: 70px;
+
   display: block;
   width: 100%;
 }
+
+.pointerCursor {
+  cursor: pointer;
+}
+
+ez-text-input {
+  --ez-text-input__icon--right--width: var(--ez-filter-slot--right--width)
+}

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

@@ -5,13 +5,16 @@ export class EzFilterInput {
   constructor() {
     this._searchingText = "";
     this.handleFocus = () => {
+      this.ezFocusIn.emit();
+      if (!this.asyncSearch) {
+        return;
+      }
       if (this._searchingText === "") {
         this._textInput.value = "";
       }
       else {
         this._textInput.value = this._searchingText;
       }
-      this.ezFocusIn.emit();
     };
     this.label = undefined;
     this.value = undefined;
@@ -21,7 +24,7 @@ export class EzFilterInput {
     this.mode = "regular";
     this.asyncSearch = false;
     this.canShowError = true;
-    this.autoFocus = false;
+    this.enabledIconClick = false;
   }
   observeLabel() {
     if (this._textInput) {
@@ -42,8 +45,8 @@ export class EzFilterInput {
   /**
    * Aplica o foco no campo.
    */
-  async setFocus(options) {
-    this._textInput.setFocus(options);
+  async setFocus() {
+    this._textInput.setFocus();
   }
   /**
    * Remove o foco do campo.
@@ -83,6 +86,14 @@ export class EzFilterInput {
       this._textInput.value = this.value;
     }
   }
+  /**
+   * Método usado para emitir o evento de clique no ícone
+   */
+  async handleIconClick() {
+    if (this.enabledIconClick) {
+      this.ezIconClick.emit(true);
+    }
+  }
   handleChange(evt) {
     const newValue = evt.detail;
     this.errorMessage = "";
@@ -96,15 +107,10 @@ export class EzFilterInput {
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
-    if (this.autoFocus) {
-      requestAnimationFrame(() => {
-        this.setFocus({ selectText: true });
-      });
-    }
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.handleChange(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, mode: this.mode, onFocusin: this.handleFocus, canShowError: this.canShowError }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
+    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.handleChange(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, mode: this.mode, onFocusin: this.handleFocus, canShowError: this.canShowError }, h("ez-icon", { slot: "leftIcon", iconName: "search", onClick: () => this.handleIconClick(), class: this.enabledIconClick ? 'pointerCursor' : '' }), h("slot", { name: "right", slot: "rightIcon" })));
   }
   static get is() { return "ez-filter-input"; }
   static get encapsulation() { return "shadow"; }
@@ -260,7 +266,7 @@ export class EzFilterInput {
         "reflect": true,
         "defaultValue": "true"
       },
-      "autoFocus": {
+      "enabledIconClick": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -272,9 +278,9 @@ export class EzFilterInput {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Se true o campo de texto receber\u00E1 o foco ao ser renderizado."
+          "text": "Se true permite ao usu\u00E1rio interagir com o \u00EDcone de pesquisa"
         },
-        "attribute": "auto-focus",
+        "attribute": "enabled-icon-click",
         "reflect": false,
         "defaultValue": "false"
       }
@@ -326,24 +332,32 @@ export class EzFilterInput {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "ezIconClick",
+        "name": "ezIconClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando tem intera\u00E7\u00E3o com o \u00CDcone de pesquisa"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
       }];
   }
   static get methods() {
     return {
       "setFocus": {
         "complexType": {
-          "signature": "(options?: TFocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
+          "signature": "() => Promise<void>",
+          "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
-            },
-            "TFocusOptions": {
-              "location": "import",
-              "path": "../ez-text-input/ez-text-input"
             }
           },
           "return": "Promise<void>"
@@ -419,6 +433,22 @@ export class EzFilterInput {
           "text": "M\u00E9todo respons\u00E1vel por resetar o valor do campo para o ultimo valor inputado.",
           "tags": []
         }
+      },
+      "handleIconClick": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "M\u00E9todo usado para emitir o evento de clique no \u00EDcone",
+          "tags": []
+        }
       }
     };
   }

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

@@ -94,7 +94,6 @@ export class EzForm {
     if (this.dataUnit === undefined) {
       this.dataUnit = new DataUnit("ez-form");
     }
-    this.dataUnit.unsubscribe(this.onDataUnitAction);
     this.dataUnit.subscribe(this.onDataUnitAction);
     this._dataBinder = new DataBinder(this.dataUnit);
     this._store = createStore(formReducer);

package/dist/collection/components/ez-form-view/fieldbuilder/templates/TextInput.tpl.js

@@ -1,4 +1,4 @@
 import { h } from "@stencil/core";
-export const buildTextInput = ({ name, label, readOnly, contextName, canShowError, props }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError, mask: props === null || props === void 0 ? void 0 : props.mask, "clean-value-mask": props === null || props === void 0 ? void 0 : props.cleanValueMask })));
+export const buildTextInput = ({ name, label, readOnly, contextName, canShowError }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError })));
 };