@sankhyalabs/ezui 7.2.1-rc.1 → 7.3.0

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

@@ -1,1330 +0,0 @@
-import { h, Host } from "@stencil/core";
-import CSSVarsUtils from "../../utils/CSSVarsUtils";
-import { ElementIDUtils, ObjectUtils, StringUtils } from "@sankhyalabs/core";
-import { ApplicationUtils, SearchMode } from "../../utils";
-import { replaceHighlight, replaceQuotes } from "./utils/searchFormatters";
-import initI18n from '../../utils/i18n';
-export class EzClassicSearch {
-  constructor() {
-    this._changeDeboucingTimeout = null;
-    this._limitCharsToSearch = 3;
-    this._deboucingTime = 300;
-    this._maxWidthValue = 0;
-    this._tabPressed = 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;
-    this.errorMessage = undefined;
-    this.size = "default";
-    this.optionLoader = undefined;
-    this.contextProperties = undefined;
-    this.showSelectedValue = true;
-    this.showOptionValue = true;
-    this.suppressEmptyOption = false;
-    this.stopPropagateEnterKeyEvent = false;
-    this.mode = "regular";
-    this.classic = false;
-    this.required = false;
-    this.canShowError = true;
-    this.hideErrorOnFocusOut = true;
-    this.listOptionsPosition = undefined;
-    this.isTextSearch = false;
-    this.ignoreLimitCharsToSearch = false;
-    this.options = undefined;
-    this.suppressSearch = false;
-    this.ensureClearButtonVisible = false;
-    this.suppressPreLoad = true;
-    this.autoFocus = false;
-    this.alternativePlaceholder = undefined;
-    this.showMore = undefined;
-    this.suppressInputPersist = false;
-    this.hideDescriptionInput = 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.errorMessage) {
-        this.setInputValue();
-      }
-    }
-  }
-  getValue(val) {
-    return typeof val === 'object' ? val === null || val === void 0 ? void 0 : val.value : val;
-  }
-  validateNewValue(newValue, oldValue) {
-    const parsedNewValue = this.getValue(newValue);
-    const parsedOldValue = this.getValue(oldValue);
-    const newValueIsValid = parsedNewValue !== "[object Object]";
-    const valuesIsDifferent = parsedNewValue !== parsedOldValue;
-    if (newValueIsValid && valuesIsDifferent) {
-      return true;
-    }
-    return false;
-  }
-  async observeValue(newValue, oldValue) {
-    if (this._textInput && this.validateNewValue(newValue, oldValue)) {
-      if (typeof newValue === "string") {
-        await this.handleValueAsString(newValue);
-        return;
-      }
-      const newValueSelected = this.getSelectedOption(newValue);
-      const currentValue = this.getSelectedOption(this._currentValue);
-      if (this.isDifferentValues(currentValue, newValueSelected)) {
-        this._currentValue = newValueSelected;
-        this.setInputValue();
-        const valueEmitted = newValueSelected !== null && newValueSelected !== void 0 ? newValueSelected : undefined;
-        this.ezChange.emit(valueEmitted);
-      }
-      this.resetOptions();
-    }
-  }
-  observeOptions(newOptions, oldOptions) {
-    if (!newOptions.length && this.suppressPreLoad)
-      return;
-    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));
-    }
-    return new Promise(resolve => {
-      let id = setInterval(() => {
-        if (!this._showLoading) {
-          clearInterval(id);
-          resolve(this.value);
-        }
-      }, 100);
-    });
-  }
-  /**
-   * Aplica o foco no campo.
-   */
-  async setFocus(options) {
-    if (this._textInput) {
-      this._textInput.setFocus(options);
-    }
-  }
-  /**
-   * Remove o foco do campo.
-   */
-  async setBlur() {
-    if (this._textInput) {
-      this._textInput.setBlur();
-    }
-  }
-  /**
-   * Retorna se o conteúdo é inválido.
-   */
-  async isInvalid() {
-    return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
-  }
-  /**
-   * Limpa o valor do campo de pesquisa
-   */
-  async clearValue() {
-    this.clearSearch();
-  }
-  async handleValueAsString(value) {
-    if (this.getSelectedOption(value)) {
-      this.setInputValue();
-      return;
-    }
-    await this.loadDescriptionValue(value);
-    if (!this._currentValue) {
-      return;
-    }
-    this.setInputValue();
-    this.ezChange.emit(this.value);
-    this._currentValue = this.value;
-  }
-  isDifferentValues(firstValue, secondValue) {
-    return ObjectUtils.objectToString(firstValue || {}) !== ObjectUtils.objectToString(secondValue || {});
-  }
-  getFormattedText(currentValue) {
-    if (currentValue == undefined) {
-      return;
-    }
-    let text = (!this.showSelectedValue || currentValue.value == undefined) ? currentValue.label : currentValue.label ? `${currentValue.value} - ${currentValue.label}` : currentValue.value;
-    text = text === null || text === void 0 ? void 0 : text.replace(new RegExp(this._startHighlightTag, 'g'), '').replace(new RegExp(this._endHighlightTag, 'g'), '');
-    return text;
-  }
-  getText() {
-    const currentValue = this.getSelectedOption(this._currentValue);
-    const text = this.getFormattedText(currentValue);
-    return replaceQuotes(text);
-  }
-  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 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;
-  }
-  showOptions() {
-    if (!this.enabled)
-      return;
-    if (this.isOptionsVisible()) {
-      return;
-    }
-    this._ezPopOverPlusElement.showUnder(this._textInput);
-  }
-  hideOptions() {
-    this._ezPopOverPlusElement.hide();
-  }
-  isOptionsVisible() {
-    return this._ezPopOverPlusElement.opened;
-  }
-  selectCurrentOption(focusOnInput = true) {
-    if (this._preSelection !== undefined) {
-      this.selectOption(this._visibleOptions[this._preSelection], focusOnInput);
-      this._preSelection = undefined;
-    }
-    else {
-      this.controlListWithOnlyOne();
-    }
-  }
-  updateSource(source) {
-    this._startLoading = false;
-    if (source instanceof Promise) {
-      this._showLoading = true;
-      source.then(result => {
-        this.updateSource(result);
-      }).finally(() => {
-        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(false);
-        }
-      }
-      else {
-        this.selectOption(source);
-      }
-    }
-  }
-  clearSource() {
-    this._source = [];
-    this.updateVisibleOptions();
-  }
-  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) });
-    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;
-      this.value = adjustedOpt;
-      this._currentValue = adjustedOpt;
-    }
-    else {
-      this.setInputValue();
-      this.resetOptions();
-    }
-    this._visibleOptions = [];
-    this.clearSource();
-    if (focusOnInput) {
-      setTimeout(() => {
-        this.setFocus();
-      }, 0);
-    }
-  }
-  loadOptions(mode, argument = "") {
-    this._criteria = argument;
-    this._startLoading = true;
-    if (this.optionLoader) {
-      const searchArgument = { mode, argument };
-      this.updateSource(this.optionLoader(searchArgument, this.contextProperties));
-    }
-    else {
-      this.updateSource(this.options);
-    }
-  }
-  cancelPreselection() {
-    if (!this._textInput.value && this._currentValue && this._source.length > 0) {
-      this.selectOption(undefined);
-    }
-    else {
-      window.setTimeout(() => {
-        this.setInputValue();
-      }, this._deboucingTime);
-    }
-    this.resetOptions();
-  }
-  setInputValue(clearError = true) {
-    if (this.suppressInputPersist) {
-      this.clearSearch();
-      return;
-    }
-    const textValue = this.getText();
-    if ((this._textInput.value || '') !== textValue) {
-      this._textInput.value = textValue;
-      if (clearError) {
-        this.errorMessage = null;
-      }
-    }
-  }
-  clearSearch() {
-    this.value = null;
-    this._currentValue = null;
-    this._textInput.value = "";
-  }
-  controlListWithOnlyOne(focusOnInput = true) {
-    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, focusOnInput);
-    }
-  }
-  controlEmptySearch(focusOnInput = true) {
-    var _a;
-    if (!((_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.length)) {
-      this.clearSearch();
-      ApplicationUtils.info(this.i18n("ez-classic-search.emptyList"));
-    }
-    else {
-      this.controlListWithOnlyOne(focusOnInput);
-    }
-  }
-  async loadDescriptionValue(argument) {
-    var _a, _b, _c;
-    if (argument == undefined) {
-      return;
-    }
-    if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      this.loadOptionValue(argument);
-      return;
-    }
-    const searchMode = this.hideDescriptionInput ? SearchMode.LOAD_DESCRIPTION : SearchMode.PREDICTIVE;
-    const searchArgument = {
-      mode: searchMode,
-      argument
-    };
-    try {
-      const source = await ((_b = this.optionLoader) === null || _b === void 0 ? void 0 : _b.call(this, searchArgument, this.contextProperties));
-      if (source == undefined) {
-        return;
-      }
-      if (source instanceof Promise) {
-        source.then((result) => {
-          this.setDescriptionValue(result);
-        });
-      }
-      else {
-        this.setDescriptionValue(source);
-      }
-    }
-    catch (error) {
-      if (((_c = error === null || error === void 0 ? void 0 : error.constructor) === null || _c === void 0 ? void 0 : _c.name) === "WarningException") {
-        this.errorMessage = error.message;
-      }
-      throw error;
-    }
-  }
-  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._currentValue = value ? Object.assign(Object.assign({}, value), { value: replaceHighlight(value.value), label: replaceHighlight(value.label) }) : value;
-    this.value = this._currentValue;
-    this.setTextInputValue();
-  }
-  setTextInputValue() {
-    if (this._textInput && (this._textInput.value === null || this._textInput.value === undefined)) {
-      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);
-    }
-  }
-  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.i18n("ez-classic-search.emptySearch", { field: this.getFieldLabel() }));
-  }
-  getFieldLabel() {
-    var _a;
-    return (_a = this.label) === null || _a === void 0 ? void 0 : _a.replace(this.i18n("app.requiredInfo"), "").toUpperCase();
-  }
-  resetOptions() {
-    if (this.showMore) {
-      this.handleResetOptionsWithShowMoreVisible();
-      return;
-    }
-    this.hideOptions();
-    this._criteria = undefined;
-    this._preSelection = undefined;
-    this.updateVisibleOptions();
-  }
-  handleResetOptionsWithShowMoreVisible() {
-    //Eh preciso adicionar um timeout para garantir que o evento seja escutado pelo botão de mostrar mais.
-    setTimeout(() => {
-      this.hideOptions();
-      this._criteria = undefined;
-      this._preSelection = undefined;
-      this.updateVisibleOptions();
-    }, 100);
-  }
-  async handleInitialValue() {
-    const valueIsValid = !!this.getValue(this.value);
-    if (!valueIsValid) {
-      return;
-    }
-    if (typeof this.value === "string") {
-      await this.handleValueAsString(this.value);
-      return;
-    }
-    let text = this.getFormattedText(this.value);
-    text = replaceQuotes(text);
-    this._textInput.value = text;
-  }
-  //---------------------------------------------
-  // Lifecycle web component
-  //---------------------------------------------
-  async componentWillLoad() {
-    this.i18n = await initI18n();
-    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;
-        });
-      }
-    }
-    this.updateSource([]);
-  }
-  componentDidRender() {
-    var _a;
-    (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
-      ElementIDUtils.addIDInfoIfNotExists(elem, "itemSearch");
-    });
-  }
-  async componentDidLoad() {
-    this._currentValue = this.value;
-    CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
-    this._resizeObserver = new ResizeObserver((entries) => {
-      window.requestAnimationFrame(() => {
-        if (!Array.isArray(entries) || !entries.length)
-          return;
-      });
-    });
-    this._intersectionObserver = new IntersectionObserver((entries) => {
-      entries.forEach(entry => {
-        if (!entry.isIntersecting && this._ezPopOverPlusElement) {
-          this._ezPopOverPlusElement.hide();
-        }
-      });
-    }, { threshold: 0.1 });
-    if (this._textInput) {
-      this._intersectionObserver.observe(this._textInput);
-    }
-    await this.handleInitialValue();
-    if (this.autoFocus) {
-      requestAnimationFrame(() => {
-        this.setFocus({ selectText: true });
-      });
-    }
-  }
-  disconnectedCallback() {
-    var _a, _b;
-    (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    (_b = this._intersectionObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-  }
-  //---------------------------------------------
-  // Event handlers
-  //---------------------------------------------
-  handleClassicIconClick(event) {
-    const { icon } = event.detail;
-    if (icon === "left") {
-      this.loadOptions(SearchMode.ADVANCED);
-      return;
-    }
-    this.clearSearch();
-  }
-  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 (this.ignoreLimitCharsToSearch || !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;
-    }
-  }
-  async 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":
-        event.stopPropagation();
-        if (this.canShowListOptions()) {
-          event.preventDefault();
-        }
-        if (!this.isOptionsVisible()) {
-          this.showOptions();
-        }
-        await this._classicSearchList.nextOption();
-        break;
-      case "ArrowUp":
-        event.stopPropagation();
-        if (this.canShowListOptions()) {
-          event.preventDefault();
-        }
-        await this._classicSearchList.previousOption();
-        break;
-      case "Enter":
-        this.handleEventPropagation(event);
-        this.selectCurrentOption();
-        break;
-      case "Escape":
-        this.cancelPreselection();
-        break;
-      case "Tab":
-        this._tabPressed = true;
-        this.selectCurrentOption(false);
-        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._ezPopOverPlusElement.opened && this.stopPropagateEnterKeyEvent) {
-      event.stopPropagation();
-    }
-  }
-  onTextInputFocusOutHandler() {
-    if (this.hideErrorOnFocusOut)
-      this.cancelPreselection();
-  }
-  canShowListOptions() {
-    return !this._showLoading && this._visibleOptions.length > 0;
-  }
-  onChangePreSelection(value) {
-    this._preSelection = value;
-  }
-  async handleClickShowMore() {
-    var _a, _b;
-    if (!this.optionLoader)
-      return;
-    const argument = (_b = (_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
-    const searchArgument = { mode: SearchMode.ADVANCED, argument };
-    const selectedOption = await this.optionLoader(searchArgument, this.contextProperties);
-    if (selectedOption && !Array.isArray(selectedOption)) {
-      this.selectOption(selectedOption);
-    }
-  }
-  renderShowMore() {
-    if (!this.showMore || this._showLoading)
-      return;
-    return (h("div", { style: { display: "flex", justifyContent: "center" }, "data-element-id": ElementIDUtils.getInternalIDInfo("showMore") }, h("ez-button", { onClick: async () => await this.handleClickShowMore(), variant: "tertiary", style: { width: "100%", justifyContent: "center" }, label: this.i18n("ez-classic-search.showMore") })));
-  }
-  render() {
-    var _a;
-    ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    const canClearSearch = !!(((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)) || this.ensureClearButtonVisible;
-    return (h(Host, null, h("ez-classic-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, helpText: this.canShowError ? this.errorMessage : undefined, state: this.errorMessage && this.canShowError ? "error" : "default", size: this.size, placeholder: this.alternativePlaceholder, leftIconName: "search", leftIconClickable: true, rightIconName: canClearSearch ? "close" : null, rightIconClickable: true, required: this.required, onIconClick: (event) => this.handleClassicIconClick(event), onEzChange: (event) => event.stopPropagation() }), h("ez-popover-plus", { ref: elem => this._ezPopOverPlusElement = elem, autoClose: false, overlayType: "none", useAnchorSize: true, anchorElement: [this._textInput, this.el], "data-element-id": this.el.getAttribute("data-element-id"), onEzVisibilityChange: (event) => event.stopPropagation() }, h("div", null, h("classic-search-list", { ref: (ref) => this._classicSearchList = ref, showLoading: this._showLoading, visibleOptions: this._visibleOptions, textEmptyList: this.i18n("ez-classic-search.emptyList"), canShowListOptions: this.canShowListOptions(), value: this.value, showOptionValue: this.showOptionValue, preSelection: this._preSelection, onChangeValue: ({ detail }) => this.selectOption(detail), onChangePreSelection: ({ detail }) => this.onChangePreSelection(detail) }), this.renderShowMore()))));
-  }
-  static get is() { return "ez-classic-search"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ez-classic-search.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ez-classic-search.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
-      },
-      "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
-      },
-      "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"
-      },
-      "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
-      },
-      "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\""
-      },
-      "optionLoader": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(argument: ISearchArgument, ctxProperties?: any) => Promise<Array<IOption>> | Array<IOption> | IOption",
-          "resolved": "(argument: ISearchArgument, ctxProperties?: any) => IOption | IOption[] | Promise<IOption[]>",
-          "references": {
-            "ISearchArgument": {
-              "location": "local"
-            },
-            "Promise": {
-              "location": "global"
-            },
-            "Array": {
-              "location": "global"
-            },
-            "IOption": {
-              "location": "local"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Carrega as op\u00E7\u00F5es dinamicamente."
-        }
-      },
-      "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
-      },
-      "showSelectedValue": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Se false a op\u00E7\u00E3o selecionada deve exibir somente o `label`."
-        },
-        "attribute": "show-selected-value",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "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"
-      },
-      "suppressEmptyOption": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Se true remove a op\u00E7\u00E3o vazia da lista."
-        },
-        "attribute": "suppress-empty-option",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "stopPropagateEnterKeyEvent": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Se true, ineterrompe a propaga\u00E7\u00E3o do evento de KeyDown da tecla enter"
-        },
-        "attribute": "stop-propagate-enter-key-event",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "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\""
-      },
-      "classic": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Se true, muda o tipo do text-input para classic."
-        },
-        "attribute": "classic",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "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"
-      },
-      "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"
-      },
-      "hideErrorOnFocusOut": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Quando verdadeiro deixa de exibir a mensagem de erro (se existente) quando focar em um elemento diferente."
-        },
-        "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": "Define um posicionamento fixo para a lista de op\u00E7\u00F5es do CheckBox."
-        }
-      },
-      "isTextSearch": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Informa se a pesquisa \u00E9 do tipo texto."
-        },
-        "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": "Define se deve ignorar o limite de caracteres m\u00EDnimo para realizar uma pesquisa"
-        },
-        "attribute": "ignore-limit-chars-to-search",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "options": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "Array<IOption>",
-          "resolved": "IOption[]",
-          "references": {
-            "Array": {
-              "location": "global"
-            },
-            "IOption": {
-              "location": "local"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Array com as op\u00E7\u00F5es do ez-combo-box. Os elementos devem obedecer\no formato: `{value: string, label: string}`."
-        }
-      },
-      "suppressSearch": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Se true desabilita a digita\u00E7\u00E3o dentro do componente."
-        },
-        "attribute": "suppress-search",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "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"
-      },
-      "suppressPreLoad": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Se true, desabilita pr\u00E9-load das op\u00E7\u00F5es ao carregar componente"
-        },
-        "attribute": "suppress-pre-load",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "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"
-      },
-      "alternativePlaceholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Texto alternativo a ser apresentado como t\u00EDtulo do campo."
-        },
-        "attribute": "alternative-placeholder",
-        "reflect": true
-      },
-      "showMore": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Informa se deve exibir a op\u00E7\u00E3o de mostrar mais resultados."
-        },
-        "attribute": "show-more",
-        "reflect": false
-      },
-      "suppressInputPersist": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Informa se o valor da op\u00E7\u00E3o selecionada deve persistir no input de texto."
-        },
-        "attribute": "suppress-input-persist",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "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"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "_preSelection": {},
-      "_visibleOptions": {},
-      "_startLoading": {},
-      "_showLoading": {},
-      "_criteria": {}
-    };
-  }
-  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 {
-      "getValueAsync": {
-        "complexType": {
-          "signature": "() => Promise<unknown>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<unknown>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "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": []
-        }
-      },
-      "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": []
-        }
-      },
-      "clearValue": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Limpa o valor do campo de pesquisa",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "errorMessage",
-        "methodName": "observeErrorMessage"
-      }, {
-        "propName": "value",
-        "methodName": "observeValue"
-      }, {
-        "propName": "options",
-        "methodName": "observeOptions"
-      }];
-  }
-}