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

package/dist/custom-elements/index.js

@@ -2084,7 +2084,7 @@ const EzCalendar$1 = class extends HTMLElement$1 {
   static get style() { return ezCalendarCss; }
 };
 
-const ezCardItemCss = ":host {  \n  /*@doc Define o tamanho da fonte do componente.*/\n  --ez-card-item--font-size: var(--text--medium, 14px);\n\n  /*@doc Define o tamanho da fonte do componente no modo compacto.*/\n  --ez-card-item--font-size-compacted: var(--text--extra-small, 10px);\n\n  /*@doc Define a família da fonte do componente.*/\n  --ez-card-item--font-family: var(--font-pattern, Arial);\n\n  /*@doc Define o peso da fonte do componente.*/\n  --ez-card-item--font-weight: var(--text-weight--medium, 400);\n\n  /*@doc Define o peso da fonte do title do componente.*/\n  --ez-card-item--font-weight-large: var(--text-weight--large, 600);\n\n  /*@doc Define a cor da fonte do componente.*/\n  --ez-card-item--color: var(--text--primary, #626e82);\n\n  /*@doc Define a cor da fonte da key do componente.*/\n  --ez-card-item__key--color: var(--text--primary, #626e82);\n\n  /*@doc Define a cor da fonte do label do detalhe do componente.*/\n  --ez-card-item__detail-label--color: var(--text--secondary, #A2ABB9);\n\n  /*@doc Define o espaçamento inferior dos detalhes do componente.*/\n  --ez-card-item__detail--padding-bottom: var(--space--extra-small, 3px);\n\n  /*@doc Define o espaçamento inferior do title do componente.*/\n  --ez-card-item__title--padding-bottom: var(--space--extra-small, 3px);\n\n  /*@doc Define a cor do highlight / marcação nos textos do componente.*/\n  --ez-card-item__highlight--color: var(--color--primary-300, #E2F4EF);\n\n   /*@doc Define o peso da fonte do componente.*/\n   --ez-card-item--detail-label--font-weight: var(--text-weight--large, 400);\n\n  width: 100%;\n  display: flex;\n  cursor: pointer;\n}\n\n.card-item {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  cursor: pointer;\n  z-index: 0;\n  position: relative;\n  container-type: inline-size;\n  container-name: box;\n  white-space: pre-line;\n}\n\n.card-item__detail{\n  display: inline-block;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  opacity: var(--opacity--soft);\n}\n\n\n\n.card-item__expanded {\n  padding: var(--space--medium);\n}\n\n.card-item:hover {\n  background: #F0F3F7;\n  border-radius: 12px;\n}\n\n.card-item__title {\n  display: flex;\n  align-items: center;\n  line-height: 18px;\n  cursor: pointer;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight-large);\n  color: var(--ez-card-item--color);\n  padding-bottom: var(--ez-card-item__title--padding-bottom);\n  gap: var(--space--small, 6px);\n}\n\n.card-item__key {\n  /*public*/\n  color: var(--ez-card-item__key--color);\n}\n\n.card-item__details {\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n  justify-content: space-between;\n  width: 100%;\n}\n\n.card-item__details-container__left {\n  display: flex;\n  flex-direction: column;\n  white-space: pre-line;\n  cursor: pointer;\n  width: 50%;\n}\n\n.card-item__details-container__right {\n  display: flex;\n  flex-direction: column;\n  white-space: pre-line;\n  width: 50%;\n  cursor: pointer;\n}\n\n.card-item__detail{\n  cursor: pointer;\n}\n\n.card-item__detail-default:not(:last-child) {\n  padding-bottom: var(--ez-card-item__detail--padding-bottom);\n}\n\n.card-item__detail-label {\n  cursor: pointer;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--detail-label--font-weight);\n}\n\n.card-item__detail-value {\n  cursor: pointer;\n  line-break: anywhere;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight);\n}\n\n.card-item__highlight {\n  position: relative;\n  border-radius: 8px;\n  z-index: -1;\n\n  /*public*/\n  background-color: var(--ez-card-item__highlight--color);\n  outline: 2px solid var(--ez-card-item__highlight--color);\n  box-shadow: -4px 0px 0px 0px var(--ez-card-item__highlight--color), \n               4px 0px 0px 0px var(--ez-card-item__highlight--color);\n}\n\n.card-item__content{\n  display: flex;\n  align-items: center;\n}\n\n.card-item__details-container_default{\n  display: flex;\n}\n\n.card-item__details-slot{\n  margin-left: auto;\n}\n\n/* Modo compacto */\n.card-item__compacted {\n  padding: var(--space--2xs) var(--space--small);\n}\n\n.card-item__detail-label-compacted {\n  font-size: var(--ez-card-item--font-size-compacted);\n}\n\n.card-item__detail-value-compacted {\n  font-size: var(--ez-card-item--font-size-compacted);\n}\n\n.card-item__title-compacted {\n  font-size: var(--ez-card-item--font-size-compacted);\n}\n\n.card-item__details-container__left-compacted{\n  width: 100%;\n}\n\n.card-item__details-container__right-compacted {\n  width: 100%;\n}\n\n\n@container box (max-width: 550px) {\n  .card-item__details {\n    flex-direction: column;\n  }\n\n  .card-item__details-container__left {\n    width: 100%;\n  }\n  \n  .card-item__details-container__right {\n    width: 100%;\n  }\n}\n\n@container box (max-width: 200px) {\n  .card-item__title {\n    font-size: 10px;\n  }\n\n  .card-item__detail-label {\n    font-size: 10px;\n  }\n\n  .card-item__detail-value {\n    font-size: 10px;\n  }\n\n}";
+const ezCardItemCss = ":host {  \n  /*@doc Define o tamanho da fonte do componente.*/\n  --ez-card-item--font-size: var(--text--medium, 14px);\n\n  /*@doc Define o tamanho da fonte do componente no modo compacto.*/\n  --ez-card-item--font-size-compacted: var(--text--extra-small, 10px);\n\n  /*@doc Define a família da fonte do componente.*/\n  --ez-card-item--font-family: var(--font-pattern, Arial);\n\n  /*@doc Define o peso da fonte do componente.*/\n  --ez-card-item--font-weight: var(--text-weight--medium, 400);\n\n  /*@doc Define o peso da fonte do title do componente.*/\n  --ez-card-item--font-weight-large: var(--text-weight--large, 600);\n\n  /*@doc Define a cor da fonte do componente.*/\n  --ez-card-item--color: var(--text--primary, #626e82);\n\n  /*@doc Define a cor da fonte da key do componente.*/\n  --ez-card-item__key--color: var(--text--primary, #626e82);\n\n  /*@doc Define a cor da fonte do label do detalhe do componente.*/\n  --ez-card-item__detail-label--color: var(--text--secondary, #A2ABB9);\n\n  /*@doc Define o espaçamento inferior dos detalhes do componente.*/\n  --ez-card-item__detail--padding-bottom: var(--space--extra-small, 3px);\n\n  /*@doc Define o espaçamento inferior do title do componente.*/\n  --ez-card-item__title--padding-bottom: var(--space--extra-small, 3px);\n\n  /*@doc Define a cor do highlight / marcação nos textos do componente.*/\n  --ez-card-item__highlight--color: var(--color--primary-300, #E2F4EF);\n\n   /*@doc Define o peso da fonte do componente.*/\n   --ez-card-item--detail-label--font-weight: var(--text-weight--large, 400);\n\n  width: 100%;\n  display: flex;\n  cursor: pointer;\n}\n\n.card-item {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  cursor: pointer;\n  z-index: 0;\n  position: relative;\n  container-type: inline-size;\n  container-name: box;\n  white-space: pre-line;\n}\n\n.card-item__detail{\n  display: inline-block;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  opacity: var(--opacity--soft);\n}\n\n\n\n.card-item__expanded {\n  padding: var(--space--medium);\n}\n\n.card-item:hover {\n  background: #F0F3F7;\n  border-radius: 12px;\n}\n\n.card-item__title {\n  display: flex;\n  align-items: center;\n  line-height: 18px;\n  cursor: pointer;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight-large);\n  color: var(--ez-card-item--color);\n  padding-bottom: var(--ez-card-item__title--padding-bottom);\n  gap: var(--space--small, 6px);\n}\n\n.card-item__key {\n  /*public*/\n  color: var(--ez-card-item__key--color);\n}\n\n.card-item__details {\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n  justify-content: space-between;\n  width: 100%;\n}\n\n.card-item__details-container__left {\n  display: flex;\n  flex-direction: column;\n  white-space: pre-line;\n  cursor: pointer;\n  width: 50%;\n}\n\n.card-item__details-container__right {\n  display: flex;\n  flex-direction: column;\n  white-space: pre-line;\n  width: 50%;\n  cursor: pointer;\n}\n\n.card-item__detail{\n  cursor: pointer;\n}\n\n.card-item__detail-default:not(:last-child) {\n  padding-bottom: var(--ez-card-item__detail--padding-bottom);\n}\n\n.card-item__detail-label {\n  cursor: pointer;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--detail-label--font-weight);\n}\n\n.card-item__detail-value {\n  cursor: pointer;\n  line-break: anywhere;\n\n  /*public*/\n  font-size: var(--ez-card-item--font-size);\n  font-family: var(--ez-card-item--font-family);\n  font-weight: var(--ez-card-item--font-weight);\n}\n\n.card-item__highlight {\n  position: relative;\n  border-radius: 8px;\n  z-index: -1;\n\n  /*public*/\n  background-color: var(--ez-card-item__highlight--color);\n  outline: 2px solid var(--ez-card-item__highlight--color);\n  box-shadow: -4px 0px 0px 0px var(--ez-card-item__highlight--color), \n               4px 0px 0px 0px var(--ez-card-item__highlight--color);\n}\n\n.card-item__content{\n  display: flex;\n  align-items: center;\n}\n\n.card-item__details-container_default{\n  display: flex;\n}\n\n.card-item__details-slot{\n  margin-left: auto;\n}\n\n/* Modo compacto */\n.card-item__compacted {\n  padding: var(--space--medium);\n  padding-bottom: 0px;\n  padding-right: 0px;\n}\n\n.card-item__detail-label-compacted {\n  font-size: var(--ez-card-item--font-size-compacted);\n}\n\n.card-item__detail-value-compacted {\n  font-size: var(--ez-card-item--font-size-compacted);\n}\n\n.card-item__title-compacted {\n  font-size: var(--ez-card-item--font-size-compacted);\n}\n\n.card-item__details-container__left-compacted{\n  width: 100%;\n}\n\n.card-item__details-container__right-compacted {\n  width: 100%;\n}\n\n\n@container box (max-width: 550px) {\n  .card-item__details {\n    flex-direction: column;\n  }\n\n  .card-item__details-container__left {\n    width: 100%;\n  }\n  \n  .card-item__details-container__right {\n    width: 100%;\n  }\n}\n\n@container box (max-width: 200px) {\n  .card-item__title {\n    font-size: 10px;\n  }\n\n  .card-item__detail-label {\n    font-size: 10px;\n  }\n\n  .card-item__detail-value {\n    font-size: 10px;\n  }\n\n}";
 
 const EzCardItem$1 = class extends HTMLElement$1 {
   constructor() {
@@ -2891,7 +2891,7 @@ const EzCollapsibleBox$1 = class extends HTMLElement$1 {
   static get style() { return ezCollapsibleBoxCss; }
 };
 
-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$1 = class extends HTMLElement$1 {
   constructor() {
@@ -2905,11 +2905,13 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     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;
@@ -3015,63 +3017,6 @@ const EzComboBox$1 = class extends HTMLElement$1 {
   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$1.objectToString(firstValue || {}) !== ObjectUtils$1.objectToString(secondValue || {});
   }
@@ -3144,85 +3089,24 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     }
     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$1.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) {
@@ -3248,12 +3132,13 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     }
   }
   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();
@@ -3306,6 +3191,11 @@ const EzComboBox$1 = class extends HTMLElement$1 {
   //---------------------------------------------
   // Lifecycle web component
   //---------------------------------------------
+  componentDidRender() {
+    if (this._textInput) {
+      this._textInputReady = true;
+    }
+  }
   componentWillLoad() {
     if (this.options === undefined) {
       this.options = [];
@@ -3324,15 +3214,6 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     }
     this.loadOptions(SearchMode$1.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);
@@ -3340,10 +3221,12 @@ const EzComboBox$1 = class extends HTMLElement$1 {
       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) {
@@ -3352,6 +3235,13 @@ const EzComboBox$1 = class extends HTMLElement$1 {
       });
     }
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this._popover) === null || _a === void 0 ? void 0 : _a.remove();
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+    }
+  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -3391,65 +3281,48 @@ const EzComboBox$1 = class extends HTMLElement$1 {
     this.showOptions();
   }
   keyDownHandler(event) {
-    this._tabPressed = false;
-    if (event.ctrlKey) {
-      if (event.key === "f" || event.key === "F") {
-        this.loadOptions(SearchMode$1.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$1.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)
@@ -3458,14 +3331,15 @@ const EzComboBox$1 = class extends HTMLElement$1 {
   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 this; }
   static get watchers() { return {
@@ -3482,6 +3356,158 @@ var SearchMode$1;
   SearchMode["PREDICTIVE"] = "PREDICTIVE";
 })(SearchMode$1 || (SearchMode$1 = {}));
 
+const ezComboBoxListCss = ":host{--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--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__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--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--medium, 12px);--ez-combo-box__list-container--padding:var(--space--extra-small, 3px)}.list-container{padding-top:var(--ez-combo-box__list-container--padding)}.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--medium, 0 8px 24px 0 rgba(43, 58, 84, 0.10));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)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
+
+const EzComboBoxList$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.showLoading = undefined;
+    this.visibleOptions = undefined;
+    this.textEmptyList = "Nenhum resultado encontrado";
+    this.showOptionValue = undefined;
+    this.preSelection = undefined;
+    this.maxWidth = undefined;
+    this.width = undefined;
+    this.onOptionSelect = undefined;
+    this.onOptionHover = undefined;
+  }
+  /**
+   * Move a seleção para a próxima opção na lista.
+   */
+  async nextOption() {
+    var _a;
+    if (!this.visibleOptions || this.visibleOptions.length === 0)
+      return;
+    const isAtLastOption = this.preSelection !== undefined && this.preSelection >= this.visibleOptions.length - 1;
+    if (!isAtLastOption) {
+      this.preSelection = this.preSelection === undefined ? 0 : this.preSelection + 1;
+      this.scrollToOption(this.visibleOptions[this.preSelection]);
+      (_a = this.onOptionHover) === null || _a === void 0 ? void 0 : _a.call(this, this.preSelection);
+    }
+  }
+  /**
+   * Move a seleção para a opção anterior na lista, sem ultrapassar o início.
+   */
+  async previousOption() {
+    var _a;
+    if (!this.visibleOptions || this.visibleOptions.length === 0)
+      return;
+    const isAtFirstOption = this.preSelection !== undefined && this.preSelection <= 0;
+    if (!isAtFirstOption) {
+      this.preSelection = this.preSelection === undefined ? this.visibleOptions.length - 1 : this.preSelection - 1;
+      this.scrollToOption(this.visibleOptions[this.preSelection]);
+      (_a = this.onOptionHover) === null || _a === void 0 ? void 0 : _a.call(this, this.preSelection);
+    }
+  }
+  /**
+   * Seleciona a opção atualmente pré-selecionada.
+   */
+  async selectCurrentOption() {
+    if (this.preSelection !== undefined) {
+      this.onOptionSelect(this.visibleOptions[this.preSelection]);
+      this.preSelection = undefined;
+    }
+  }
+  /**
+   * Observa mudanças na propriedade `width` e ajusta a largura da lista.
+   *
+   * @param newValue O novo valor da largura.
+   * @param oldValue O valor anterior da largura.
+   */
+  observeWidth(newValue, oldValue) {
+    if (newValue === oldValue)
+      return;
+    if (!this._listWrapper)
+      return;
+    this._listWrapper.style.width = `${this.width}px`;
+  }
+  /**
+   * Observa mudanças na propriedade `maxWidth` e ajusta a largura máxima da lista.
+   *
+   * @param newValue O novo valor da largura máxima.
+   * @param oldValue O valor anterior da largura máxima.
+   */
+  observeMaxWidth(newValue, oldValue) {
+    if (newValue === oldValue)
+      return;
+    if (!this._listWrapper)
+      return;
+    this._listWrapper.style.maxWidth = this.maxWidth ? `${this.maxWidth}px` : '';
+  }
+  /**
+   * Gerencia a navegação por teclado na lista do combo box.
+   *
+   * - `ArrowDown`: Move para a próxima opção.
+   * - `ArrowUp`: Move para a opção anterior.
+   * - `Enter`: Seleciona a opção atual.
+   * - `Escape`: Limpa a pré-seleção.
+   *
+   * @param event O evento de teclado.
+   */
+  handleKeyDown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        event.stopPropagation();
+        this.nextOption();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        event.stopPropagation();
+        this.previousOption();
+        break;
+      case "Enter":
+        this.selectCurrentOption();
+        break;
+      case "Escape":
+        this.preSelection = undefined;
+        break;
+    }
+  }
+  buildItem(opt, index) {
+    const widthValue = this.showOptionValue && this.maxWidth > 0 ? `${this.maxWidth}px` : '';
+    opt.label = opt.label || opt.value;
+    return h("li", { tabIndex: 1, class: index === this.preSelection ? "item preselected" : "item", id: `item_${opt.value}_${index}`, key: `item_${opt.value}_${index}`, onMouseDown: () => this.onOptionSelect(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));
+  }
+  scrollToOption(opt) {
+    if (!opt || !opt.value || !this._optionsList)
+      return;
+    const index = this.visibleOptions.indexOf(opt);
+    if (index === -1)
+      return;
+    const liElem = this._optionsList.querySelector(`li#item_${CSS.escape(opt.value)}_${CSS.escape(String(index))}`);
+    if (liElem) {
+      liElem.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest"
+      });
+    }
+  }
+  componentDidLoad() {
+    this._listWrapper.style.width = `${this.width}px`;
+    this._listWrapper.style.maxWidth = this.maxWidth ? `${this.maxWidth}px` : '';
+  }
+  componentDidRender() {
+    var _a;
+    (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
+      ElementIDUtils.addIDInfoIfNotExists(elem, "itemComboBox");
+    });
+  }
+  render() {
+    return (h("section", { class: "list-container" }, 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" })), !this.showLoading && this.visibleOptions.length > 0 &&
+      this.visibleOptions.map((opt, index) => this.buildItem(opt, index))))));
+  }
+  static get watchers() { return {
+    "width": ["observeWidth"],
+    "maxWidth": ["observeMaxWidth"]
+  }; }
+  static get style() { return ezComboBoxListCss; }
+};
+
 const EzCustomFormInput$1 = class extends HTMLElement$1 {
   constructor() {
     super();
@@ -71973,6 +71999,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;
@@ -72553,6 +72582,20 @@ const EzGrid$1 = class extends HTMLElement$1 {
         .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;
@@ -72635,6 +72678,7 @@ const EzGrid$1 = class extends HTMLElement$1 {
     this._gridController.configFilterColumn(this._filterColumn);
     if (this.paginationCounterMode === 'auto')
       this._initHeaderOverflowWatcher();
+    this.initKeyboardManager();
   }
   handlePaginationChange(selectFirstRecord, paginationInfo) {
     var _a;
@@ -72701,6 +72745,7 @@ const EzGrid$1 = class extends HTMLElement$1 {
     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;
@@ -72739,6 +72784,45 @@ const EzGrid$1 = class extends HTMLElement$1 {
       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: {
@@ -75425,7 +75509,7 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-const ezPopoverCoreCss = ":host{--ez-popover__box--border-radius:var(--border--radius-medium, 12px);--ez-popover__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-popover__box--background-color:var(--background--xlight, #fff);--ez-popover__box--z-index:var(--elevation--20, 20);position:relative;display:flex;user-select:none}.popover__overlay{display:none;position:fixed;padding:0;top:0px;left:0px;width:100%;height:100vh;box-sizing:border-box;z-index:var(--elevation--16, 16)}.popover__overlay--light{background-color:rgba(var(--rgb-background--overlay), var(--opacity--bright))}.popover__overlay--medium{background-color:rgba(var(--rgb-background--overlay), var(--opacity--soft));backdrop-filter:blur(var(--background-blur--medium))}.popover__box{display:none;position:fixed;top:0;left:0;z-index:var(--ez-popover__box--z-index);flex-direction:column;height:fit-content;background-color:var(--ez-popover__box--background-color);border-radius:var(--ez-popover__box--border-radius);box-shadow:var(--ez-popover__box--box-shadow)}.popover__box--fit-content{width:fit-content}.popover__box--full-width{width:calc(100% - 10px)}";
+const ezPopoverCoreCss = ":host{--ez-popover__box--border-radius:var(--border--radius-medium, 12px);--ez-popover__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-popover__box--background-color:var(--background--xlight, #fff);--ez-popover__box--z-index:var(--most-visible, 4);position:relative;display:flex;user-select:none}.popover__overlay{display:none;position:fixed;padding:0;top:0px;left:0px;width:100%;height:100vh;box-sizing:border-box;z-index:var(--more-visible--2x, 3)}.popover__overlay--light{background-color:rgba(var(--rgb-background--overlay), var(--opacity--bright))}.popover__overlay--medium{background-color:rgba(var(--rgb-background--overlay), var(--opacity--soft));backdrop-filter:blur(var(--background-blur--medium))}.popover__box{display:none;position:fixed;top:0;left:0;z-index:var(--ez-popover__box--z-index);flex-direction:column;height:fit-content;background-color:var(--ez-popover__box--background-color);border-radius:var(--ez-popover__box--border-radius);box-shadow:var(--ez-popover__box--box-shadow)}.popover__box--fit-content{width:fit-content}.popover__box--full-width{width:calc(100% - 10px)}";
 
 const EzPopoverCore$1 = class extends HTMLElement$1 {
   constructor() {
@@ -75440,18 +75524,18 @@ const EzPopoverCore$1 = class extends HTMLElement$1 {
     this.overlayType = "light";
     this.anchorElement = undefined;
     this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
-    this.useAnchorSize = false;
-    this.minWidth = 150;
   }
-  observeOpened(newValue, oldValue) {
-    if (newValue !== oldValue) {
-      if (newValue) {
-        this.openPopover();
-      }
-      else {
-        this.hidePopover();
-      }
+  async observeOpened(newValue, oldValue) {
+    if (newValue === oldValue)
+      return;
+    if (newValue) {
+      this.openPopover();
+    }
+    else {
+      this.hidePopover();
     }
+    this.ezVisibilityChange.emit(newValue);
+    return;
   }
   /**
    * Atualiza a posição do popover.
@@ -75510,37 +75594,17 @@ const EzPopoverCore$1 = class extends HTMLElement$1 {
       verticalGap: this.parseSizePixel(top, this.options.verticalGap),
     });
   }
-  getElement(element) {
-    if (typeof element === 'string') {
-      return document.getElementById(element);
-    }
-    return element;
-  }
-  getAnchorElement() {
-    if (!this.anchorElement) {
-      return this._host;
-    }
-    if (Array.isArray(this.anchorElement)) {
-      for (const element of this.anchorElement) {
-        const htmlElement = this.getElement(element);
-        if (htmlElement) {
-          return htmlElement;
-        }
-      }
-    }
-    return this.getElement(this.anchorElement);
-  }
   async updatePositionPopover() {
     if (!this._box || !this.opened) {
       return;
     }
-    const currentAnchorElement = this.getAnchorElement();
-    if (this.useAnchorSize) {
-      const anchorSize = currentAnchorElement.getBoundingClientRect().width;
-      const width = anchorSize < this.minWidth ? this.minWidth : anchorSize;
-      this._box.style.width = `${width}px`;
+    if (!this.anchorElement) {
+      this.anchorElement = this._host;
+    }
+    if (typeof this.anchorElement === 'string') {
+      this.anchorElement = document.getElementById(this.anchorElement);
     }
-    await computePosition(currentAnchorElement, this._box, {
+    await computePosition(this.anchorElement, this._box, {
       placement: this.options.fromRight ? 'bottom-end' : 'bottom-start',
       middleware: [flip(), shift({ padding: 5 })],
       strategy: 'fixed',
@@ -75647,7 +75711,9 @@ const EzPopoverPlus$1 = class extends HTMLElement$1 {
     this.overlayType = "light";
     this.anchorElement = undefined;
     this.options = { horizontalGap: 0, verticalGap: 0, fromRight: false };
-    this.useAnchorSize = false;
+  }
+  listenerEzVisibilityChange({ detail }) {
+    this.ezVisibilityChange.emit(detail);
   }
   async observeOpened(newValue) {
     if (newValue && !this._popOverCore) {
@@ -75659,7 +75725,8 @@ const EzPopoverPlus$1 = class extends HTMLElement$1 {
    * Atualiza a posição do popover.
    */
   async updatePosition(top, left) {
-    await this._popOverCore.updatePosition(top, left);
+    var _a;
+    await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.updatePosition(top, left));
   }
   /**
    * Exibe o ez-popover.
@@ -75690,13 +75757,15 @@ const EzPopoverPlus$1 = class extends HTMLElement$1 {
    * Altera as opções.
   */
   async setOptions(options) {
-    await this._popOverCore.setOptions(options);
+    var _a;
+    await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.setOptions(options));
   }
   /**
    * Altera o elemento de ancoragem.
   */
   async setAnchorElement(anchor) {
-    await this._popOverCore.setAnchorElement(anchor);
+    var _a;
+    await ((_a = this._popOverCore) === null || _a === void 0 ? void 0 : _a.setAnchorElement(anchor));
   }
   renderPopoverCore() {
     this._popOverCore = document.createElement('ez-popover-core');
@@ -75706,12 +75775,13 @@ const EzPopoverPlus$1 = class extends HTMLElement$1 {
     this._popOverCore.boxWidth = this.boxWidth;
     this._popOverCore.overlayType = this.overlayType;
     this._popOverCore.options = this.options;
-    this._popOverCore.useAnchorSize = this.useAnchorSize;
-    this._popOverCore.addEventListener('ezVisibilityChange', ({ detail }) => {
-      this.ezVisibilityChange.emit(detail);
-      this.opened = detail;
-    });
-    this._popOverCore.appendChild(this._host.children.item(0));
+    const firstChild = this._host.children.item(0);
+    if (firstChild) {
+      this._popOverCore.appendChild(firstChild);
+    }
+    else {
+      console.warn('O slot do popover está vazio. Adicione conteúdo ao slot para exibição correta.');
+    }
     document.body.appendChild(this._popOverCore);
   }
   render() {
@@ -76052,26 +76122,7 @@ class ScrollCtrl {
   }
 }
 
-const START_HIGH_LIGHT_TAG = "<span class='card-item__highlight'>";
-const END_HIGH_LIGHT_TAG = "</span>";
-function replaceHighlight(value) {
-  const startHighlight = new RegExp(START_HIGH_LIGHT_TAG, 'g');
-  const endHighlight = new RegExp(END_HIGH_LIGHT_TAG, 'g');
-  const newValue = String(value !== null && value !== void 0 ? value : "").replace(startHighlight, '').replace(endHighlight, '');
-  return replaceQuotes(newValue);
-}
-function replaceQuotes(text) {
-  if (text == undefined) {
-    return;
-  }
-  return String(text)
-    .replace(/&amp;/g, '&')
-    .replace(/&lt;/g, '<')
-    .replace(/&gt;/g, '>')
-    .replace(/&quot;/g, '"');
-}
-
-const ezSearchCss = ":host{--ez-search--height:42px;--ez-search--width:100%;--ez-search__icon--width:48px;--ez-search--border-radius:var(--border--radius-medium, 12px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-color--xlight:var(--background--xlight, #fff);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px);--ez-search__input--background-color:var(--background--medium, #e0e0e0);--ez-search__input--border:var(--border--medium, 2px solid);--ez-search__input--border-color:var(--ez-search__input--background-color);--ez-search__input--focus--border-color:var(--color--primary, #008561);--ez-search__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-search__input--disabled--color:var(--text--disable, #AFB6C0);--ez-search__input--error--border-color:#CC2936;--ez-search__btn--color:var(--title--primary, #2B3A54);--ez-search__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-search__btn-hover--color:var(--color--primary, #4e4e4e);--ez-search__label--color:var(--title--primary, #2B3A54);--ez-search--space--medium:var(--space--medium, 12px);--ez-search--space--small:var(--space--small, 6px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-search--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;color:var(--ez-search__btn--color)}.btn:disabled{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:disabled:hover{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:hover{color:var(--ez-search__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}";
+const ezSearchCss = ":host{--ez-search--height:42px;--ez-search--width:100%;--ez-search__icon--width:48px;--ez-search--border-radius:var(--border--radius-medium, 12px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-color--xlight:var(--background--xlight, #fff);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px);--ez-search__input--background-color:var(--background--medium, #e0e0e0);--ez-search__input--border:var(--border--medium, 2px solid);--ez-search__input--border-color:var(--ez-search__input--background-color);--ez-search__input--focus--border-color:var(--color--primary, #008561);--ez-search__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-search__input--disabled--color:var(--text--disable, #AFB6C0);--ez-search__input--error--border-color:#CC2936;--ez-search__btn--color:var(--title--primary, #2B3A54);--ez-search__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-search__btn-hover--color:var(--color--primary, #4e4e4e);--ez-search__label--color:var(--title--primary, #2B3A54);--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search--space--medium:var(--space--medium, 12px);--ez-search--space--small:var(--space--small, 6px);--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--small, 6px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-search--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-search__list-min-width);overflow:auto;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:350px;min-width:150px;background-color:var(--ez-search--background-color--xlight);border-radius:var(--ez-search--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000)}.list-options{margin-top:0px;box-sizing:border-box;width:100%;height:100%;padding:0;display:flex;flex-direction:column;scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--scrollbar--background);width:var(--space--small);max-width:var(--space--small);min-width:var(--space--small);height:var(--space--small);max-height:var(--space--small);min-height:var(--space--small)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__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-search--border-radius-small);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size);line-height:var(--ez-search--line-height)}.item__label{font-weight:var(--ez-search--font-weight--medium)}.item__label--bold{font-weight:var(--ez-search--font-weight--large)}.item__value{text-align:center;color:var(--ez-search__list-text--primary);font-weight:var(--ez-search--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-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--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-search__list-title--primary);border-top:3px solid transparent}.item__list>li:hover{background-color:var(--ez-search--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-search__btn--color)}.btn:disabled{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:disabled:hover{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:hover{color:var(--ez-search__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@supports not (scrollbar-width: thin){.item{padding-right:8px}}";
 
 const EzSearch$1 = class extends HTMLElement$1 {
   constructor() {
@@ -76207,6 +76258,20 @@ const EzSearch$1 = class extends HTMLElement$1 {
   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();
+      });
+    }
+  }
   async handleValueAsString(value) {
     if (this.getSelectedOption(value)) {
       this.setInputValue();
@@ -76220,6 +76285,49 @@ const EzSearch$1 = class extends HTMLElement$1 {
     this.ezChange.emit(this.value);
     this._currentValue = this.value;
   }
+  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$1.objectToString(firstValue || {}) !== ObjectUtils$1.objectToString(secondValue || {});
   }
@@ -76234,14 +76342,24 @@ const EzSearch$1 = class extends HTMLElement$1 {
   getText() {
     const currentValue = this.getSelectedOption(this._currentValue);
     const text = this.getFormattedText(currentValue);
-    return replaceQuotes(text);
+    return this.replaceQuotes(text);
+  }
+  replaceQuotes(text) {
+    if (text == undefined) {
+      return;
+    }
+    return String(text)
+      .replace(/&amp;/g, '&')
+      .replace(/&lt;/g, '<')
+      .replace(/&gt;/g, '>')
+      .replace(/&quot;/g, '"');
   }
   getSelectedOption(value) {
     if (typeof value === "string" || value instanceof String) {
       return this._visibleOptions.find(o => o.value === value);
     }
     if (value) {
-      return Object.assign(Object.assign({}, value), { value: replaceHighlight(value === null || value === void 0 ? void 0 : value.value), label: replaceHighlight(value === null || value === void 0 ? void 0 : value.label) });
+      return Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value === null || value === void 0 ? void 0 : value.value), label: this.replaceHighlight(value === null || value === void 0 ? void 0 : value.label) });
     }
     return value;
   }
@@ -76279,19 +76397,75 @@ const EzSearch$1 = class extends HTMLElement$1 {
     }
     return 0;
   }
+  createOption(detail) {
+    let { key, title } = detail;
+    const startHighlight = new RegExp(this._startHighlightTag, 'g');
+    const endHighlight = new RegExp(this._endHighlightTag, 'g');
+    title = StringUtils$1.decodeHtmlEntities(title);
+    const option = {
+      value: key === null || key === void 0 ? void 0 : key.replace(startHighlight, '').replace(endHighlight, ''),
+      label: title === null || title === void 0 ? void 0 : title.replace(startHighlight, '').replace(endHighlight, '')
+    };
+    this.selectOption(option);
+  }
+  buildItem(opt, index) {
+    opt.label = opt.label || opt.value;
+    const card = {
+      key: opt.value,
+      title: opt.label,
+      details: opt.details
+    };
+    return h("div", { style: { "height": "100%" }, class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.createOption(card), onMouseOver: () => this._preSelection = index }, h("ez-card-item", { item: card, compacted: true, enableKey: this.showOptionValue }));
+  }
   showOptions() {
     if (!this.enabled)
       return;
     if (this.isOptionsVisible()) {
       return;
     }
-    this._ezPopOverPlusElement.showUnder(this._textInput);
+    if (!!this._resizeObserver)
+      this._resizeObserver.observe(this._textInput);
+    this._floatingID = FloatingManager.float(this._listWrapper, this._listContainer, { autoClose: false, isFixed: true, backClickListener: () => this.hideOptions() });
+    this.setFocus();
+    window.requestAnimationFrame(() => {
+      this.updateListPosition();
+      if (!this.listOptionsPosition) {
+        this._listWrapper.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      }
+    });
   }
   hideOptions() {
-    this._ezPopOverPlusElement.hide();
+    if (this._floatingID !== undefined) {
+      FloatingManager.close(this._floatingID);
+    }
+    this._floatingID = undefined;
+    if (!!this._resizeObserver)
+      this._resizeObserver.unobserve(this._textInput);
   }
   isOptionsVisible() {
-    return this._ezPopOverPlusElement.opened;
+    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(`div#item_${opt.value.replace(/([ #;&,.+*~':"!^$[\]()=<>|/\\])/g, '\\$1')}`)
+        : undefined;
+      if (liElem) {
+        liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
+    });
   }
   selectCurrentOption() {
     if (this._preSelection !== undefined) {
@@ -76334,11 +76508,17 @@ const EzSearch$1 = class extends HTMLElement$1 {
     this._source = [];
     this.updateVisibleOptions();
   }
+  replaceHighlight(value) {
+    const startHighlight = new RegExp(this._startHighlightTag, 'g');
+    const endHighlight = new RegExp(this._endHighlightTag, 'g');
+    const newValue = String(value !== null && value !== void 0 ? value : "").replace(startHighlight, '').replace(endHighlight, '');
+    return this.replaceQuotes(newValue);
+  }
   selectOption(newOption, focusOnInput = true) {
     var _a, _b;
     const currentValue = this.getSelectedOption(this.value);
-    const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.value), label: replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.label) });
-    const newOptionsFormatted = Object.assign(Object.assign({}, newOptionsReplaced), { value: replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value), label: replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.label) });
+    const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: this.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.value), label: this.replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.label) });
+    const newOptionsFormatted = Object.assign(Object.assign({}, newOptionsReplaced), { value: this.replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value), label: this.replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.label) });
     if ((((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOptionsFormatted === null || newOptionsFormatted === void 0 ? void 0 : newOptionsFormatted.value) === null || _b === void 0 ? void 0 : _b.toString()))
       || (currentValue == undefined && newOptionsFormatted != undefined && "value" in newOptionsFormatted)) {
       const adjustedOpt = !(newOptionsFormatted === null || newOptionsFormatted === void 0 ? void 0 : newOptionsFormatted.value) ? undefined : newOptionsFormatted;
@@ -76448,7 +76628,7 @@ const EzSearch$1 = class extends HTMLElement$1 {
       this.showNoResultMessage();
       return;
     }
-    this._currentValue = value ? Object.assign(Object.assign({}, value), { value: replaceHighlight(value.value), label: replaceHighlight(value.label) }) : value;
+    this._currentValue = value ? Object.assign(Object.assign({}, value), { value: this.replaceHighlight(value.value), label: this.replaceHighlight(value.label) }) : value;
     this.value = this._currentValue;
     this.setTextInputValue();
   }
@@ -76457,7 +76637,7 @@ const EzSearch$1 = class extends HTMLElement$1 {
       if (this.value === undefined || this.value === null)
         return;
       const textValue = (typeof this.value === 'string') ? this.value : this.getFormattedText(this.value);
-      this._textInput.value = replaceQuotes(textValue);
+      this._textInput.value = this.replaceQuotes(textValue);
     }
   }
   loadOptionValue(argument) {
@@ -76494,7 +76674,7 @@ const EzSearch$1 = class extends HTMLElement$1 {
       return;
     }
     let text = this.getFormattedText(this.value);
-    text = replaceQuotes(text);
+    text = this.replaceQuotes(text);
     this._textInput.value = text;
   }
   //---------------------------------------------
@@ -76521,6 +76701,9 @@ const EzSearch$1 = class extends HTMLElement$1 {
   }
   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, "itemSearch");
     });
@@ -76532,6 +76715,10 @@ const EzSearch$1 = class extends HTMLElement$1 {
       window.requestAnimationFrame(() => {
         if (!Array.isArray(entries) || !entries.length)
           return;
+        const { clientWidth } = this._listContainer;
+        if (clientWidth > 0 && !!this._listWrapper) {
+          this._listWrapper.style.width = `${clientWidth}px`;
+        }
       });
     });
     await this.handleInitialValue();
@@ -76598,7 +76785,7 @@ const EzSearch$1 = class extends HTMLElement$1 {
       this._changeDeboucingTimeout = null;
     }
   }
-  async keyDownHandler(event) {
+  keyDownHandler(event) {
     this._tabPressed = false;
     if (event.ctrlKey) {
       if (event.key === "f" || event.key === "F") {
@@ -76614,20 +76801,15 @@ const EzSearch$1 = class extends HTMLElement$1 {
     switch (event.key) {
       case "ArrowDown":
         event.stopPropagation();
-        if (this.canShowListOptions()) {
+        if (this.canShowListOptions())
           event.preventDefault();
-        }
-        if (!this.isOptionsVisible()) {
-          this.showOptions();
-        }
-        await this._searchList.nextOption();
+        this.nextOption();
         break;
       case "ArrowUp":
         event.stopPropagation();
-        if (this.canShowListOptions()) {
+        if (this.canShowListOptions())
           event.preventDefault();
-        }
-        await this._searchList.previousOption();
+        this.previousOption();
         break;
       case "Enter":
         this.handleEventPropagation(event);
@@ -76649,7 +76831,7 @@ const EzSearch$1 = class extends HTMLElement$1 {
   }
   //O evento deve ter sua propagação interrompida, apenas se a lista de opções estiver sendo exibida.
   handleEventPropagation(event) {
-    if (this._ezPopOverPlusElement.opened && this.stopPropagateEnterKeyEvent) {
+    if (this._listContainer.hasChildNodes() && this.stopPropagateEnterKeyEvent) {
       event.stopPropagation();
     }
   }
@@ -76661,17 +76843,17 @@ const EzSearch$1 = class extends HTMLElement$1 {
     return !this._showLoading && this._visibleOptions.length > 0;
   }
   canShowLoadSpinDescription() {
-    return this._showLoadingDescription && !this._ezPopOverPlusElement.opened;
-  }
-  onChangePreSelection(value) {
-    this._preSelection = value;
+    return this._showLoadingDescription && this._floatingID == undefined;
   }
   render() {
     var _a;
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
     return (h(Host, null, h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: "leftIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, this.canShowLoadSpinDescription() ? h("div", { class: "message__loading" }) : h("ez-icon", { iconName: "search" })), (((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value) || this.ensureClearButtonVisible)
       ? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
-      : undefined), h("ez-popover-plus", { ref: elem => this._ezPopOverPlusElement = elem, autoClose: false, overlayType: "none", useAnchorSize: true, anchorElement: [this._textInput, this.el] }, h("search-list", { ref: (ref) => this._searchList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this._textEmptyList, canShowListOptions: this.canShowListOptions(), value: this.value, showOptionValue: this.showOptionValue, preSelection: this._preSelection, onChangeValue: ({ detail }) => this.selectOption(detail), onChangePreSelection: ({ detail }) => this.onChangePreSelection(detail) }))));
+      : undefined), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
+      && this._visibleOptions.length === 0
+      && h("div", { class: "message" }, h("span", { class: "message__no-result" }, this._textEmptyList)), this._showLoading
+      && h("div", { class: "message" }, h("div", { class: "message__loading" })), h("span", { class: "item__value item__value--hidden", ref: elem => this._itemValueBasis = elem }), this.canShowListOptions() && this._visibleOptions.map((opt, index) => this.buildItem(opt, index)))))));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -80386,79 +80568,6 @@ const MultiSelectionBoxMessage$1 = class extends HTMLElement$1 {
   static get style() { return multiSelectionBoxMessageCss; }
 };
 
-const searchListCss = ":host{--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--small, 6px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px)}.list-options{position:relative;z-index:var(--more-visible, 2);margin:var(--space--small) 0px;padding:0px;padding-inline-start:0px;box-sizing:border-box;width:100%;height:100%;max-height:350px;min-width:150px;display:flex;flex-direction:column;scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--scrollbar--background);width:var(--space--small);max-width:var(--space--small);min-width:var(--space--small);height:var(--space--small);max-height:var(--space--small);min-height:var(--space--small)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__scrollbar--color-clicked)}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;margin:var(--space--medium) 0px;min-height:var(--ez-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--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-search__list-title--primary);border-top:3px solid transparent}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size);line-height:var(--ez-search--line-height)}.item__label{font-weight:var(--ez-search--font-weight--medium)}.item__label--bold{font-weight:var(--ez-search--font-weight--large)}.item__value{text-align:center;color:var(--ez-search__list-text--primary);font-weight:var(--ez-search--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}.item__list>li:hover{background-color:var(--ez-search--background-medium)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-search--border-radius-small);gap:var(--space--small, 6px)}.preselected{background-color:var(--background--medium)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@supports not (scrollbar-width: thin){.item{padding-right:8px}}";
-
-const SearchList$1 = class extends HTMLElement$1 {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.changeValue = createEvent(this, "changeValue", 7);
-    this.changePreSelection = createEvent(this, "changePreSelection", 7);
-    this._startHighlightTag = "<span class='card-item__highlight'>";
-    this._endHighlightTag = "</span>";
-    this.showLoading = undefined;
-    this.visibleOptions = [];
-    this.textEmptyList = undefined;
-    this.canShowListOptions = undefined;
-    this.value = undefined;
-    this.showOptionValue = true;
-    this.preSelection = undefined;
-  }
-  async nextOption() {
-    const newPreSelection = this.preSelection === undefined ? 0 : Math.min(this.preSelection + 1, this.visibleOptions.length - 1);
-    this.changePreSelection.emit(newPreSelection);
-    this.scrollToOption(this.visibleOptions[newPreSelection]);
-  }
-  async previousOption() {
-    const newPreSelection = this.preSelection === undefined ? 0 : Math.max(this.preSelection - 1, 0);
-    this.changePreSelection.emit(newPreSelection);
-    this.scrollToOption(this.visibleOptions[newPreSelection]);
-  }
-  selectOption(newOption) {
-    const newOptionsReplaced = Object.assign(Object.assign({}, newOption), { value: replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.value), label: replaceHighlight(newOption === null || newOption === void 0 ? void 0 : newOption.label) });
-    const newOptionsFormatted = Object.assign(Object.assign({}, newOptionsReplaced), { value: replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.value), label: replaceQuotes(newOptionsReplaced === null || newOptionsReplaced === void 0 ? void 0 : newOptionsReplaced.label) });
-    this.changeValue.emit(newOptionsFormatted);
-  }
-  createOption(detail) {
-    let { key, title } = detail;
-    const startHighlight = new RegExp(this._startHighlightTag, 'g');
-    const endHighlight = new RegExp(this._endHighlightTag, 'g');
-    title = StringUtils$1.decodeHtmlEntities(title);
-    const option = {
-      value: key === null || key === void 0 ? void 0 : key.replace(startHighlight, '').replace(endHighlight, ''),
-      label: title === null || title === void 0 ? void 0 : title.replace(startHighlight, '').replace(endHighlight, '')
-    };
-    this.selectOption(option);
-  }
-  scrollToOption(opt) {
-    window.requestAnimationFrame(() => {
-      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value)
-        ? this._optionsList.querySelector(`div#item_${opt.value.replace(/([ #;&,.+*~':"!^$[\]()=<>|/\\])/g, '\\$1')}`)
-        : undefined;
-      if (liElem) {
-        liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
-      }
-    });
-  }
-  buildItem(opt, index) {
-    opt.label = opt.label || opt.value;
-    const card = {
-      key: opt.value,
-      title: opt.label,
-      details: opt.details
-    };
-    return h("div", { style: { "height": "100%" }, class: index === this.preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.createOption(card), onMouseOver: () => this.changePreSelection.emit(index) }, h("ez-card-item", { item: card, compacted: true, enableKey: this.showOptionValue }));
-  }
-  render() {
-    return (h(Host, null, 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.canShowListOptions && this.visibleOptions.map((opt, index) => this.buildItem(opt, index)))));
-  }
-  static get style() { return searchListCss; }
-};
-
 const EzActionsButton = /*@__PURE__*/proxyCustomElement(EzActionsButton$1, [1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32]}]);
 const EzAlert = /*@__PURE__*/proxyCustomElement(EzAlert$1, [1,"ez-alert",{"alertType":[513,"alert-type"]}]);
 const EzAlertList = /*@__PURE__*/proxyCustomElement(EzAlertList$1, [1,"ez-alert-list",{"alerts":[1040],"enableDragAndDrop":[516,"enable-drag-and-drop"],"enableExpand":[516,"enable-expand"],"itemRightSlotBuilder":[16],"opened":[1540],"expanded":[1540],"_container":[32]}]);
@@ -80472,7 +80581,8 @@ const EzChart = /*@__PURE__*/proxyCustomElement(EzChart$1, [1,"ez-chart",{"type"
 const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[1540],"mode":[513],"compact":[4]}]);
 const EzChip = /*@__PURE__*/proxyCustomElement(EzChip$1, [1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"showNativeTooltip":[4,"show-native-tooltip"]}]);
 const EzCollapsibleBox = /*@__PURE__*/proxyCustomElement(EzCollapsibleBox$1, [1,"ez-collapsible-box",{"value":[1540],"boxBordered":[4,"box-bordered"],"label":[513],"subtitle":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32]}]);
-const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"limitCharsToSearch":[2,"limit-chars-to-search"],"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"stopPropagateEnterKeyEvent":[4,"stop-propagate-enter-key-event"],"canShowError":[516,"can-show-error"],"mode":[513],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"],"autoFocus":[4,"auto-focus"],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32]},[[11,"scroll","scrollListener"]]]);
+const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"limitCharsToSearch":[2,"limit-chars-to-search"],"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"stopPropagateEnterKeyEvent":[4,"stop-propagate-enter-key-event"],"canShowError":[516,"can-show-error"],"mode":[513],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"],"autoFocus":[4,"auto-focus"],"isOpen":[32],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32],"_textInputReady":[32]}]);
+const EzComboBoxList = /*@__PURE__*/proxyCustomElement(EzComboBoxList$1, [1,"ez-combo-box-list",{"showLoading":[4,"show-loading"],"visibleOptions":[16],"textEmptyList":[1,"text-empty-list"],"showOptionValue":[4,"show-option-value"],"preSelection":[2,"pre-selection"],"maxWidth":[2,"max-width"],"width":[2],"onOptionSelect":[16],"onOptionHover":[16]},[[0,"keydown","handleKeyDown"]]]);
 const EzCustomFormInput = /*@__PURE__*/proxyCustomElement(EzCustomFormInput$1, [2,"ez-custom-form-input",{"customEditor":[16],"formViewField":[16],"value":[1032],"detailContext":[1,"detail-context"],"builderFallback":[16],"selectedRecord":[16],"gui":[32]}]);
 const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"canShowError":[516,"can-show-error"],"autoFocus":[4,"auto-focus"]}]);
 const EzDateTimeInput = /*@__PURE__*/proxyCustomElement(EzDateTimeInput$1, [1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"canShowError":[516,"can-show-error"],"autoFocus":[4,"auto-focus"]}]);
@@ -80493,12 +80603,12 @@ const EzModalContainer = /*@__PURE__*/proxyCustomElement(EzModalContainer$1, [6,
 const EzMultiSelectionList = /*@__PURE__*/proxyCustomElement(EzMuiltiSelectionList, [2,"ez-multi-selection-list",{"columnName":[1,"column-name"],"dataSource":[16],"useOptions":[1028,"use-options"],"options":[1040],"isTextSearch":[4,"is-text-search"],"filteredOptions":[32],"displayOptions":[32],"viewScenario":[32],"displayOptionToCheckAllItems":[32]}]);
 const EzNumberInput = /*@__PURE__*/proxyCustomElement(EzNumberInput$1, [1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"canShowError":[516,"can-show-error"],"errorMessage":[1537,"error-message"],"allowNegative":[4,"allow-negative"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513],"autoFocus":[4,"auto-focus"],"_value":[32]}]);
 const EzPopover = /*@__PURE__*/proxyCustomElement(EzPopover$1, [1,"ez-popover",{"autoClose":[516,"auto-close"],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"]}]);
-const EzPopoverCore = /*@__PURE__*/proxyCustomElement(EzPopoverCore$1, [1,"ez-popover-core",{"autoClose":[516,"auto-close"],"boxWidth":[513,"box-width"],"opened":[1540],"overlayType":[513,"overlay-type"],"anchorElement":[1537,"anchor-element"],"options":[1040],"useAnchorSize":[516,"use-anchor-size"],"minWidth":[514,"min-width"]}]);
-const EzPopoverPlus = /*@__PURE__*/proxyCustomElement(EzPopoverPlus$1, [1,"ez-popover-plus",{"autoClose":[516,"auto-close"],"boxWidth":[513,"box-width"],"opened":[1540],"overlayType":[513,"overlay-type"],"anchorElement":[1537,"anchor-element"],"options":[1040],"useAnchorSize":[516,"use-anchor-size"]}]);
+const EzPopoverCore = /*@__PURE__*/proxyCustomElement(EzPopoverCore$1, [1,"ez-popover-core",{"autoClose":[516,"auto-close"],"boxWidth":[513,"box-width"],"opened":[1540],"overlayType":[513,"overlay-type"],"anchorElement":[1537,"anchor-element"],"options":[1040]}]);
+const EzPopoverPlus = /*@__PURE__*/proxyCustomElement(EzPopoverPlus$1, [1,"ez-popover-plus",{"autoClose":[516,"auto-close"],"boxWidth":[513,"box-width"],"opened":[1540],"overlayType":[513,"overlay-type"],"anchorElement":[1537,"anchor-element"],"options":[1040]},[[0,"ezVisibilityChange","listenerEzVisibilityChange"]]]);
 const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"],"enabledScroll":[4,"enabled-scroll"]}]);
 const EzRadioButton = /*@__PURE__*/proxyCustomElement(EzRadioButton$1, [1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]);
 const EzScroller = /*@__PURE__*/proxyCustomElement(EzScroller$1, [1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]);
-const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"contextProperties":[8,"context-properties"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"stopPropagateEnterKeyEvent":[4,"stop-propagate-enter-key-event"],"mode":[513],"canShowError":[516,"can-show-error"],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"],"ignoreLimitCharsToSearch":[4,"ignore-limit-chars-to-search"],"options":[1040],"suppressSearch":[4,"suppress-search"],"ensureClearButtonVisible":[4,"ensure-clear-button-visible"],"suppressPreLoad":[4,"suppress-pre-load"],"autoFocus":[4,"auto-focus"],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_showLoadingDescription":[32],"_criteria":[32]}]);
+const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"contextProperties":[8,"context-properties"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"stopPropagateEnterKeyEvent":[4,"stop-propagate-enter-key-event"],"mode":[513],"canShowError":[516,"can-show-error"],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"],"ignoreLimitCharsToSearch":[4,"ignore-limit-chars-to-search"],"options":[1040],"suppressSearch":[4,"suppress-search"],"ensureClearButtonVisible":[4,"ensure-clear-button-visible"],"suppressPreLoad":[4,"suppress-pre-load"],"autoFocus":[4,"auto-focus"],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_showLoadingDescription":[32],"_criteria":[32]},[[11,"scroll","scrollListener"]]]);
 const EzSidebarButton = /*@__PURE__*/proxyCustomElement(EzSidebarButton$1, [1,"ez-sidebar-button"]);
 const EzSidebarNavigator = /*@__PURE__*/proxyCustomElement(EzSidebarNavigator$1, [1,"ez-sidebar-navigator",{"type":[1],"mode":[1025],"size":[1],"isResponsive":[4,"is-responsive"],"titleMenu":[1,"title-menu"],"showCollapseMenu":[4,"show-collapse-menu"],"showFixedButton":[4,"show-fixed-button"],"open":[32]}]);
 const EzSkeleton = /*@__PURE__*/proxyCustomElement(EzSkeleton$1, [0,"ez-skeleton",{"count":[2],"variant":[1],"width":[1],"height":[1],"marginBottom":[1,"margin-bottom"],"animation":[1]}]);
@@ -80517,7 +80627,6 @@ const EzUpload = /*@__PURE__*/proxyCustomElement(EzUpload$1, [1,"ez-upload",{"la
 const EzViewStack = /*@__PURE__*/proxyCustomElement(EzViewStack$1, [0,"ez-view-stack"]);
 const FilterColumn = /*@__PURE__*/proxyCustomElement(FilterColumn$1, [0,"filter-column",{"opened":[4],"columnName":[1,"column-name"],"columnLabel":[1,"column-label"],"gridHeaderHidden":[4,"grid-header-hidden"],"noHeaderTaskBar":[1028,"no-header-task-bar"],"dataSource":[16],"dataUnit":[16],"options":[1040],"selectedItems":[32],"fieldDescriptor":[32],"useOptions":[32],"isTextSearch":[32]}]);
 const MultiSelectionBoxMessage = /*@__PURE__*/proxyCustomElement(MultiSelectionBoxMessage$1, [0,"multi-selection-box-message",{"message":[1]}]);
-const SearchList = /*@__PURE__*/proxyCustomElement(SearchList$1, [1,"search-list",{"showLoading":[4,"show-loading"],"visibleOptions":[16],"textEmptyList":[1,"text-empty-list"],"canShowListOptions":[4,"can-show-list-options"],"value":[1],"showOptionValue":[4,"show-option-value"],"preSelection":[2,"pre-selection"]}]);
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {
     [
@@ -80535,6 +80644,7 @@ const defineCustomElements = (opts) => {
   EzChip,
   EzCollapsibleBox,
   EzComboBox,
+  EzComboBoxList,
   EzCustomFormInput,
   EzDateInput,
   EzDateTimeInput,
@@ -80578,8 +80688,7 @@ const defineCustomElements = (opts) => {
   EzUpload,
   EzViewStack,
   FilterColumn,
-  MultiSelectionBoxMessage,
-  SearchList
+  MultiSelectionBoxMessage
     ].forEach(cmp => {
       if (!customElements.get(cmp.is)) {
         customElements.define(cmp.is, cmp, opts);
@@ -80588,4 +80697,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzChart, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzCustomFormInput, EzDateInput, EzDateTimeInput, EzDialog, EzDoubleList, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopoverCore, EzPopoverPlus, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzSidebarNavigator, EzSkeleton, EzSplitButton, EzSplitItem, EzSplitPanel, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTooltip, EzTree, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, SearchList, defineCustomElements };
+export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzChart, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzComboBoxList, EzCustomFormInput, EzDateInput, EzDateTimeInput, EzDialog, EzDoubleList, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopoverCore, EzPopoverPlus, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzSidebarNavigator, EzSkeleton, EzSplitButton, EzSplitItem, EzSplitPanel, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTooltip, EzTree, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, defineCustomElements };