@sankhyalabs/ezui 5.20.0-dev.2 → 5.20.0-dev.4

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

@@ -1,32 +1,13 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
 import { C as CSSVarsUtils } from './CSSVarsUtils-a97cfa29.js';
-import { ObjectUtils, StringUtils, FloatingManager, ElementIDUtils } from '@sankhyalabs/core';
-import { A as ApplicationUtils } from './ApplicationUtils-eaf91331.js';
-import './DialogType-54a62731.js';
-import './CheckMode-bdb2ec19.js';
-import { R as REQUIRED_INFO } from './constants-4e0d35b7.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
 
-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--medium, 12px);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);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;background-color:var(--ez-search--background-color--xlight);border-radius:var(--ez-search--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);padding:var(--ez-search--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-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--ez-search__scrollbar--color-background);width:var(--ez-search__scrollbar--width);max-width:var(--ez-search__scrollbar--width);min-width:var(--ez-search__scrollbar--width)}.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);padding:var(--ez-search--space--small);min-height:var(--ez-search__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-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:unset;color:var(--ez-search__btn-disabled--color)}.btn:disabled:hover{cursor:unset;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)}}";
+const ezSearchCss = ":host{width:100%}";
 
 const EzSearch = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ezChange = createEvent(this, "ezChange", 7);
-    this._changeDeboucingTimeout = null;
-    this._limitCharsToSearch = 3;
-    this._deboucingTime = 300;
-    this._maxWidthValue = 0;
-    this._tabPressed = false;
-    this._textEmptyList = "Nenhum resultado encontrado";
-    this._textEmptySearch = "Nenhum resultado de {0} encontrado";
-    this._lookupMode = false;
-    this._startHighlightTag = "<span class='card-item__highlight'>";
-    this._endHighlightTag = "</span>";
-    this._preSelection = undefined;
-    this._visibleOptions = undefined;
-    this._startLoading = false;
-    this._showLoading = true;
-    this._criteria = undefined;
     this.value = undefined;
     this.label = undefined;
     this.enabled = true;
@@ -41,82 +22,28 @@ const EzSearch = class {
     this.listOptionsPosition = undefined;
     this.isTextSearch = false;
     this.ignoreLimitCharsToSearch = false;
-    this.options = undefined;
-    this.suppressSearch = false;
   }
   observeErrorMessage() {
-    var _a;
-    if (this._textInput) {
-      this._textInput.errorMessage = this.errorMessage;
-      if (!((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.trim())) {
-        this.setInputValue();
-      }
-    }
-  }
-  observeValue(newValue, oldValue) {
-    if (this._textInput && newValue != oldValue) {
-      try {
-        if (newValue === "string") {
-          this.setInputValue();
-          return;
-        }
-        const newValueSelected = this.getSelectedOption(newValue);
-        const oldValueSelected = this.getSelectedOption(oldValue);
-        const currentValue = this.getSelectedOption(this.value);
-        if (this.isDifferentValues(currentValue, newValueSelected)) {
-          this.value = newValueSelected;
-        }
-        if (this.isDifferentValues(newValueSelected, oldValueSelected)) {
-          this.setInputValue();
-          const valueEmitted = newValueSelected === null ? undefined : newValueSelected;
-          if (!this._lookupMode) {
-            this.ezChange.emit(valueEmitted);
-          }
-        }
-        this.resetOptions();
-      }
-      finally {
-        this._lookupMode = false;
-      }
+    if (this._comboElement) {
+      this._comboElement.errorMessage = this.errorMessage;
     }
   }
-  observeOptions(newOptions, oldOptions) {
-    if ((newOptions === null || newOptions === void 0 ? void 0 : newOptions.join('')) === (oldOptions === null || oldOptions === void 0 ? void 0 : oldOptions.join('')))
-      return;
-    this.loadOptions(SearchMode.PRELOAD);
-  }
-  /*
-  * Retorna uma promise com o valor da opção selecionada,
-  * que será resolvida quando o backend devolver este dado.
-  */
-  async getValueAsync() {
-    if (!this._showLoading) {
-      return new Promise(resolve => resolve(this.value));
+  observeValue() {
+    if (this._comboElement) {
+      this._comboElement.value = this.value;
     }
-    return new Promise(resolve => {
-      let id = setInterval(() => {
-        if (!this._showLoading) {
-          clearInterval(id);
-          resolve(this.value);
-        }
-      }, 100);
-    });
   }
   /**
-   * Aplica o foco no campo.
-   */
+    * Aplica o foco no campo.
+    */
   async setFocus() {
-    if (this._textInput) {
-      this._textInput.setFocus();
-    }
+    this._comboElement.setFocus();
   }
   /**
-   * Remove o foco do campo.
-   */
+    * Remove o foco do campo.
+    */
   async setBlur() {
-    if (this._textInput) {
-      this._textInput.setBlur();
-    }
+    this._comboElement.setBlur();
   }
   /**
    * Retorna se o conteúdo é inválido.
@@ -128,546 +55,39 @@ const EzSearch = class {
    * Limpa o valor do campo de pesquisa
    */
   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: (this.errorMessage || !this.canShowError || this.mode === "slim") ? 6 : -13
-    };
-  }
-  isDifferentValues(firstValue, secondValue) {
-    return ObjectUtils.objectToString(firstValue || {}) !== ObjectUtils.objectToString(secondValue || {});
-  }
-  getFormattedText(currentValue) {
-    if (currentValue == undefined) {
-      return;
-    }
-    if (!this.showSelectedValue || currentValue.value == undefined) {
-      return currentValue.label;
-    }
-    return currentValue.label ? `${currentValue.value} - ${currentValue.label}` : currentValue.value;
-  }
-  getText() {
-    const currentValue = this.getSelectedOption(this.value);
-    const text = this.getFormattedText(currentValue);
-    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);
-    }
-    return value;
-  }
-  updateVisibleOptions() {
-    let opts = this._source || [];
-    if (this.suppressEmptyOption) {
-      this._visibleOptions = opts;
-    }
-    else {
-      this._visibleOptions = [{ value: undefined, label: "" }].concat(opts);
-    }
-    this._maxWidthValue = this.getMaxWidthValue();
-  }
-  getMaxWidthValue() {
-    var _a;
-    const arrValues = [];
-    (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.forEach(opt => {
-      const widthValue = this.getWidthValue(opt.value);
-      if (!arrValues.includes(widthValue)) {
-        arrValues.push(widthValue);
-      }
-    });
-    return arrValues.length > 1 ? Math.max(...arrValues) : 0;
-  }
-  getWidthValue(value) {
-    if (this._itemValueBasis != undefined) {
-      const span = this._itemValueBasis;
-      if (value != undefined) {
-        span.innerHTML = value;
-        return span.clientWidth > 0 ? (span.clientWidth + 2) : 0;
-      }
-      else {
-        span.innerHTML = "";
-      }
-    }
-    return 0;
-  }
-  createOption(detail) {
-    let { key, title } = detail;
-    const startHighlight = new RegExp(this._startHighlightTag, 'g');
-    const endHighlight = new RegExp(this._endHighlightTag, 'g');
-    title = StringUtils.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%" }, onMouseDown: () => this.createOption(card), onMouseOver: () => this._preSelection = index }, h("ez-card-item", { item: card }));
-  }
-  showOptions() {
-    if (!this.enabled)
-      return;
-    if (this.isOptionsVisible()) {
-      return;
-    }
-    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() {
-    if (this._floatingID !== undefined) {
-      FloatingManager.close(this._floatingID);
-    }
-    this._floatingID = undefined;
-    if (!!this._resizeObserver)
-      this._resizeObserver.unobserve(this._textInput);
-  }
-  isOptionsVisible() {
-    return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
-  }
-  nextOption() {
-    if (!this.isOptionsVisible()) {
-      return;
-    }
-    this.showOptions();
-    this._preSelection = this._preSelection === undefined ? 0 : Math.min(this._preSelection + 1, this._visibleOptions.length - 1);
-    this.scrollToOption(this._visibleOptions[this._preSelection]);
-  }
-  previousOption() {
-    this._preSelection = this._preSelection === undefined ? 0 : Math.max(this._preSelection - 1, 0);
-    this.scrollToOption(this._visibleOptions[this._preSelection]);
-  }
-  scrollToOption(opt) {
-    window.requestAnimationFrame(() => {
-      const liElem = (opt === null || opt === void 0 ? void 0 : opt.value) ? this._optionsList.querySelector(`li#item_${opt.value.replace(/[<>\[\]#=]/g, '\\$&').replace(/:/g, '\\:')}`) : undefined;
-      if (liElem)
-        liElem.scrollIntoView({ behavior: "smooth", block: "nearest" });
-    });
-  }
-  selectCurrentOption() {
-    if (this._preSelection !== undefined) {
-      this.selectOption(this._visibleOptions[this._preSelection]);
-      this._preSelection = undefined;
-    }
-    else {
-      this.controlListWithOnlyOne();
-    }
-  }
-  updateSource(source) {
-    this._startLoading = false;
-    if (source instanceof Promise) {
-      this._showLoading = true;
-      source.then(result => {
-        this._showLoading = false;
-        this.updateSource(result);
-      }).catch(() => this._showLoading = false);
-      this.updateVisibleOptions();
-    }
-    else {
-      this._showLoading = false;
-      if (Array.isArray(source)) {
-        this._source = source;
-        this.updateVisibleOptions();
-        if (this._tabPressed) {
-          this._tabPressed = false;
-          this.controlEmptySearch();
-        }
-      }
-      else {
-        this.selectOption(source);
-      }
-    }
-  }
-  clearSource() {
-    this._source = [];
-    this.updateVisibleOptions();
-  }
-  selectOption(newOption) {
     var _a, _b;
-    const currentValue = this.getSelectedOption(this.value);
-    if ((((_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) === null || _a === void 0 ? void 0 : _a.toString()) !== ((_b = newOption === null || newOption === void 0 ? void 0 : newOption.value) === null || _b === void 0 ? void 0 : _b.toString()))
-      || (currentValue == undefined && newOption != undefined && "value" in newOption)) {
-      const adjustedOpt = !(newOption === null || newOption === void 0 ? void 0 : newOption.value) ? undefined : newOption;
-      this.value = adjustedOpt;
-    }
-    else {
-      this.resetOptions();
-    }
-    this._visibleOptions = [];
-    this.clearSource();
+    (_b = (_a = this._comboElement) === null || _a === void 0 ? void 0 : _a['clearValue']) === null || _b === void 0 ? void 0 : _b.call(_a);
   }
-  loadOptions(mode, argument = "") {
-    this._criteria = argument;
-    this._startLoading = true;
-    if (this.optionLoader) {
-      const searchArgument = { mode, argument };
-      this.updateSource(this.optionLoader(searchArgument));
-    }
-    else {
-      this.updateSource(this.options);
-    }
-  }
-  cancelPreselection() {
-    if (!this._textInput.value && this.value) {
-      this.selectOption(undefined);
-    }
-    else {
-      window.setTimeout(() => {
-        this.setInputValue();
-      }, this._deboucingTime);
-    }
-    this.resetOptions();
-  }
-  setInputValue(clearError = true) {
-    const textValue = this.getText();
-    if ((this._textInput.value || '') !== textValue) {
-      this._textInput.value = textValue;
-      if (clearError) {
-        this.errorMessage = null;
-      }
-    }
-  }
-  clearSearch() {
-    this.value = null;
-  }
-  controlListWithOnlyOne() {
-    var _a, _b;
-    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) {
-      const startHighlight = new RegExp(this._startHighlightTag, 'g');
-      const endHighlight = new RegExp(this._endHighlightTag, 'g');
-      let title = StringUtils.decodeHtmlEntities(source[0].label);
-      const option = {
-        value: (_b = source[0].value) === null || _b === void 0 ? void 0 : _b.replace(startHighlight, '').replace(endHighlight, ''),
-        label: title === null || title === void 0 ? void 0 : title.replace(startHighlight, '').replace(endHighlight, '')
-      };
-      this.selectOption(option);
-    }
-  }
-  controlEmptySearch() {
-    var _a;
-    if (!((_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.length)) {
-      this.clearSearch();
-      ApplicationUtils.info(this._textEmptyList);
-    }
-    else {
-      this.controlListWithOnlyOne();
-    }
-  }
-  validateDescriptionValue() {
-    if (StringUtils.isEmpty(this.value)) {
-      return;
-    }
-    let value = this.value;
-    if (typeof value === "object") {
-      return;
-    }
-    if (StringUtils.isEmpty(value)) {
-      return;
-    }
-    this.loadDescriptionValue(value);
-  }
-  async loadDescriptionValue(argument) {
-    var _a, _b;
-    if (argument == undefined) {
-      return;
-    }
-    if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      this.loadOptionValue(argument);
-      return;
-    }
-    const searchArgument = {
-      mode: SearchMode.PREDICTIVE,
-      argument
-    };
-    const source = await ((_b = this.optionLoader) === null || _b === void 0 ? void 0 : _b.call(this, searchArgument));
-    if (source == undefined) {
-      return;
-    }
-    if (source instanceof Promise) {
-      source.then((result) => {
-        this.setDescriptionValue(result);
-      });
-    }
-    else {
-      this.setDescriptionValue(source);
-    }
-  }
-  setDescriptionValue(source) {
-    const value = (source === null || source === void 0 ? void 0 : source[0]) || source;
-    if (value == undefined || !Object.keys(value).length) {
-      this.showNoResultMessage();
-      return;
-    }
-    this._lookupMode = true;
-    this.value = value;
-  }
-  loadOptionValue(argument) {
-    var _a;
-    const source = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find((opt) => opt.value === argument);
-    if (source != undefined) {
-      this.selectOption(source);
-    }
-    else {
-      this.showNoResultMessage();
-    }
-  }
-  async showNoResultMessage() {
-    this.clearSearch();
-    ApplicationUtils.info(this._textEmptySearch.replace("{0}", this.getFieldLabel()));
-  }
-  getFieldLabel() {
+  /*
+  * Retorna uma promise com o valor da opção selecionada,
+  * que será resolvida quando o backend devolver este dado.
+  */
+  async getValueAsync() {
     var _a;
-    return (_a = this.label) === null || _a === void 0 ? void 0 : _a.replace(REQUIRED_INFO, "").toUpperCase();
-  }
-  resetOptions() {
-    this.hideOptions();
-    this._criteria = undefined;
-    this._preSelection = undefined;
-    this.updateVisibleOptions();
+    return (_a = this._comboElement) === null || _a === void 0 ? void 0 : _a.getValueAsync();
   }
-  //---------------------------------------------
-  // Lifecycle web component
-  //---------------------------------------------
-  componentWillLoad() {
-    if (this.options === undefined) {
-      this.options = [];
-      const optionsTags = this.el.querySelectorAll("option");
-      if (optionsTags) {
-        optionsTags.forEach(e => {
-          let label = e.innerText;
-          let value = e.getAttribute("value");
-          let details = e.getAttribute("details");
-          if (!value) {
-            value = label;
-          }
-          this.options.push({ label, value, details });
-          e.hidden = true;
-        });
-      }
+  onComboChange(event) {
+    event.stopPropagation();
+    this.value = event.detail;
+    this.ezChange.emit(event.detail);
+    if (this.errorMessage !== this._comboElement.errorMessage) {
+      this.errorMessage = this._comboElement.errorMessage;
     }
-    this.updateSource([]);
-  }
-  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");
-    });
-    this.validateDescriptionValue();
   }
   componentDidLoad() {
-    CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
-    this.setInputValue(false);
-    this._resizeObserver = new ResizeObserver((entries) => {
-      window.requestAnimationFrame(() => {
-        if (!Array.isArray(entries) || !entries.length)
-          return;
-        const { clientWidth } = this._listContainer;
-        if (clientWidth > 0 && !!this._listWrapper) {
-          this._listWrapper.style.width = `${clientWidth}px`;
-        }
-      });
-    });
-  }
-  //---------------------------------------------
-  // Event handlers
-  //---------------------------------------------
-  handlerIconClick() {
-    this.loadOptions(SearchMode.ADVANCED);
-  }
-  buildNumberArgument(argument) {
-    if (this.isTextSearch) {
-      return NaN;
-    }
-    return Number(argument || undefined);
-  }
-  onTextInputChangeHandler(event) {
-    var _a;
-    this.clearDeboucingTimeout();
-    if (this._startLoading) {
-      this._changeDeboucingTimeout = window.setTimeout(() => {
-        this.onTextInputChangeHandler(event);
-      }, this._deboucingTime);
-      return;
-    }
-    const argument = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.trim();
-    const argumentNumber = this.buildNumberArgument(argument);
-    if (!this._criteria) {
-      this._textInput.value = event.data || argument;
-    }
-    this._criteria = argument;
-    if (argument) {
-      this._showLoading = false;
-      this.clearSource();
-      if (!isNaN(argumentNumber) || argument.length >= this._limitCharsToSearch) {
-        this._showLoading = true;
-        this._changeDeboucingTimeout = window.setTimeout(() => {
-          this.loadOptions(SearchMode.PREDICTIVE, isNaN(argumentNumber) ? argument : argumentNumber.toString());
-        }, this._deboucingTime);
-        this.showOptions();
-      }
-      else {
-        this.hideOptions();
-      }
-    }
-    else {
-      this.hideOptions();
-      this._showLoading = false;
-      this.clearSource();
-    }
-  }
-  clearDeboucingTimeout() {
-    if (this._changeDeboucingTimeout) {
-      window.clearTimeout(this._changeDeboucingTimeout);
-      this._changeDeboucingTimeout = null;
-    }
-  }
-  keyDownHandler(event) {
-    this._tabPressed = false;
-    if (event.ctrlKey) {
-      if (event.key === "f" || event.key === "F") {
-        this.loadOptions(SearchMode.ADVANCED);
-        //ATENÇÃO: Ctrl + F tem ação específica nos browsers
-        //nesse caso, como vamos abrir o popup de busca avançada,
-        //não é interessante deixar o evento propagar;
-        event.stopPropagation();
-        event.stopImmediatePropagation();
-        event.preventDefault();
-      }
-    }
-    switch (event.key) {
-      case "ArrowDown":
-        this.nextOption();
-        event.stopPropagation();
-        break;
-      case "ArrowUp":
-        this.previousOption();
-        event.stopPropagation();
-        break;
-      case "Enter":
-        this.selectCurrentOption();
-        break;
-      case "Escape":
-        this.cancelPreselection();
-        break;
-      case "Tab":
-        this._tabPressed = true;
-        this.controlListWithOnlyOne();
-        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();
-  }
-  onTextInputFocusOutHandler() {
-    if (this.hideErrorOnFocusOut)
-      this.cancelPreselection();
-  }
-  canShowListOptions() {
-    return !this._showLoading && this._visibleOptions.length > 0;
+    CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
   }
   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() }, h("ez-icon", { iconName: "search" })), ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)
-      ? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
-      : 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)))))));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo("combo"), ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, hideErrorOnFocusOut: this.hideErrorOnFocusOut, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode, canShowError: this.canShowError, listOptionsPosition: this.listOptionsPosition, isTextSearch: this.isTextSearch, limitCharsToSearch: this.ignoreLimitCharsToSearch ? 0 : 3 }));
   }
-  get el() { return getElement(this); }
+  ;
+  get _elem() { return getElement(this); }
   static get watchers() { return {
     "errorMessage": ["observeErrorMessage"],
-    "value": ["observeValue"],
-    "options": ["observeOptions"]
+    "value": ["observeValue"]
   }; }
 };
-var SearchMode;
-(function (SearchMode) {
-  SearchMode["ADVANCED"] = "ADVANCED";
-  SearchMode["PRELOAD"] = "PRELOAD";
-  SearchMode["PREDICTIVE"] = "PREDICTIVE";
-})(SearchMode || (SearchMode = {}));
 EzSearch.style = ezSearchCss;
 
 export { EzSearch as ez_search };