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

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

@@ -1,27 +1,105 @@
 :host {
+
   /* dimensions */
+  /*@doc Define altura do input.*/
   --ez-combo-box--height: 42px;
+  /*@doc Define largura do input.*/
   --ez-combo-box--width: 100%;
+  /*@doc Define largura do slot do ícone do input.*/
+  --ez-combo-box__icon--width: 48px;
+
+  /*@doc Define a largura maxima do componente.*/
+  --ez-combo-box__min-width: 0px;
+  /*@doc Define a largura minima do componente.*/
+  --ez-combo-box__max-width: 100%;
 
   /* general */
+  /*@doc Define o raio da borda do input.*/
   --ez-combo-box--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define o raio da borda do input quando pequeno.*/
+  --ez-combo-box--border-radius-small: var(--border--radius-small, 6px);
+  /*@doc Define o tamanho da fonte dentro do input.*/
   --ez-combo-box--font-size: var(--text--medium, 14px);
+  /*@doc Define a família da fonte dentro do input.*/
   --ez-combo-box--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte dentro do input quando pesada.*/
+  --ez-combo-box--font-weight--large: var(--text-weight--large, 500);
+  /*@doc Define o peso da fonte dentro do input quando média.*/
+  --ez-combo-box--font-weight--medium: var(--text-weight--medium, 400);
+  /*@doc Define a cor de fundo da lista de opções.*/
   --ez-combo-box--background-color--xlight: var(--background--xlight, #fff);
+  /*@doc Define a cor de fundo dos itens da lista de opções.*/
+  --ez-combo-box--background-medium: var(--background--medium, #f0f3f7);
+  /*@doc Define a altura da linha do texto dentro do input.*/
+  --ez-combo-box--line-height: calc(var(--text--medium, 14px) + 4px);
 
   /* input */
+  /*@doc Define a cor de fundo do input.*/
   --ez-combo-box__input--background-color: var(--background--medium, #e0e0e0);
+  /*@doc Define o estilo da borda do input.*/
   --ez-combo-box__input--border: var(--border--medium, 2px solid);
+  /*@doc Define a cor da borda do input.*/
   --ez-combo-box__input--border-color: var(--ez-combo-box__input--background-color);
+  /*no modo normal usamos a borda com a mesma cor do bg*/
+  /*@doc Define a cor da borda do input quando focado.*/
   --ez-combo-box__input--focus--border-color: var(--color--primary, #008561);
+  /*@doc Define a cor de fundo do input quando desabilitado.*/
   --ez-combo-box__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
+  /*@doc Define a cor do texto dentro do input quando desabilitado.*/
   --ez-combo-box__input--disabled--color: var(--text--disable, #AFB6C0);
+  /*@doc Define a cor da borda do input quando com erro.*/
+  --ez-combo-box__input--error--border-color: #CC2936;
 
   /* buttons */
+  /*@doc Define a cor do botão de pesquisa do componente.*/
   --ez-combo-box__btn--color: var(--title--primary, #2B3A54);
+  /*@doc Define a cor do botão de pesquisa do componente quando desabilitado.*/
   --ez-combo-box__btn-disabled--color: var(--text--disable, #AFB6C0);
+  /*@doc Define a cor do botão de pesquisa do componente quando o mouse está sobre ele.*/
   --ez-combo-box__btn-hover--color: var(--color--primary, #4e4e4e);
 
+  /* label */
+  /*@doc Define a cor do label.*/
+  --ez-combo-box__label--color: var(--title--primary, #2B3A54);
+
+  /* list */
+  /*@doc Define a cor do texto da lista de opções.*/
+  --ez-combo-box__list-title--primary: var(--title--primary, #2B3A54);
+  /*@doc Define a cor do texto do value da lista de opções.*/
+  --ez-combo-box__list-text--primary: var(--text--primary, #626e82);
+  /*@doc Define a altura do box da lista de opções.*/
+  --ez-combo-box__list-height: calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium) + 4px);
+  /*@doc Define a largura mínima da lista de opções.*/
+  --ez-combo-box__list-min-width: 64px;
+
+  /* espaçamento */
+  /*@doc Define um espaçamento mediano entre elementos do componente.*/
+  --ez-combo-box--space--medium: var(--space--medium, 12px);
+  /*@doc Define um espaçamento pequeno entre elementos do componente.*/
+  --ez-combo-box--space--small: var(--space--small, 6px);
+
+  /* scrollbar */
+  /*@doc Define a cor da barra de rolagem do componente.*/
+  --ez-combo-box__scrollbar--color-default: var(--scrollbar--default, #626e82);
+  /*@doc Define a cor de fundo da barra de rolagem do componente.*/
+  --ez-combo-box__scrollbar--color-background: var(--scrollbar--background, #E5EAF0);
+  /*@doc Define a cor do hover na barra de rolagem do componente.*/
+  --ez-combo-box__scrollbar--color-hover: var(--scrollbar--hover, #2B3A54);
+  /*@doc Define a cor do active na barra de rolagem do componente.*/
+  --ez-combo-box__scrollbar--color-clicked: var(--scrollbar--clicked, #a2abb9);
+  /*@doc Define o raio da borda da barra de rolagem do componente.*/
+  --ez-combo-box__scrollbar--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a largura da barra de rolagem do componente.*/
+  --ez-combo-box__scrollbar--width: var(--space--small, 6px);
+
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+
   /*public*/
   width: var(--ez-combo-box--width);
 }
@@ -40,6 +118,178 @@ ez-icon {
   --ez-text-input__input--disabled--color: var(--title--primary, #2B3A54);
 }
 
+.list-container {
+  /*public*/
+  min-width: var(--ez-combo-box__list-min-width);
+
+  /*private*/
+  position: relative;
+  width: 100%;
+}
+
+.list-wrapper {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 0;
+
+  /*public*/
+  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;
+
+  /*public*/
+  scrollbar-color: var(--ez-combo-box__scrollbar--color-clicked) var(--ez-combo-box__scrollbar--color-background);
+}
+
+.list-options::-webkit-scrollbar {
+  /*public*/
+  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 {
+  /*public*/
+  background-color: var(--ez-combo-box__scrollbar--color-background);
+  border-radius: var(--ez-combo-box__scrollbar--border-radius);
+}
+
+.list-options::-webkit-scrollbar-thumb {
+  /*public*/
+  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 {
+  /*public*/
+  background-color: var(--ez-combo-box__scrollbar--color-hover);
+}
+
+.list-options::-webkit-scrollbar-thumb:vertical:active,
+.list-options::-webkit-scrollbar-thumb:horizontal:active {
+  /*public*/
+  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;
+
+  /*public*/
+  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;
+
+  /*public*/
+  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 {
+  /*public*/
+  font-weight: var(--ez-combo-box--font-weight--medium);
+}
+
+.item__label--bold {
+  /*public*/
+  font-weight: var(--ez-combo-box--font-weight--large);
+}
+
+.item__value {
+  text-align: center;
+
+  /*public*/
+  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;
+  
+  /*public*/
+  min-height: var(--ez-combo-box__list-height);
+}
+
+.message__no-result {
+  /*public*/
+  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;
+
+  /*public*/
+  border: 3px solid var(--ez-combo-box__list-title--primary);
+  border-top: 3px solid transparent;
+}
+
+li:hover {
+  /*public*/
+  background-color: var(--ez-combo-box--background-medium);
+}
+
+.preselected {
+  /*public*/
+  background-color: var(--background--medium);
+}
+
 .btn {
   outline: none;
   border: none;

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

@@ -1,4 +1,4 @@
-import { ElementIDUtils, 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 {
@@ -9,13 +9,11 @@ export class EzComboBox {
     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;
@@ -121,6 +119,63 @@ export class EzComboBox {
   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 || {});
   }
@@ -193,24 +248,85 @@ export class EzComboBox {
     }
     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;
-    this.openPopover();
+    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() });
     this.setFocus();
+    window.requestAnimationFrame(() => {
+      this.updateListPosition();
+      if (!this.listOptionsPosition) {
+        this._listWrapper.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      }
+    });
   }
   hideOptions() {
-    var _a;
-    (_a = this._popover) === null || _a === void 0 ? void 0 : _a.hide();
+    if (this._floatingID !== undefined) {
+      FloatingManager.close(this._floatingID);
+    }
+    this._floatingID = undefined;
     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) {
@@ -236,13 +352,12 @@ export class EzComboBox {
     }
   }
   selectOption(newOption, focusOnInput = true) {
-    var _a, _b, _c;
+    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()))
       || (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();
@@ -295,11 +410,6 @@ export class EzComboBox {
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
-  componentDidRender() {
-    if (this._textInput) {
-      this._textInputReady = true;
-    }
-  }
   componentWillLoad() {
     if (this.options === undefined) {
       this.options = [];
@@ -318,6 +428,15 @@ export class EzComboBox {
     }
     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);
@@ -325,12 +444,10 @@ export class EzComboBox {
       window.requestAnimationFrame(() => {
         if (!Array.isArray(entries) || !entries.length)
           return;
-        if (!this._textInput)
-          return;
-        if (!this._comboBoxList)
-          return;
-        const textInputWidth = this._textInput.clientWidth;
-        this._comboBoxList.width = textInputWidth;
+        const { clientWidth } = this._listContainer;
+        if (clientWidth > 0 && !!this._listWrapper) {
+          this._listWrapper.style.width = `${clientWidth}px`;
+        }
       });
     });
     if (this.autoFocus) {
@@ -339,13 +456,6 @@ export class EzComboBox {
       });
     }
   }
-  disconnectedCallback() {
-    var _a;
-    (_a = this._popover) === null || _a === void 0 ? void 0 : _a.remove();
-    if (this._resizeObserver) {
-      this._resizeObserver.disconnect();
-    }
-  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -385,48 +495,65 @@ export class EzComboBox {
     this.showOptions();
   }
   keyDownHandler(event) {
-    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;
+    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();
+      }
     }
     switch (event.key) {
       case "ArrowDown":
-        event.preventDefault();
-        if (this.canShowListOptions()) {
-          this.showOptions();
-          (_a = this._comboBoxList) === null || _a === void 0 ? void 0 : _a.nextOption();
-        }
+        event.stopPropagation();
+        if (this.canShowListOptions())
+          event.preventDefault();
+        this.showOptions();
+        this.nextOption();
         break;
       case "ArrowUp":
-        event.preventDefault();
-        if (this.canShowListOptions()) {
-          this.showOptions();
-          (_b = this._comboBoxList) === null || _b === void 0 ? void 0 : _b.previousOption();
-        }
+        event.stopPropagation();
+        if (this.canShowListOptions())
+          event.preventDefault();
+        this.showOptions();
+        this.previousOption();
         break;
       case "Enter":
-        if (this.isOpen) {
-          event.preventDefault();
-          (_c = this._comboBoxList) === null || _c === void 0 ? void 0 : _c.selectCurrentOption();
+        this.handleEventPropagation(event);
+        if (this.isOptionsVisible()) {
+          this.selectCurrentOption();
         }
         break;
       case "Escape":
-        if (this.isOpen) {
-          event.preventDefault();
-          (_d = this._popover) === null || _d === void 0 ? void 0 : _d.hide();
+        if (this.isOptionsVisible()) {
+          event.stopPropagation();
         }
+        this.cancelPreselection();
+        this.resetOptions();
         break;
       case "Tab":
         this._tabPressed = true;
-        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();
+        if (this.isOptionsVisible()) {
+          this.selectCurrentOption(false);
         }
+        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)
@@ -435,15 +562,14 @@ export class EzComboBox {
   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("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 }))));
+    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)))))));
   }
   static get is() { return "ez-combo-box"; }
   static get encapsulation() { return "shadow"; }
@@ -803,13 +929,11 @@ export class EzComboBox {
   }
   static get states() {
     return {
-      "isOpen": {},
       "_preSelection": {},
       "_visibleOptions": {},
       "_startLoading": {},
       "_showLoading": {},
-      "_criteria": {},
-      "_textInputReady": {}
+      "_criteria": {}
     };
   }
   static get events() {
@@ -938,6 +1062,15 @@ export class EzComboBox {
         "methodName": "observeOptions"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "scroll",
+        "method": "scrollListener",
+        "target": "window",
+        "capture": true,
+        "passive": true
+      }];
+  }
 }
 var SearchMode;
 (function (SearchMode) {

package/dist/collection/components/ez-grid/controller/ag-grid/AgGridController.js

@@ -1106,9 +1106,6 @@ export default 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;