@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

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

@@ -0,0 +1,1125 @@
+import { ElementIDUtils, FloatingManager, ObjectUtils, StringUtils } from "@sankhyalabs/core";
+import { h, Host } from "@stencil/core";
+import { ApplicationUtils, CSSVarsUtils } from "../../utils";
+import { REQUIRED_INFO } from "../../utils/constants";
+export class EzComboBox {
+  constructor() {
+    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._preSelection = undefined;
+    this._visibleOptions = undefined;
+    this._startLoading = false;
+    this._showLoading = true;
+    this._criteria = undefined;
+    this.value = undefined;
+    this.label = undefined;
+    this.enabled = true;
+    this.options = undefined;
+    this.errorMessage = undefined;
+    this.searchMode = undefined;
+    this.showSelectedValue = false;
+    this.showOptionValue = false;
+    this.suppressSearch = false;
+    this.optionLoader = undefined;
+    this.suppressEmptyOption = false;
+    this.canShowError = true;
+    this.mode = "regular";
+    this.hideErrorOnFocusOut = true;
+    this.listOptionsPosition = undefined;
+    this.isTextSearch = 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 (this.searchMode && typeof 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;
+      }
+    }
+  }
+  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));
+    }
+    return new Promise(resolve => {
+      let id = setInterval(() => {
+        if (!this._showLoading) {
+          clearInterval(id);
+          resolve(this.value);
+        }
+      }, 100);
+    });
+  }
+  /**
+   * Aplica o foco no campo.
+   */
+  async setFocus() {
+    if (this._textInput) {
+      this._textInput.setFocus();
+    }
+  }
+  /**
+   * 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();
+  }
+  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.searchMode && this._criteria) {
+      const upperCriteria = this._criteria.toUpperCase();
+      opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
+    }
+    if (this.suppressEmptyOption) {
+      this._visibleOptions = opts;
+    }
+    else {
+      this._visibleOptions = [{ value: undefined, label: "" }].concat(opts);
+    }
+    this._maxWidthValue = this.getMaxWidthValue();
+  }
+  getMaxWidthValue() {
+    var _a;
+    if (this.showOptionValue) {
+      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;
+    }
+    return 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;
+  }
+  buildItem(opt, index) {
+    const widthValue = this.showOptionValue && this._maxWidthValue > 0 ? `${this._maxWidthValue}px` : '';
+    opt.label = opt.label || opt.value;
+    return h("li", { class: index === this._preSelection ? "item preselected" : "item", id: `item_${opt.value}`, onMouseDown: () => this.selectOption(opt), onMouseOver: () => this._preSelection = index }, this.showOptionValue
+      ? h("span", { class: "item__value", title: opt.value, style: { width: widthValue, minWidth: widthValue, maxWidth: widthValue } }, opt.value)
+      : undefined, h("span", { class: "item__label " + (this.showOptionValue ? "item__label--bold" : ""), title: opt.label }, opt.label));
+  }
+  showOptions() {
+    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: true, isFixed: true, backClickListener: () => this.hideOptions() });
+    this.setFocus();
+    window.requestAnimationFrame(() => {
+      this.updateListPosition();
+      if (!this.listOptionsPosition) {
+        this._listWrapper.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      }
+    });
+  }
+  hideOptions() {
+    if (this._floatingID !== undefined) {
+      FloatingManager.close(this._floatingID);
+    }
+    this._floatingID = undefined;
+    if (!!this._resizeObserver)
+      this._resizeObserver.unobserve(this._textInput);
+  }
+  isOptionsVisible() {
+    return this._floatingID !== undefined && FloatingManager.isFloating(this._floatingID);
+  }
+  nextOption() {
+    if (this.searchMode && !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();
+    }
+    if (this.searchMode) {
+      this._visibleOptions = [];
+      this.clearSource();
+    }
+  }
+  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;
+    if (this.searchMode) {
+      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) === 1) {
+        this.selectOption(source[0]);
+      }
+    }
+  }
+  controlEmptySearch() {
+    var _a;
+    if (this.searchMode) {
+      if (!((_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.length)) {
+        this.clearSearch();
+        ApplicationUtils.info(this._textEmptyList);
+      }
+      else {
+        this.controlListWithOnlyOne();
+      }
+    }
+  }
+  validateDescriptionValue() {
+    if (!this.searchMode || 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() {
+    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();
+  }
+  //---------------------------------------------
+  // 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");
+          if (!value) {
+            value = label;
+          }
+          this.options.push({ label, value });
+          e.hidden = true;
+        });
+      }
+    }
+    if (this.searchMode) {
+      this.updateSource([]);
+    }
+    else {
+      this.loadOptions(SearchMode.PRELOAD);
+    }
+  }
+  componentDidRender() {
+    var _a;
+    if (this._floatingID === undefined) {
+      this._listWrapper.remove();
+    }
+    (_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
+      ElementIDUtils.addIDInfoIfNotExists(elem, "itemComboBox");
+    });
+    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.searchMode ? this.loadOptions(SearchMode.ADVANCED) : this.showOptions();
+  }
+  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) {
+      if (this.searchMode) {
+        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.updateVisibleOptions();
+        this.showOptions();
+      }
+    }
+    else {
+      this.hideOptions();
+      if (this.searchMode) {
+        this._showLoading = false;
+        this.clearSource();
+      }
+      else {
+        this.updateVisibleOptions();
+      }
+    }
+  }
+  clearDeboucingTimeout() {
+    if (this._changeDeboucingTimeout) {
+      window.clearTimeout(this._changeDeboucingTimeout);
+      this._changeDeboucingTimeout = null;
+    }
+  }
+  onTextInputClickHandler() {
+    if (!this.searchMode) {
+      this.showOptions();
+    }
+  }
+  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;
+  }
+  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), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, h("ez-icon", { iconName: this.searchMode ? "search" : "chevron-down" })), this.searchMode && ((_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" })), this.showOptionValue
+      ? h("span", { class: "item__value item__value--hidden", ref: elem => this._itemValueBasis = elem })
+      : undefined, this.canShowListOptions() && this._visibleOptions.map((opt, index) => this.buildItem(opt, index)))))));
+  }
+  static get is() { return "ez-combo-box"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-combo-box.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-combo-box.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": false,
+        "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": false,
+        "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"
+      },
+      "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}`."
+        }
+      },
+      "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
+      },
+      "searchMode": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true ativa o modo pesquisa do ez-combo-box."
+        },
+        "attribute": "search-mode",
+        "reflect": false
+      },
+      "showSelectedValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true a op\u00E7\u00E3o selecionada exibe o `value` junto com `label`."
+        },
+        "attribute": "show-selected-value",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showOptionValue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true cada op\u00E7\u00E3o na lista exibe o `value` junto com `label`."
+        },
+        "attribute": "show-option-value",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "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"
+      },
+      "optionLoader": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(argument: ISearchArgument) => Promise<Array<IOption>> | Array<IOption> | IOption",
+          "resolved": "(argument: ISearchArgument) => 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."
+        }
+      },
+      "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"
+      },
+      "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"
+      },
+      "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\""
+      },
+      "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": "local"
+            }
+          }
+        },
+        "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"
+      }
+    };
+  }
+  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": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "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"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "scroll",
+        "method": "scrollListener",
+        "target": "window",
+        "capture": true,
+        "passive": true
+      }];
+  }
+}
+var SearchMode;
+(function (SearchMode) {
+  SearchMode["ADVANCED"] = "ADVANCED";
+  SearchMode["PRELOAD"] = "PRELOAD";
+  SearchMode["PREDICTIVE"] = "PREDICTIVE";
+})(SearchMode || (SearchMode = {}));