@sankhyalabs/ezui 5.22.0-dev.4 → 5.22.0-dev.40

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

@@ -129,11 +129,6 @@ input.regular-mode {
   cursor: pointer;
   border-radius: 50%;
   position: relative;
-
-
-  /*public*/
-  width: var(--ez-check--width);
-  height: var(--ez-check--height);
 }
 
 input.compact{
@@ -363,5 +358,5 @@ input.switch-mode:checked:disabled::after {
 }
 
 .label--padding {
-  padding-left: var(--space--small);
+  padding-left: var(--space--extra-small);
 }

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css

@@ -73,7 +73,7 @@ ez-icon {
 .collapsible-box__title {
   /*private*/
   position: relative;
-  width: auto;
+  width: 100%;
   display: flex;
   box-sizing: border-box;
   align-items: center;
@@ -98,7 +98,7 @@ ez-icon {
 
 .collapsible-box__label {
   /*private*/
-  display: flex;
+  display: block;
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;

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

@@ -303,7 +303,7 @@ li:hover {
 }
 
 .btn:disabled:hover {
-  cursor: unset;
+  cursor: not-allowed;
 
   /*public*/
   color: var(--ez-combo-box__btn-disabled--color);

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

@@ -1,4 +1,4 @@
-import { ElementIDUtils, FloatingManager, ObjectUtils } from "@sankhyalabs/core";
+import { ElementIDUtils, FloatingManager, ObjectUtils, StringUtils } from "@sankhyalabs/core";
 import { h, Host } from "@stencil/core";
 import { CSSVarsUtils } from "../../utils";
 export class EzComboBox {
@@ -25,11 +25,13 @@ export class EzComboBox {
     this.suppressSearch = false;
     this.optionLoader = undefined;
     this.suppressEmptyOption = false;
+    this.stopPropagateEnterKeyEvent = true;
     this.canShowError = true;
     this.mode = "regular";
     this.hideErrorOnFocusOut = true;
     this.listOptionsPosition = undefined;
     this.isTextSearch = false;
+    this.autoFocus = false;
   }
   observeErrorMessage() {
     var _a;
@@ -92,9 +94,9 @@ export class EzComboBox {
   /**
    * Aplica o foco no campo.
    */
-  async setFocus() {
+  async setFocus(options) {
     if (this._textInput) {
-      this._textInput.setFocus();
+      this._textInput.setFocus(options);
     }
   }
   /**
@@ -254,11 +256,15 @@ 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() });
@@ -300,11 +306,26 @@ export class EzComboBox {
         liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
     });
   }
-  selectCurrentOption() {
+  selectCurrentOption(focusOnInput = true) {
     if (this._preSelection !== undefined) {
-      this.selectOption(this._visibleOptions[this._preSelection]);
+      this.selectOption(this._visibleOptions[this._preSelection], focusOnInput);
       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;
@@ -330,7 +351,7 @@ export class EzComboBox {
       }
     }
   }
-  selectOption(newOption) {
+  selectOption(newOption, focusOnInput = true) {
     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()))
@@ -341,6 +362,11 @@ export class EzComboBox {
     else {
       this.resetOptions();
     }
+    if (focusOnInput) {
+      setTimeout(() => {
+        this.setFocus();
+      }, 0);
+    }
   }
   loadOptions(mode, argument = "") {
     this._criteria = argument;
@@ -362,7 +388,6 @@ export class EzComboBox {
         this.setInputValue(false);
       }, this._deboucingTime);
     }
-    this.resetOptions();
   }
   setInputValue(clearError = true) {
     const textValue = this.getText();
@@ -425,6 +450,11 @@ export class EzComboBox {
         }
       });
     });
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
   }
   //---------------------------------------------
   // Event handlers
@@ -451,7 +481,7 @@ export class EzComboBox {
       this.showOptions();
     }
     else {
-      this.hideOptions();
+      this._preSelection = undefined;
       this.updateVisibleOptions();
     }
   }
@@ -479,21 +509,38 @@ export class EzComboBox {
     }
     switch (event.key) {
       case "ArrowDown":
-        this.nextOption();
         event.stopPropagation();
+        if (this.canShowListOptions())
+          event.preventDefault();
+        this.showOptions();
+        this.nextOption();
         break;
       case "ArrowUp":
-        this.previousOption();
         event.stopPropagation();
+        if (this.canShowListOptions())
+          event.preventDefault();
+        this.showOptions();
+        this.previousOption();
         break;
       case "Enter":
-        this.selectCurrentOption();
+        this.handleEventPropagation(event);
+        if (this.isOptionsVisible()) {
+          this.selectCurrentOption();
+        }
         break;
       case "Escape":
+        if (this.isOptionsVisible()) {
+          event.stopPropagation();
+        }
         this.cancelPreselection();
+        this.resetOptions();
         break;
       case "Tab":
         this._tabPressed = true;
+        if (this.isOptionsVisible()) {
+          this.selectCurrentOption(false);
+        }
+        this.resetOptions();
         break;
     }
     //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.
@@ -502,6 +549,12 @@ export class EzComboBox {
     //e o contexto pode reagir (fechar um popup por exemplo).
     //event.stopPropagation();
   }
+  //O evento deve ter sua propagação interrompida, apenas se a lista de opções estiver sendo exibida.
+  handleEventPropagation(event) {
+    if (this._listContainer.hasChildNodes() && this.stopPropagateEnterKeyEvent) {
+      event.stopPropagation();
+    }
+  }
   onTextInputFocusOutHandler() {
     if (this.hideErrorOnFocusOut)
       this.cancelPreselection();
@@ -745,6 +798,24 @@ export class EzComboBox {
         "reflect": false,
         "defaultValue": "false"
       },
+      "stopPropagateEnterKeyEvent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true, ineterrompe a propaga\u00E7\u00E3o do evento de KeyDown da tecla enter"
+        },
+        "attribute": "stop-propagate-enter-key-event",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "canShowError": {
         "type": "boolean",
         "mutable": false,
@@ -835,6 +906,24 @@ 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"
       }
     };
   }
@@ -889,11 +978,18 @@ export class EzComboBox {
       },
       "setFocus": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(options?: TFocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "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.css

@@ -22,7 +22,7 @@
 }
 
 .btn-open-cal:disabled {
-  cursor: unset;
+  cursor: not-allowed;
 }
 
 .btn-open-cal::after {

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

@@ -12,6 +12,7 @@ export class EzDateInput {
     this.errorMessage = undefined;
     this.mode = "regular";
     this.canShowError = true;
+    this.autoFocus = false;
   }
   observeLabel() {
     if (this._textInput) {
@@ -48,8 +49,8 @@ export class EzDateInput {
   /**
    * Aplica o foco no campo.
    */
-  async setFocus() {
-    this._textInput.setFocus();
+  async setFocus(options) {
+    this._textInput.setFocus(options);
   }
   /**
    * Remove o foco do campo.
@@ -81,6 +82,9 @@ export class EzDateInput {
     if ((currentValue === null || currentValue === void 0 ? void 0 : currentValue.getTime()) !== (newValueValidated === null || newValueValidated === void 0 ? void 0 : newValueValidated.getTime())) {
       this.value = newValueValidated;
     }
+    else {
+      this._changePending = false;
+    }
   }
   showCalendar() {
     this.handleBlur();
@@ -164,6 +168,11 @@ 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');
@@ -289,6 +298,24 @@ 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"
       }
     };
   }
@@ -353,11 +380,18 @@ export class EzDateInput {
     return {
       "setFocus": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(options?: TFocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "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.css

@@ -17,7 +17,7 @@
 }
 
 .btn-open-cal:disabled {
-  cursor: unset;
+  cursor: not-allowed;
 }
 
 .btn-open-cal::after {

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

@@ -13,6 +13,7 @@ export class EzDateTimeInput {
     this.showSeconds = false;
     this.mode = "regular";
     this.canShowError = true;
+    this.autoFocus = false;
   }
   observeLabel() {
     if (this._textInput) {
@@ -49,8 +50,8 @@ export class EzDateTimeInput {
   /**
    * Aplica o foco no campo.
    */
-  async setFocus() {
-    this._textInput.setFocus();
+  async setFocus(options) {
+    this._textInput.setFocus(options);
   }
   /**
    * Remove o foco do campo.
@@ -217,6 +218,11 @@ 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');
@@ -360,6 +366,24 @@ 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"
       }
     };
   }
@@ -424,11 +448,18 @@ export class EzDateTimeInput {
     return {
       "setFocus": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(options?: TFocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "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.js

@@ -1,6 +1,7 @@
 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;
@@ -164,6 +165,7 @@ 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();
     }
   }
@@ -176,7 +178,13 @@ 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');
-    buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.focus();
+    requestAnimationFrame(() => {
+      buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.focus();
+    });
+  }
+  disconnectedCallback() {
+    FocusResolver.resolveFocus(this._lastActiveElement);
+    this._lastActiveElement = undefined;
   }
   render() {
     if (this.opened && this._currentMessage) {

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

@@ -124,14 +124,19 @@ export class EzDropdown {
     }
     return groupItems.map((item) => {
       var _a;
-      return (item.type !== "divider"
-        ? h("div", Object.assign({ ref: (ref) => this._itemList[item.id] = ref, class: "ez-dropdown__item", "data-level": level }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownItem`) }), h("div", { class: "ez-dropdown__item-content", onClick: (evt) => this.onItemClick(evt, item), onMouseOver: (evt) => this.onShowSubmenu(evt, item) }, this.itemBuilder
-          ? this.getContainerItemBuilder(item, level, isLockedLevels, hasIcon, hasChildren)
-          : this.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren)), ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
-          !isLockedLevels &&
-          hasChildren &&
-          h("div", { ref: (ref) => this._submenuList.push(ref), class: "ez-dropdown__submenu ez-dropdown__submenu--hide" }, this.renderDropdown(item.children, counterLevel)))
-        : h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownDivider`) })));
+      switch (item.type) {
+        case "loading":
+          return (h("div", { class: "ez-dropdown__item" }, h("ez-skeleton", { width: '200px' })));
+        case "divider":
+          return (h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownDivider`) })));
+        case "item":
+          return (h("div", Object.assign({ ref: (ref) => this._itemList[item.id] = ref, class: "ez-dropdown__item", "data-level": level }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownItem`) }), h("div", { class: "ez-dropdown__item-content", onClick: (evt) => this.onItemClick(evt, item), onMouseOver: (evt) => this.onShowSubmenu(evt, item), onMouseEnter: () => this.ezHover.emit(item) }, this.itemBuilder
+            ? this.getContainerItemBuilder(item, level, isLockedLevels, hasIcon, hasChildren)
+            : this.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren)), ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+            !isLockedLevels &&
+            hasChildren &&
+            h("div", { ref: (ref) => this._submenuList.push(ref), class: "ez-dropdown__submenu ez-dropdown__submenu--hide" }, this.renderDropdown(item.children, counterLevel))));
+      }
     });
   }
   renderDropdown(branchItems = this.items, level = 1) {
@@ -370,6 +375,26 @@ export class EzDropdown {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "ezHover",
+        "name": "ezHover",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando ocorrer o ponteiro do mouse \u00E9 colocado sobre um item."
+        },
+        "complexType": {
+          "original": "IDropdownItem",
+          "resolved": "IDropdownItem",
+          "references": {
+            "IDropdownItem": {
+              "location": "import",
+              "path": "./structure/DropdownItem"
+            }
+          }
+        }
       }];
   }
   static get elementRef() { return "_element"; }

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

@@ -21,6 +21,7 @@ export class EzFilterInput {
     this.mode = "regular";
     this.asyncSearch = false;
     this.canShowError = true;
+    this.autoFocus = false;
   }
   observeLabel() {
     if (this._textInput) {
@@ -41,8 +42,8 @@ export class EzFilterInput {
   /**
    * Aplica o foco no campo.
    */
-  async setFocus() {
-    this._textInput.setFocus();
+  async setFocus(options) {
+    this._textInput.setFocus(options);
   }
   /**
    * Remove o foco do campo.
@@ -95,6 +96,11 @@ export class EzFilterInput {
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
@@ -253,6 +259,24 @@ export class EzFilterInput {
         "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"
       }
     };
   }
@@ -308,11 +332,18 @@ export class EzFilterInput {
     return {
       "setFocus": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(options?: TFocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "TFocusOptions": {
+              "location": "import",
+              "path": "../ez-text-input/ez-text-input"
             }
           },
           "return": "Promise<void>"

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

@@ -94,6 +94,7 @@ 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);