@sankhyalabs/ezui 7.1.2 → 7.2.0-dev.2

package/dist/collection/components/ez-classic-search-plus/ez-classic-search-plus.js

@@ -0,0 +1,988 @@
+import { h, Host, } from "@stencil/core";
+import { ElementIDUtils, KeyboardManager, StringUtils, } from "@sankhyalabs/core";
+import { CSSVarsUtils, SearchMode } from "../../utils";
+import initI18n from '../../utils/i18n';
+export class EzClassicSearchPlus {
+  constructor() {
+    this.SEARCH_DESCRIPTION_TIMEOUT = 2000;
+    this.INTERVAL_TO_RETRY_ASYNC_VALUE = 100;
+    this._ignoreNextValue = false;
+    this.value = undefined;
+    this.enabled = true;
+    this.disableCodeInput = false;
+    this.disableDescriptionInput = false;
+    this.label = undefined;
+    this.hideDescriptionInput = false;
+    this.canShowError = true;
+    this.errorMessage = undefined;
+    this.mode = "regular";
+    this.size = "default";
+    this.required = false;
+    this.contextProperties = undefined;
+    this.optionLoader = undefined;
+    this.showOptionValue = true;
+    this.stopPropagateEnterKeyEvent = false;
+    this.autoFocus = false;
+    this.showSelectedValue = true;
+    this.suppressEmptyOption = false;
+    this.hideErrorOnFocusOut = true;
+    this.listOptionsPosition = undefined;
+    this.isTextSearch = false;
+    this.ignoreLimitCharsToSearch = false;
+    this.suppressSearch = false;
+    this.suppressPreLoad = true;
+    this.ensureClearButtonVisible = false;
+    this.descriptionValue = "";
+    this.codeValue = "";
+    this.isLoadingDescription = false;
+    this.searchDescriptionIsOpen = false;
+    this.visibleOptions = undefined;
+    this.showLoading = true;
+  }
+  async observeValue(newValue, oldValue) {
+    var _a;
+    if (this._ignoreNextValue) {
+      this._ignoreNextValue = false;
+      return;
+    }
+    const newNormalizedValue = this.normalizeValueToCodeValue(newValue);
+    const oldNormalizedValue = this.normalizeValueToCodeValue(oldValue);
+    if (newNormalizedValue === oldNormalizedValue) {
+      return;
+    }
+    if (newNormalizedValue === undefined) {
+      this.codeValue = undefined;
+      this.descriptionValue = undefined;
+      this.ezChange.emit(undefined);
+      return;
+    }
+    this.codeValue = newNormalizedValue;
+    try {
+      this.descriptionValue = await this.normalizeCodeToDescriptionValue(newValue);
+      if (this.descriptionValue === null || this.descriptionValue === undefined) {
+        throw new Error("Valor não encontrado!");
+      }
+    }
+    catch (err) {
+      this._ignoreNextValue = true;
+      this.clearSearch();
+      console.warn("[EzSearchPlus] Erro ao obter descrição do registro.", err);
+      if (((_a = err === null || err === void 0 ? void 0 : err.constructor) === null || _a === void 0 ? void 0 : _a.name) === "WarningException") {
+        this.errorMessage = err.message;
+      }
+      throw err;
+    }
+    this.value = this.buildCurrentValue();
+    this.ezChange.emit(this.value);
+    this.errorMessage = null;
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus(options) {
+    var _a;
+    if (this.disableCodeInput) {
+      (_a = this._textInputDescriptionValue) === null || _a === void 0 ? void 0 : _a.setFocus(options);
+      return;
+    }
+    if (this._latestFocusedInputElement) {
+      this._latestFocusedInputElement.setFocus(options);
+      return;
+    }
+    this._textInputCodeValue.setFocus(options);
+  }
+  /**
+  * Obtém o valor do componente só após a compo de apresentação
+  * ter sido resolvido pelo option loader quando necessário
+  */
+  async getValueAsync() {
+    if (!this.isLoadingDescription) {
+      const currentOpt = this.buildCurrentValue();
+      return new Promise(resolve => resolve(currentOpt));
+    }
+    return new Promise(resolve => {
+      let id = setInterval(() => {
+        if (!this.isLoadingDescription) {
+          clearInterval(id);
+          const currentOpt = this.buildCurrentValue();
+          resolve(currentOpt);
+        }
+      }, this.INTERVAL_TO_RETRY_ASYNC_VALUE);
+    });
+  }
+  /**
+  * Limpa o valor do campo de pesquisa
+  */
+  async clearValue() {
+    this.clearSearch();
+  }
+  /**
+  * Remove o foco do campo.
+  */
+  async setBlur() {
+    var _a, _b;
+    (_a = this._textInputCodeValue) === null || _a === void 0 ? void 0 : _a.setBlur();
+    (_b = this._textInputDescriptionValue) === null || _b === void 0 ? void 0 : _b.setBlur();
+  }
+  /**
+  * Retorna se o conteúdo é inválido.
+  */
+  async isInvalid() {
+    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
+  }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+    if (this.value && StringUtils.isEmpty(this.codeValue)) {
+      await this.observeValue(this.value, undefined);
+    }
+  }
+  componentDidLoad() {
+    CSSVarsUtils.applyVarsTextInput(this.el, this._textInputCodeValue);
+    CSSVarsUtils.applyVarsTextInput(this.el, this._textInputDescriptionValue);
+  }
+  connectedCallback() {
+    this.initKeyboardManager();
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
+  }
+  clearSearch() {
+    this.value = null;
+    this.codeValue = null;
+    this.descriptionValue = null;
+    if (!this.hideDescriptionInput) {
+      this._textInputDescriptionValue.value = null;
+    }
+  }
+  async normalizeCodeToDescriptionValue(valueToNormalize) {
+    if (!valueToNormalize) {
+      return "";
+    }
+    if (typeof valueToNormalize == 'string') {
+      try {
+        valueToNormalize = JSON.parse(valueToNormalize);
+        if ((valueToNormalize === null || valueToNormalize === void 0 ? void 0 : valueToNormalize.value) && !(valueToNormalize === null || valueToNormalize === void 0 ? void 0 : valueToNormalize.label)) {
+          return await this.loadDescriptionValueByCode(valueToNormalize === null || valueToNormalize === void 0 ? void 0 : valueToNormalize.value);
+        }
+      }
+      catch (e) {
+        return await this.loadDescriptionValueByCode(valueToNormalize);
+      }
+    }
+    //Se é diferente de objeto, temos que resolver a descrição
+    if (typeof valueToNormalize != 'object') {
+      return await this.loadDescriptionValueByCode(valueToNormalize);
+    }
+    return valueToNormalize === null || valueToNormalize === void 0 ? void 0 : valueToNormalize.label;
+  }
+  normalizeValueToCodeValue(valueToNormalize) {
+    if (!valueToNormalize) {
+      return undefined;
+    }
+    if (typeof valueToNormalize == 'string') {
+      try {
+        valueToNormalize = JSON.parse(valueToNormalize);
+      }
+      catch (e) {
+        return valueToNormalize;
+      }
+    }
+    if (typeof valueToNormalize != 'object') {
+      return typeof valueToNormalize === 'number'
+        ? String(valueToNormalize)
+        : valueToNormalize;
+    }
+    return valueToNormalize === null || valueToNormalize === void 0 ? void 0 : valueToNormalize.value;
+  }
+  async loadDescriptionValueByCode(codeValue) {
+    if (!this.optionLoader) {
+      console.warn(this.i18n("ez-search-plus.optionLoaderNotDefined"));
+      return "";
+    }
+    try {
+      this.isLoadingDescription = true;
+      const searchArgument = { mode: SearchMode.LOAD_DESCRIPTION, argument: codeValue };
+      const loadedOption = await this.optionLoader(searchArgument);
+      if (!loadedOption) {
+        return "";
+      }
+      if (Array.isArray(loadedOption)) {
+        return loadedOption[0].label;
+      }
+      return loadedOption.label;
+    }
+    finally {
+      this.isLoadingDescription = false;
+    }
+  }
+  handleCodeInputFocusOut() {
+    this.cancelSelection();
+    if (this.codeValue == this._textInputCodeValue.value)
+      return;
+    this.value = this._textInputCodeValue.value;
+  }
+  handleSearchClick() {
+    this.loadAdvancedSearch();
+  }
+  async loadAdvancedSearch() {
+    if (!this.optionLoader) {
+      console.warn(this.i18n("ez-search-plus.optionLoaderNotDefined"));
+      return;
+    }
+    const searchArgument = { mode: SearchMode.ADVANCED, argument: "" };
+    let selectedItem = undefined;
+    try {
+      selectedItem = await this.optionLoader(searchArgument, this.contextProperties);
+    }
+    catch (ignore) { }
+    if (!selectedItem)
+      return;
+    this.value = selectedItem;
+  }
+  buildCurrentValue() {
+    if (StringUtils.isEmpty(this.codeValue)) {
+      return undefined;
+    }
+    return {
+      value: this.codeValue,
+      label: this.descriptionValue
+    };
+  }
+  async handleTextInputChangeHandler(event) {
+    if (!this.searchDescriptionIsOpen) {
+      this._popover.showUnder(this.el);
+    }
+    const argument = event.target.value;
+    await this.debounceLoaderOptions(argument);
+  }
+  async debounceLoaderOptions(argument) {
+    if (this._debounceSearch)
+      clearTimeout(this._debounceSearch);
+    return new Promise((resolve) => {
+      this._debounceSearch = setTimeout(async () => {
+        await this.processOptionsLoader(argument);
+        resolve();
+      }, this.SEARCH_DESCRIPTION_TIMEOUT);
+    });
+  }
+  updateKeyOption(option) {
+    return (Object.assign(Object.assign({}, option), { presentationValue: option.value, presentationLabel: option.label }));
+  }
+  parseSearchOptions(options = []) {
+    if (Array.isArray(options)) {
+      const firstOption = options[0];
+      if (!firstOption) {
+        return [];
+      }
+      if ("label" in firstOption || "value" in firstOption) {
+        return options.map((option) => this.updateKeyOption(option));
+      }
+      return options;
+    }
+    if ("label" in options || "value" in options) {
+      [this.updateKeyOption(options)];
+    }
+    return [options];
+  }
+  async processOptionsLoader(argument) {
+    try {
+      this.showLoading = true;
+      const searchArgument = { mode: SearchMode.PREDICTIVE, argument };
+      const options = await this.optionLoader(searchArgument);
+      this.visibleOptions = this.parseSearchOptions(options);
+    }
+    finally {
+      this.showLoading = false;
+    }
+  }
+  handleSelectItem(evt) {
+    const currentOpt = evt.detail;
+    this.value = currentOpt;
+    this._popover.hide();
+    window.requestAnimationFrame(() => {
+      var _a;
+      (_a = this._textInputDescriptionValue) === null || _a === void 0 ? void 0 : _a.setFocus({ selectText: true });
+    });
+  }
+  async handleArrowUp() {
+    if (!this.isOptionsVisible()) {
+      return;
+    }
+    await this._classicSearchList.previousOption();
+  }
+  async handleArrowDown() {
+    if (!this.isOptionsVisible()) {
+      return;
+    }
+    await this._classicSearchList.nextOption();
+  }
+  async selectCurrentItem() {
+    var _a;
+    await ((_a = this._classicSearchList) === null || _a === void 0 ? void 0 : _a.selectCurrentItem());
+  }
+  async cancelSelection() {
+    var _a, _b, _c;
+    const description = typeof this.value === 'object' ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.label : "";
+    if (this._textInputDescriptionValue && description && this._textInputDescriptionValue.value != description) {
+      this._textInputDescriptionValue.value = description;
+    }
+    await ((_b = this._classicSearchList) === null || _b === void 0 ? void 0 : _b.cancelSelection());
+    (_c = this._popover) === null || _c === void 0 ? void 0 : _c.hide();
+  }
+  async handleInputTab() {
+    await this.cancelSelection();
+  }
+  async handleInputEsc() {
+    var _a;
+    await this.cancelSelection();
+    await ((_a = this._latestFocusedInputElement) === null || _a === void 0 ? void 0 : _a.setFocus({ selectText: true }));
+  }
+  async initKeyboardManager() {
+    this._keyboardManager = new KeyboardManager();
+    const defaultOpts = { element: this.el, propagate: true };
+    this._keyboardManager
+      .bind("ArrowUp", () => this.handleArrowUp(), Object.assign(Object.assign({}, defaultOpts), { propagate: false }))
+      .bind("ArrowDown", () => this.handleArrowDown(), Object.assign(Object.assign({}, defaultOpts), { propagate: false }))
+      .bind("Enter", () => this.selectCurrentItem(), Object.assign(Object.assign({}, defaultOpts), { propagate: !this.stopPropagateEnterKeyEvent }))
+      .bind("Tab", () => this.handleInputTab(), defaultOpts)
+      .bind("Escape", () => this.handleInputEsc(), defaultOpts);
+  }
+  disconnectedCallback() {
+    this._keyboardManager
+      .unbind("ArrowUp")
+      .unbind("ArrowDown")
+      .unbind("Enter")
+      .unbind("Tab")
+      .unbind("Escape");
+  }
+  isOptionsVisible() {
+    return this._popover.opened;
+  }
+  setLatestFocusedInputElement(el) {
+    this._latestFocusedInputElement = el;
+  }
+  handleCodeInputFocus() {
+    this.setLatestFocusedInputElement(this._textInputCodeValue);
+  }
+  handleDescriptionInputFocus() {
+    this.setLatestFocusedInputElement(this._textInputDescriptionValue);
+  }
+  handleOnEzVisibilityChange(event) {
+    event.stopPropagation();
+    this.searchDescriptionIsOpen = event.detail;
+  }
+  render() {
+    var _a, _b;
+    ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
+    const canShowClearButton = !this.ensureClearButtonVisible && (!this.value && !((_a = this._textInputCodeValue) === null || _a === void 0 ? void 0 : _a.value) && !((_b = this._textInputDescriptionValue) === null || _b === void 0 ? void 0 : _b.value));
+    return (h(Host, null, h("div", { class: "ez-classic-search-plus__wrapper" }, h("div", { class: "ez-classic-search-plus__label-container" }, h("label", { title: this.label }, this.label), this.required && h("span", { class: "required-indicator" }, "*")), h("div", { class: "ez-classic-search-plus__container" }, h("ez-classic-input", { ref: (elem) => this._textInputCodeValue = elem, class: {
+        "ez-classic-search-plus__code-input": !this.hideDescriptionInput,
+        "ez-classic-search-plus__code-input-no-border": !this.hideDescriptionInput,
+        "ez-classic-search-plus__code-input-full": this.hideDescriptionInput
+      }, "data-element-id": ElementIDUtils.getInternalIDInfo("codeInput"), "data-slave-mode": "true", enabled: !this.disableCodeInput && this.enabled, size: this.size, label: null, errorMessage: this.hideDescriptionInput ? this.errorMessage : "", value: this.codeValue, onFocusout: () => this.handleCodeInputFocusOut(), onFocus: () => this.handleCodeInputFocus(), leftIconName: "search", leftIconClickable: this.enabled, onIconClick: () => this.handleSearchClick(), onEzChange: (event) => event.stopPropagation() }), !this.hideDescriptionInput && (h("div", { class: "description-input-container" }, h("ez-classic-input", { ref: (elem) => this._textInputDescriptionValue = elem, tabIndex: -1, class: { "ez-classic-search-plus__text-input": true }, "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), "data-slave-mode": "true", enabled: !this.disableDescriptionInput && this.enabled, label: null, errorMessage: this.errorMessage, size: this.size, value: this.descriptionValue, onInput: (event) => this.handleTextInputChangeHandler(event), onFocus: () => this.handleDescriptionInputFocus(), rightIconName: canShowClearButton ? "close" : null, rightIconClickable: this.enabled, onIconClick: () => this.clearSearch(), onEzChange: (event) => event.stopPropagation() }), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this.el, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', useAnchorSize: true, onEzVisibilityChange: (event) => this.handleOnEzVisibilityChange(event), "data-element-id": this.el.getAttribute("data-element-id") }, h("ez-classic-search-result-list", { ref: (ref) => this._classicSearchList = ref, showLoading: this.showLoading, visibleOptions: this.visibleOptions, value: this.value, showOptionValue: this.showOptionValue, onChangeValue: (evt) => this.handleSelectItem(evt) }))))))));
+  }
+  static get is() { return "ez-classic-search-plus"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-classic-search-plus.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-classic-search-plus.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "IOption | string",
+          "resolved": "IOption | string",
+          "references": {
+            "IOption": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o valor do campo."
+        },
+        "attribute": "value",
+        "reflect": true
+      },
+      "enabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false o usu\u00E1rio n\u00E3o pode interagir com o campo."
+        },
+        "attribute": "enabled",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "disableCodeInput": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo de c\u00F3digo ficara desabilitado."
+        },
+        "attribute": "disable-code-input",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disableDescriptionInput": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo de de apresenta\u00E7\u00E3o ficara desabilitado."
+        },
+        "attribute": "disable-description-input",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Texto a ser apresentado como t\u00EDtulo do campo."
+        },
+        "attribute": "label",
+        "reflect": true
+      },
+      "hideDescriptionInput": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo de de apresenta\u00E7\u00E3o n\u00E3o ser\u00E1 exibido."
+        },
+        "attribute": "hide-description-input",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "canShowError": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false deixa de exibir a mensagem de erro dentro do campo."
+        },
+        "attribute": "can-show-error",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define uma mensagem de orienta\u00E7\u00E3o ao usu\u00E1rio, colocando o campo em modo inv\u00E1lido."
+        },
+        "attribute": "error-message",
+        "reflect": true
+      },
+      "mode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"slim\" | \"regular\"",
+          "resolved": "\"regular\" | \"slim\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do campo."
+        },
+        "attribute": "mode",
+        "reflect": true,
+        "defaultValue": "\"regular\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"small\" | \"xsmall\"",
+          "resolved": "\"default\" | \"small\" | \"xsmall\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Tamanho do input"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se o campo \u00E9 obrigat\u00F3rio"
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "contextProperties": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Propriedades de contexto da aplica\u00E7\u00E3o."
+        },
+        "attribute": "context-properties",
+        "reflect": false
+      },
+      "optionLoader": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "OptionLoaderFunction",
+          "resolved": "(argument: ISearchArgument, ctxProperties?: any) => ISearchOption | IOption | (ISearchOption | IOption)[] | Promise<ISearchOption | IOption | (ISearchOption | IOption)[]>",
+          "references": {
+            "OptionLoaderFunction": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Carrega as op\u00E7\u00F5es dinamicamente."
+        }
+      },
+      "showOptionValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se false cada op\u00E7\u00E3o na lista deve exibir somente o `label`."
+        },
+        "attribute": "show-option-value",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "stopPropagateEnterKeyEvent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true, interrompe a propaga\u00E7\u00E3o do evento de KeyDown da tecla enter"
+        },
+        "attribute": "stop-propagate-enter-key-event",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo de texto receber\u00E1 o foco ao ser renderizado."
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showSelectedValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
+        },
+        "attribute": "show-selected-value",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "suppressEmptyOption": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
+        },
+        "attribute": "suppress-empty-option",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hideErrorOnFocusOut": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
+        },
+        "attribute": "hide-error-on-focus-out",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "listOptionsPosition": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IEzCheckBoxListPosition",
+          "resolved": "IEzCheckBoxListPosition",
+          "references": {
+            "IEzCheckBoxListPosition": {
+              "location": "import",
+              "path": "../ez-combo-box/ez-combo-box"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
+        }
+      },
+      "isTextSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
+        },
+        "attribute": "is-text-search",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "ignoreLimitCharsToSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
+        },
+        "attribute": "ignore-limit-chars-to-search",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "suppressSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
+        },
+        "attribute": "suppress-search",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "suppressPreLoad": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Propriedade depreciada na nova vers\u00E3o do componente de pesquisa."
+        },
+        "attribute": "suppress-pre-load",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "ensureClearButtonVisible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Garante que o bot\u00E3o de limpar pesquisa est\u00E1 sempre vis\u00EDvel"
+        },
+        "attribute": "ensure-clear-button-visible",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "descriptionValue": {},
+      "codeValue": {},
+      "isLoadingDescription": {},
+      "searchDescriptionIsOpen": {},
+      "visibleOptions": {},
+      "showLoading": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChange",
+        "name": "ezChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando acontece a altera\u00E7\u00E3o de valor do campo."
+        },
+        "complexType": {
+          "original": "IOption",
+          "resolved": "IOption",
+          "references": {
+            "IOption": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: OptionsSetFocus) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "OptionsSetFocus": {
+              "location": "import",
+              "path": "../ez-classic-input/interfaces/optionsSetFocus"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Aplica o foco no campo.",
+          "tags": []
+        }
+      },
+      "getValueAsync": {
+        "complexType": {
+          "signature": "() => Promise<IOption>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "IOption": {
+              "location": "local"
+            }
+          },
+          "return": "Promise<IOption>"
+        },
+        "docs": {
+          "text": "Obt\u00E9m o valor do componente s\u00F3 ap\u00F3s a compo de apresenta\u00E7\u00E3o \nter sido resolvido pelo option loader quando necess\u00E1rio",
+          "tags": []
+        }
+      },
+      "clearValue": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Limpa o valor do campo de pesquisa",
+          "tags": []
+        }
+      },
+      "setBlur": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Remove o foco do campo.",
+          "tags": []
+        }
+      },
+      "isInvalid": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Retorna se o conte\u00FAdo \u00E9 inv\u00E1lido.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "observeValue"
+      }];
+  }
+}