@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-76625.0 → 0.0.0-bugfix-dev-KB-83282.0

package/dist/esm/ez-combo-box.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
-import { ObjectUtils, FloatingManager, StringUtils, ElementIDUtils } from '@sankhyalabs/core';
+import { ObjectUtils, ElementIDUtils } from '@sankhyalabs/core';
 import './ApplicationUtils-eaf91331.js';
 import { C as CSSVarsUtils } from './CSSVarsUtils-acba92d7.js';
 import './DialogType-54a62731.js';
 import './CheckMode-bdb2ec19.js';
 import './ICustomRender-875b5a40.js';
 
-const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box__min-width:0px;--ez-combo-box__max-width:100%;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box--line-height:calc(var(--text--medium, 14px) + 4px);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn--color:var(--title--primary, #2B3A54);--ez-combo-box__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-hover--color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #2B3A54);--ez-combo-box__list-title--primary:var(--title--primary, #2B3A54);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium) + 4px);--ez-combo-box__list-min-width:64px;--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);--ez-combo-box__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-combo-box__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-combo-box__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-combo-box__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-combo-box__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-combo-box__scrollbar--width:var(--space--small, 6px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-combo-box--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.list-container{min-width:var(--ez-combo-box__list-min-width);position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:0;z-index:var(--more-visible, 2);max-height:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small) + 9px);background-color:var(--ez-combo-box--background-color--xlight);border-radius:var(--ez-combo-box--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);padding:var(--ez-combo-box--space--small)}.list-options{box-sizing:border-box;width:100%;height:100%;padding:0;display:flex;flex-direction:column;scroll-behavior:smooth;overflow:auto;scrollbar-width:thin;gap:3px;scrollbar-color:var(--ez-combo-box__scrollbar--color-clicked) var(--ez-combo-box__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--ez-combo-box__scrollbar--color-background);width:var(--ez-combo-box__scrollbar--width);max-width:var(--ez-combo-box__scrollbar--width);min-width:var(--ez-combo-box__scrollbar--width)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-combo-box__scrollbar--color-background);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-combo-box__scrollbar--color-default);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-combo-box__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-combo-box__scrollbar--color-clicked)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-combo-box--border-radius-small);padding:var(--ez-combo-box--space--small);min-height:var(--ez-combo-box__list-height);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size);line-height:var(--ez-combo-box--line-height)}.item__label{font-weight:var(--ez-combo-box--font-weight--medium)}.item__label--bold{font-weight:var(--ez-combo-box--font-weight--large)}.item__value{text-align:center;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;min-height:var(--ez-combo-box__list-height)}.message__no-result{color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size)}.message__loading{border-radius:50%;width:14px;height:14px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-combo-box__list-title--primary);border-top:3px solid transparent}li:hover{background-color:var(--ez-combo-box--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;padding:0px;color:var(--ez-combo-box__btn--color)}.btn:disabled{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:disabled:hover{cursor:not-allowed;color:var(--ez-combo-box__btn-disabled--color)}.btn:hover{color:var(--ez-combo-box__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}.text-input-slot-container{--ez-text-input__icon--width:32px;--ez-text-input__min-width:var(--ez-combo-box__min-width);--ez-text-input__max-width:var(--ez-combo-box__max-width)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
+const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__btn--color:var(--title--primary, #2B3A54);--ez-combo-box__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-hover--color:var(--color--primary, #4e4e4e);width:var(--ez-combo-box--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.btn{outline:none;border:none;background:none;cursor:pointer;padding:0px;color:var(--ez-combo-box__btn--color)}.btn:disabled{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:disabled:hover{cursor:not-allowed;color:var(--ez-combo-box__btn-disabled--color)}.btn:hover{color:var(--ez-combo-box__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}.text-input-slot-container{--ez-text-input__icon--width:32px;--ez-text-input__min-width:var(--ez-combo-box__min-width);--ez-text-input__max-width:var(--ez-combo-box__max-width)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
 
 const EzComboBox = class {
   constructor(hostRef) {
@@ -18,11 +18,13 @@ const EzComboBox = class {
     this._tabPressed = false;
     this._textEmptyList = "Nenhum resultado encontrado";
     this._lookupMode = false;
+    this.isOpen = false;
     this._preSelection = undefined;
     this._visibleOptions = undefined;
     this._startLoading = false;
     this._showLoading = true;
     this._criteria = undefined;
+    this._textInputReady = undefined;
     this.limitCharsToSearch = 3;
     this.value = undefined;
     this.label = undefined;
@@ -128,63 +130,6 @@ const EzComboBox = class {
   async clearValue() {
     this.clearSearch();
   }
-  scrollListener() {
-    var _a;
-    if (this._floatingID == undefined) {
-      return;
-    }
-    if ((_a = this.listOptionsPosition) === null || _a === void 0 ? void 0 : _a.hardPosition) {
-      this.hideOptions();
-    }
-    else {
-      window.requestAnimationFrame(() => {
-        this.updateListPosition();
-      });
-    }
-  }
-  updateListPosition() {
-    let { verticalPosition, horizontalPosition, fromBottom, fromRight, bottomLimit, hardPosition } = this.getListPosition();
-    const elementRect = this._listWrapper.getBoundingClientRect();
-    const containerRect = this._listContainer.getBoundingClientRect();
-    const textInputRect = this._textInput.getBoundingClientRect();
-    const limitHeight = bottomLimit || window.innerHeight;
-    const neededHeight = containerRect.bottom + elementRect.height;
-    if (!fromBottom && (elementRect.top < 0 || neededHeight > limitHeight)) {
-      fromBottom = true;
-    }
-    if (!hardPosition) {
-      verticalPosition = verticalPosition || 0;
-      horizontalPosition = horizontalPosition || 0;
-      if (fromBottom) {
-        verticalPosition = window.innerHeight - textInputRect.top + verticalPosition;
-      }
-      else {
-        verticalPosition += containerRect.top;
-      }
-      if (fromRight) {
-        horizontalPosition = window.innerWidth - textInputRect.right + horizontalPosition;
-      }
-      else {
-        horizontalPosition += containerRect.left;
-      }
-    }
-    if (verticalPosition != undefined) {
-      this._listWrapper.style[fromBottom ? "bottom" : "top"] = `${verticalPosition}px`;
-      this._listWrapper.style[fromBottom ? "top" : "bottom"] = "";
-    }
-    if (horizontalPosition != undefined) {
-      this._listWrapper.style[fromRight ? "right" : "left"] = `${horizontalPosition}px`;
-      this._listWrapper.style[fromRight ? "left" : "right"] = "";
-    }
-  }
-  getListPosition() {
-    if (this.listOptionsPosition) {
-      return this.listOptionsPosition;
-    }
-    return {
-      verticalPosition: 6
-    };
-  }
   isDifferentValues(firstValue, secondValue) {
     return ObjectUtils.objectToString(firstValue || {}) !== ObjectUtils.objectToString(secondValue || {});
   }
@@ -257,85 +202,24 @@ const EzComboBox = class {
     }
     return 0;
   }
-  buildItem(opt, index) {
-    const widthValue = this.showOptionValue && this._maxWidthValue > 0 ? `${this._maxWidthValue}px` : '';
-    opt.label = opt.label || opt.value;
-    return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = index }, this.showOptionValue
-      ? h("span", { class: "item__value", title: opt.value, style: { width: widthValue, minWidth: widthValue, maxWidth: widthValue } }, opt.value)
-      : 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;
-    }
+    this.openPopover();
     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() });
     this.setFocus();
-    window.requestAnimationFrame(() => {
-      this.updateListPosition();
-      if (!this.listOptionsPosition) {
-        this._listWrapper.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
-      }
-    });
   }
   hideOptions() {
-    if (this._floatingID !== undefined) {
-      FloatingManager.close(this._floatingID);
-    }
-    this._floatingID = undefined;
+    var _a;
+    (_a = this._popover) === null || _a === void 0 ? void 0 : _a.hide();
     if (!!this._resizeObserver)
       this._resizeObserver.unobserve(this._textInput);
   }
-  isOptionsVisible() {
-    return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
-  }
-  nextOption() {
-    if (!this.isOptionsVisible()) {
-      return;
-    }
-    this.showOptions();
-    this._preSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this._visibleOptions.length - 1);
-    this.scrollToOption(this._visibleOptions[this._preSelection]);
-  }
-  previousOption() {
-    this._preSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
-    this.scrollToOption(this._visibleOptions[this._preSelection]);
-  }
-  scrollToOption(opt) {
-    window.requestAnimationFrame(() => {
-      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value) ? this._optionsList.querySelector(`li#item_${opt.value.replace(/[<>\[\]#=]/g, '\\$&').replace(/:/g, '\\:')}`) : undefined;
-      if (liElem)
-        liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
-    });
-  }
-  selectCurrentOption(focusOnInput = true) {
-    if (this._preSelection !== undefined) {
-      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;
     if (source instanceof Promise) {
@@ -361,12 +245,13 @@ const EzComboBox = class {
     }
   }
   selectOption(newOption, focusOnInput = true) {
-    var _a, _b;
+    var _a, _b, _c;
     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()))
       || (currentValue == undefined && newOption != undefined && "value" in newOption)) {
       const adjustedOpt = !(newOption === null || newOption === void 0 ? void 0 : newOption.value) ? undefined : newOption;
       this.value = adjustedOpt;
+      (_c = this._popover) === null || _c === void 0 ? void 0 : _c.hide();
     }
     else {
       this.resetOptions();
@@ -419,6 +304,11 @@ const EzComboBox = class {
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
+  componentDidRender() {
+    if (this._textInput) {
+      this._textInputReady = true;
+    }
+  }
   componentWillLoad() {
     if (this.options === undefined) {
       this.options = [];
@@ -437,15 +327,6 @@ const EzComboBox = class {
     }
     this.loadOptions(SearchMode.PRELOAD);
   }
-  componentDidRender() {
-    var _a;
-    if (this._floatingID === undefined) {
-      this._listWrapper.remove();
-    }
-    (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
-      ElementIDUtils.addIDInfoIfNotExists(elem, "itemComboBox");
-    });
-  }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
     this.setInputValue(false);
@@ -453,10 +334,12 @@ const EzComboBox = class {
       window.requestAnimationFrame(() => {
         if (!Array.isArray(entries) || !entries.length)
           return;
-        const { clientWidth } = this._listContainer;
-        if (clientWidth > 0 && !!this._listWrapper) {
-          this._listWrapper.style.width = `${clientWidth}px`;
-        }
+        if (!this._textInput)
+          return;
+        if (!this._comboBoxList)
+          return;
+        const textInputWidth = this._textInput.clientWidth;
+        this._comboBoxList.width = textInputWidth;
       });
     });
     if (this.autoFocus) {
@@ -465,6 +348,13 @@ const EzComboBox = class {
       });
     }
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._popover) === null || _a === void 0 ? void 0 : _a.remove();
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+    }
+  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -504,65 +394,48 @@ const EzComboBox = class {
     this.showOptions();
   }
   keyDownHandler(event) {
-    this._tabPressed = false;
-    if (event.ctrlKey) {
-      if (event.key === "f" || event.key === "F") {
-        this.loadOptions(SearchMode.ADVANCED);
-        //ATENÇÃO: Ctrl + F tem ação específica nos browsers
-        //nesse caso, como vamos abrir o popup de busca avançada,
-        //não é interessante deixar o evento propagar;
-        event.stopPropagation();
-        event.stopImmediatePropagation();
-        event.preventDefault();
-      }
+    var _a, _b, _c, _d, _e, _f;
+    if (event.ctrlKey && (event.key === "f" || event.key === "F")) {
+      this.loadOptions(SearchMode.ADVANCED);
+      event.preventDefault();
+      event.stopPropagation();
+      return;
     }
     switch (event.key) {
       case "ArrowDown":
-        event.stopPropagation();
-        if (this.canShowListOptions())
-          event.preventDefault();
-        this.showOptions();
-        this.nextOption();
+        event.preventDefault();
+        if (this.canShowListOptions()) {
+          this.showOptions();
+          (_a = this._comboBoxList) === null || _a === void 0 ? void 0 : _a.nextOption();
+        }
         break;
       case "ArrowUp":
-        event.stopPropagation();
-        if (this.canShowListOptions())
-          event.preventDefault();
-        this.showOptions();
-        this.previousOption();
+        event.preventDefault();
+        if (this.canShowListOptions()) {
+          this.showOptions();
+          (_b = this._comboBoxList) === null || _b === void 0 ? void 0 : _b.previousOption();
+        }
         break;
       case "Enter":
-        this.handleEventPropagation(event);
-        if (this.isOptionsVisible()) {
-          this.selectCurrentOption();
+        if (this.isOpen) {
+          event.preventDefault();
+          (_c = this._comboBoxList) === null || _c === void 0 ? void 0 : _c.selectCurrentOption();
         }
         break;
       case "Escape":
-        if (this.isOptionsVisible()) {
-          event.stopPropagation();
+        if (this.isOpen) {
+          event.preventDefault();
+          (_d = this._popover) === null || _d === void 0 ? void 0 : _d.hide();
         }
-        this.cancelPreselection();
-        this.resetOptions();
         break;
       case "Tab":
         this._tabPressed = true;
-        if (this.isOptionsVisible()) {
-          this.selectCurrentOption(false);
+        if (this.isOpen) {
+          (_e = this._comboBoxList) === null || _e === void 0 ? void 0 : _e.selectCurrentOption();
+          (_f = this._popover) === null || _f === void 0 ? void 0 : _f.hide();
         }
-        this.resetOptions();
         break;
     }
-    //ATENÇÃO: Existe a necessidade de propagar o evento de teclado.
-    //Por exemplo, quando o usuário dá um Enter, além de selecionar
-    //um valor, também significa que a ateração finalizou,
-    //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)
@@ -571,14 +444,15 @@ const EzComboBox = class {
   canShowListOptions() {
     return !this._showLoading && this._visibleOptions.length > 0;
   }
+  openPopover() {
+    var _a;
+    this.isOpen = true;
+    (_a = this._popover) === null || _a === void 0 ? void 0 : _a.show();
+  }
   render() {
+    var _a;
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: `text-input-slot-container ${this.suppressSearch ? "suppressed-search-input" : ""}`, ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), 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: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: "chevron-down" }))), 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
-      && h("div", { class: "message" }, h("span", { class: "message__no-result" }, this._textEmptyList)), this._showLoading
-      && h("div", { class: "message" }, h("div", { class: "message__loading" })), this.showOptionValue
-      ? h("span", { class: "item__value item__value--hidden", ref: elem => this._itemValueBasis = elem })
-      : undefined, this.canShowListOptions() && this._visibleOptions.map((opt, index) => this.buildItem(opt, index)))))));
+    return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: `text-input-slot-container ${this.suppressSearch ? "suppressed-search-input" : ""}`, ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), 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: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: "chevron-down" }))), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', onEzVisibilityChange: event => this.isOpen = event.detail }, h("ez-combo-box-list", { ref: ref => this._comboBoxList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this._textEmptyList, showOptionValue: this.showOptionValue, preSelection: this._preSelection, maxWidth: this._maxWidthValue, width: (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.clientWidth, onOptionSelect: (opt) => this.selectOption(opt), onOptionHover: (index) => this._preSelection = index }))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/ez-grid.entry.js

@@ -1,5 +1,5 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-baa5e267.js';
-import { Action, DataUnit, ObjectUtils as ObjectUtils$1, HTMLBuilder, ApplicationContext, StringUtils as StringUtils$1, UserInterface, LockManager, LockManagerOperation, NumberUtils as NumberUtils$1, MaskFormatter, DataType, SortMode, ElementIDUtils, FieldComparator, DateUtils as DateUtils$1, ArrayUtils as ArrayUtils$1, JSUtils, OverflowWatcher, OVERFLOWED_CLASS_NAME } from '@sankhyalabs/core';
+import { Action, DataUnit, ObjectUtils as ObjectUtils$1, HTMLBuilder, ApplicationContext, StringUtils as StringUtils$1, UserInterface, LockManager, LockManagerOperation, NumberUtils as NumberUtils$1, MaskFormatter, DataType, SortMode, ElementIDUtils, FieldComparator, DateUtils as DateUtils$1, ArrayUtils as ArrayUtils$1, JSUtils, OverflowWatcher, OVERFLOWED_CLASS_NAME, KeyboardManager } from '@sankhyalabs/core';
 import { SelectionMode } from '@sankhyalabs/core/dist/dataunit/DataUnit';
 import { A as ApplicationUtils } from './ApplicationUtils-eaf91331.js';
 import './DialogType-54a62731.js';
@@ -65829,6 +65829,9 @@ class AgGridController {
     if (cfgColumn.customWidth != undefined) {
       return cfgColumn.customWidth;
     }
+    if (cfgColumn.width != undefined) {
+      return cfgColumn.width;
+    }
     const field = (_a = this._dataUnit) === null || _a === void 0 ? void 0 : _a.getField(cfgColumn.name);
     if ((field === null || field === void 0 ? void 0 : field.userInterface) === UserInterface.SEARCH) {
       return this.DEFAULT_MAX_SIZE;
@@ -66408,6 +66411,20 @@ const EzGrid = class {
         .then(() => this.resetPaginationState());
     }
   }
+  nextRecord() {
+    if (this.dataUnit) {
+      if (this.dataUnit.getSelectionInfo().records.length === 0) {
+        this.dataUnit.selectFirst();
+        return;
+      }
+      this.dataUnit.nextRecord();
+    }
+  }
+  previousRecord() {
+    if (this.dataUnit) {
+      this.dataUnit.previousRecord();
+    }
+  }
   resetPaginationState() {
     var _a;
     this._paginationChangedByKeyboard = false;
@@ -66490,6 +66507,7 @@ const EzGrid = class {
     this._gridController.configFilterColumn(this._filterColumn);
     if (this.paginationCounterMode === 'auto')
       this._initHeaderOverflowWatcher();
+    this.initKeyboardManager();
   }
   handlePaginationChange(selectFirstRecord, paginationInfo) {
     var _a;
@@ -66556,6 +66574,7 @@ const EzGrid = class {
     var _a, _b;
     (_a = this._headerOverflowWatcher) === null || _a === void 0 ? void 0 : _a.destroy();
     (_b = this._gridController) === null || _b === void 0 ? void 0 : _b.destroy();
+    this.removeShortcuts();
   }
   connectedCallback() {
     var _a;
@@ -66594,6 +66613,45 @@ const EzGrid = class {
       return "left__header-expanded";
     return "left__header-contracted";
   }
+  async initKeyboardManager() {
+    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element });
+    this._keyboardManager
+      .bind("ctrl + .", () => {
+      if (!this._paginationInfo)
+        return;
+      this.nextRecord();
+    }, { description: "Avança para o próximo registro.", element: this._element })
+      .bind("ctrl + ,", () => {
+      if (!this._paginationInfo)
+        return;
+      this.previousRecord();
+    }, { description: "Retorna ao registro anterior.", element: this._element })
+      .bind("ctrl + alt + ArrowLeft", () => {
+      if (!this._paginationInfo)
+        return;
+      const { currentPage } = this._paginationInfo;
+      if (currentPage > 0) {
+        this.previousPage();
+      }
+    }, { description: "Retorna a pagina anterior.", element: this._element })
+      .bind("ctrl + alt + ArrowRight", () => {
+      if (!this._paginationInfo)
+        return;
+      const { hasMore } = this._paginationInfo;
+      if (hasMore) {
+        this.nextPage();
+      }
+    }, { description: "Avança para a próxima página.", element: this._element });
+  }
+  async removeShortcuts() {
+    if (this._keyboardManager) {
+      this._keyboardManager
+        .unbind("ctrl + .")
+        .unbind("ctrl + ,")
+        .unbind("ctrl + alt + ArrowLeft")
+        .unbind("ctrl + alt + ArrowRight");
+    }
+  }
   render() {
     var _a;
     return (h(Host, { "no-header": this.hideHeader() }, h("div", { class: {