@sankhyalabs/ezui 1.1.6 → 1.1.10

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

@@ -1,527 +1,527 @@
-import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
-;
-;
-export class EzSearch {
-  constructor() {
-    this._options = [];
-    this._classSelect = 'list-container--4row';
-    /**
-     * Deixa o campo disponível ou não para digitação.
-     */
-    this.enabled = true;
-    /**
-    * Quantidade máxima de itens guardados no localstorage
-    */
-    this.qtdHotItems = 6;
-    /**
-       * Ajusta a opção de mostrar o "value" para cada "label". Como default "value" não está presente (showvalue = false)
-       */
-    this.showvalue = false;
-    ///// HOTSEARCH /////
-    this.buildId = () => {
-      return btoa(`${this.hotsearchid}:${location.pathname}`);
-    };
-    this.getStorageItems = (key) => {
-      let storageValueStr = localStorage.getItem('hotSearch-ez-search:' + key);
-      let storageItems = [];
-      if (storageValueStr !== null) {
-        storageItems = JSON.parse(storageValueStr);
-      }
-      return storageItems;
-    };
-    this.orderHotList = (list) => {
-      return list.sort((a, b) => {
-        let time1 = new Date(a.dtRecent).getTime();
-        let time2 = new Date(b.dtRecent).getTime();
-        let qtd1 = a.qtd;
-        let qtd2 = b.qtd;
-        if (time1 < time2)
-          return -1;
-        if (time1 > time2)
-          return 1;
-        if (qtd1 > qtd2)
-          return -1;
-        if (qtd1 < qtd2)
-          return 1;
-        return 0;
-      });
-    };
-    this.saveStorageItem = (key, value) => {
-      if (value == '' || value == undefined)
-        return;
-      let storageItem = this.getStorageItems(key);
-      let element = this.getElement(storageItem, value);
-      if (element) {
-        element.qtd++;
-        element.dtRecent = this.getOnlyDate();
-      }
-      else {
-        if (storageItem.length >= this.qtdHotItems) {
-          storageItem = this.orderHotList(storageItem);
-          storageItem.splice(-1, 1);
-        }
-        storageItem.push({
-          description: value,
-          qtd: 1,
-          dtRecent: this.getOnlyDate()
-        });
-      }
-      localStorage.setItem('hotSearch-ez-search:' + key, JSON.stringify(storageItem));
-      return storageItem;
-    };
-    this.adjustOptions = (arrayOptions) => {
-      let optionsTemp = [];
-      arrayOptions.map(el => {
-        optionsTemp.push({
-          value: el.value,
-          label: el.label,
-          ajustedValue: el.value === null || el.value === undefined || el.value === '' ? el.label : el.value,
-        });
-      });
-      return optionsTemp;
-    };
-    this.sortArrayOptions = (array, propname) => {
-      const sortedArray = array.sort(function (a, b) {
-        if (a[propname] < b[propname]) {
-          return -1;
-        }
-        if (a[propname] > b[propname]) {
-          return 1;
-        }
-        return 0;
-      });
-      return sortedArray;
-    };
-  }
-  valueChanged() {
-    var _a;
-    if (this.value) {
-      this.ezChange.emit({ value: this.value, label: (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value });
-      let key = this.buildId();
-      this.saveStorageItem(key, this.value);
-    }
-  }
-  //ajustar ao fim do teste
-  onInputTeste() {
-    if (this._inputElem) {
-      this.handleChange();
-    }
-  }
-  getElement(storageItem, value) {
-    return storageItem.find(e => e.description === value);
-  }
-  getOnlyDate() {
-    let dt = new Date();
-    dt.setHours(0);
-    dt.setMinutes(0);
-    dt.setSeconds(0);
-    dt.setUTCMilliseconds(0);
-    return dt.toString();
-  }
-  onInputChange(ev) {
-    const el = ev.target;
-    let key = this.buildId();
-    this.saveStorageItem(key, el.value);
-  }
-  buildDataList() {
-    try {
-      if (this.hotsearchid === undefined) {
-        return;
-      }
-      let key = this.buildId();
-      let optionsArray = [];
-      this._options = [];
-      if (this.getStorageItems(key).length > 0) {
-        this.orderHotList(this.getStorageItems(key))
-          .forEach((el) => {
-          optionsArray.push({
-            value: el.description,
-            label: el.description,
-          });
-        });
-        this._options = [{ value: '', label: '' }].concat(optionsArray);
-        this.buildOptions();
-      }
-    }
-    catch (err) {
-      this.errormessage = err;
-    }
-  }
-  ///// EVENT HANDLERS
-  buildItem(opt, index) {
-    const className = index === this._preSelection ? "--li--preselected" : "";
-    return h("li", { class: className, key: opt.ajustedValue, accessKey: opt.label.toString(), id: 'item_' + opt.ajustedValue, onMouseDown: (ev) => this.handleSetValueByOption(ev) },
-      this.highlightMatch(opt.label),
-      this.showvalue ? h("span", { title: opt.ajustedValue, class: '--li__spanvalue' }, opt.ajustedValue) : null);
-  }
-  highlightMatch(label) {
-    var _a;
-    const spanClassName = this.showvalue ? '--li__spanlabel' : '--li__spanlabel--full-width';
-    if ((_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value) {
-      const criteriaLength = this._inputElem.value.length;
-      const matchStart = label.toUpperCase().indexOf(this._inputElem.value);
-      if (matchStart > -1) {
-        const strLabelStart = label.substr(0, matchStart);
-        const strLabelEnd = label.substr(matchStart + criteriaLength);
-        const strMatch = label.substr(matchStart, criteriaLength);
-        return (h("span", { class: spanClassName },
-          strLabelStart,
-          h("strong", null, strMatch),
-          strLabelEnd));
-      }
-    }
-    return (h("span", { class: spanClassName }, label));
-  }
-  showOptions() {
-    if (this.enabled) {
-      const top = this._inputElem.errormessage ? '0px' : '-17px';
-      this._popover.show(top);
-    }
-  }
-  nextOption() {
-    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) {
-    const liElem = this.el.shadowRoot.querySelector(`li#item_${opt.value}`);
-    if (liElem) {
-      const parent = liElem.parentElement;
-      const parentRect = parent.getBoundingClientRect();
-      const itemRect = liElem.getBoundingClientRect();
-      if (itemRect.bottom > parentRect.bottom || itemRect.top < parentRect.top) {
-        liElem.scrollIntoView();
-      }
-    }
-  }
-  selectCurrentOption() {
-    if (this._preSelection !== undefined) {
-      this.selectOption(this._visibleOptions[this._preSelection]);
-      this._preSelection = undefined;
-    }
-  }
-  selectOption(opt) {
-    this._popover.hide();
-    this.value = opt === null || opt === void 0 ? void 0 : opt.ajustedValue;
-    this._inputElem.value = opt.value;
-    //Definir com a equipe de design se vai ser utilizado dessa forma.
-    // this._inputElem.value = opt.value? opt.value + " - "+ opt?.label: '';
-  }
-  keyDownHandler(event) {
-    switch (event.key) {
-      case "ArrowDown":
-        this.nextOption();
-        break;
-      case "ArrowUp":
-        this.previousOption();
-        break;
-      case "Enter":
-        this.selectCurrentOption();
-        break;
-    }
-    event.stopPropagation();
-  }
-  handleSetValueByOption(ev) {
-    this._popover.hide();
-    const spanEl = ev.target;
-    const sourceElement = ev.composedPath()[0];
-    let li;
-    if (sourceElement.tagName === 'SPAN') {
-      li = spanEl.parentNode;
-    }
-    else {
-      li = spanEl.parentNode.parentNode;
-    }
-    this.value = li.id.split('_')[1];
-    this._inputElem.value = li.accessKey;
-    this.ezChange.emit();
-  }
-  handleChange() {
-    if (this._changeDeboucing) {
-      window.clearTimeout(this._changeDeboucing);
-    }
-    this._changeDeboucing = window.setTimeout(() => {
-      var _a, _b;
-      if (((_b = (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) <= 0) {
-        return;
-      }
-      /* save tip on localStorage */
-      let key = this.buildId();
-      this.saveStorageItem(key, this._inputElem.value);
-      /* load data */
-      if (this.loadexecutor) {
-        this._loadDataFunction(this._inputElem.value, (serverData) => { this.populateOptions(serverData); });
-      }
-    }, 200);
-  }
-  normalizeResult(data) {
-    let options = [];
-    if (data instanceof Array) {
-      options = data;
-    }
-    else {
-      if (data instanceof Object) {
-        for (var key in data) {
-          let newOption = { value: '', label: '' };
-          newOption.value = key;
-          newOption.label = data[key];
-          options.push(newOption);
-        }
-      }
-    }
-    this._options = [{ value: '', label: '' }].concat(options);
-    this.buildOptions();
-  }
-  populateOptions(serverData) {
-    if (serverData instanceof Promise) {
-      serverData.then(this.normalizeResult);
-    }
-    else {
-      this.normalizeResult(serverData);
-    }
-  }
-  buildOptions() {
-    var _a;
-    this._visibleOptions = [];
-    this._visibleOptions = this.adjustOptions(this._options);
-    this._visibleOptions = this.sortArrayOptions(this._visibleOptions, 'label');
-    if (this._visibleOptions.length > 0) {
-      (_a = this._divElem) === null || _a === void 0 ? void 0 : _a.classList.add(this._classSelect);
-      this.showOptions();
-    }
-  }
-  setClassForSpanLabel() {
-    if (!this.showvalue) {
-      return '--li__spanlabel--full-width';
-    }
-    else {
-      return '--li__spanlabel';
-    }
-  }
-  handleFocus() {
-    if (this._inputElem && (!this._inputElem.value || this._inputElem.value.length === 0)) {
-      this.buildDataList();
-    }
-  }
-  parseExecutor(executor) {
-    if (executor) {
-      return executor instanceof Function ? executor : eval(executor);
-    }
-    return null;
-  }
-  componentDidLoad() {
-    if (this.value && this.value.length > 0) {
-      this._inputElem.value = this.value;
-    }
-    this._loadDataFunction = this.parseExecutor(this.loadexecutor);
-  }
-  render() {
-    var _a;
-    return (h(Host, null,
-      h("ez-text-input", { ref: (el) => { this._inputElem = el; }, label: this.label, enabled: this.enabled, onFocus: () => { this.handleFocus(); }, onInput: () => { this.handleChange(); }, onKeyDown: event => this.keyDownHandler(event), errormessage: this.errormessage },
-        h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { alert("Esta ação irá abrir o PopUp!"); }, slot: "leftIcon" })),
-      h("ez-popover", { boxwidth: '100%', ref: el => this._popover = el },
-        h("div", { class: 'list-container', ref: (el) => this._divElem = el }, (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.map((opt, index) => this.buildItem(opt, index))))));
-  }
-  ;
-  static get is() { return "ez-search"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ez-search.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ez-search.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "C\u00F3digo do registro selecionado"
-      },
-      "attribute": "value",
-      "reflect": true
-    },
-    "label": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label \u00E9 o 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": "Deixa o campo dispon\u00EDvel ou n\u00E3o para digita\u00E7\u00E3o."
-      },
-      "attribute": "enabled",
-      "reflect": true,
-      "defaultValue": "true"
-    },
-    "qtdHotItems": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Quantidade m\u00E1xima de itens guardados no localstorage"
-      },
-      "attribute": "qtd-hot-items",
-      "reflect": true,
-      "defaultValue": "6"
-    },
-    "showvalue": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Ajusta a op\u00E7\u00E3o de mostrar o \"value\" para cada \"label\". Como default \"value\" n\u00E3o est\u00E1 presente (showvalue = false)"
-      },
-      "attribute": "showvalue",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "errormessage": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Quando h\u00E1 um problema de valida\u00E7\u00E3o, serve como orienta\u00E7\u00E3o ao usu\u00E1rio"
-      },
-      "attribute": "errormessage",
-      "reflect": true
-    },
-    "loadexecutor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | Function",
-        "resolved": "Function | string",
-        "references": {
-          "Function": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Quando h\u00E1 um problema de valida\u00E7\u00E3o, serve como orienta\u00E7\u00E3o ao usu\u00E1rio"
-      },
-      "attribute": "loadexecutor",
-      "reflect": false
-    },
-    "hotsearchid": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define o identificador \u00FAnico do hotSearch, caso esta propriedade n\u00E3o seja preenchida, o hotSearch n\u00E3o funcionar\u00E1."
-      },
-      "attribute": "hotsearchid",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "_preSelection": {},
-    "_visibleOptions": {}
-  }; }
-  static get events() { return [{
-      "method": "ezChange",
-      "name": "ezChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Este evento emite o c\u00F3digo do registro selecionado"
-      },
-      "complexType": {
-        "original": "OptionsPesquisa",
-        "resolved": "OptionsPesquisa",
-        "references": {
-          "OptionsPesquisa": {
-            "location": "local"
-          }
-        }
-      }
-    }]; }
-  static get methods() { return {
-    "onInputTeste": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {},
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "valueChanged"
-    }]; }
-}
+import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+;
+;
+export class EzSearch {
+  constructor() {
+    this._options = [];
+    this._classSelect = 'list-container--4row';
+    /**
+     * Deixa o campo disponível ou não para digitação.
+     */
+    this.enabled = true;
+    /**
+    * Quantidade máxima de itens guardados no localstorage
+    */
+    this.qtdHotItems = 6;
+    /**
+       * Ajusta a opção de mostrar o "value" para cada "label". Como default "value" não está presente (showvalue = false)
+       */
+    this.showvalue = false;
+    ///// HOTSEARCH /////
+    this.buildId = () => {
+      return btoa(`${this.hotsearchid}:${location.pathname}`);
+    };
+    this.getStorageItems = (key) => {
+      let storageValueStr = localStorage.getItem('hotSearch-ez-search:' + key);
+      let storageItems = [];
+      if (storageValueStr !== null) {
+        storageItems = JSON.parse(storageValueStr);
+      }
+      return storageItems;
+    };
+    this.orderHotList = (list) => {
+      return list.sort((a, b) => {
+        let time1 = new Date(a.dtRecent).getTime();
+        let time2 = new Date(b.dtRecent).getTime();
+        let qtd1 = a.qtd;
+        let qtd2 = b.qtd;
+        if (time1 < time2)
+          return -1;
+        if (time1 > time2)
+          return 1;
+        if (qtd1 > qtd2)
+          return -1;
+        if (qtd1 < qtd2)
+          return 1;
+        return 0;
+      });
+    };
+    this.saveStorageItem = (key, value) => {
+      if (value == '' || value == undefined)
+        return;
+      let storageItem = this.getStorageItems(key);
+      let element = this.getElement(storageItem, value);
+      if (element) {
+        element.qtd++;
+        element.dtRecent = this.getOnlyDate();
+      }
+      else {
+        if (storageItem.length >= this.qtdHotItems) {
+          storageItem = this.orderHotList(storageItem);
+          storageItem.splice(-1, 1);
+        }
+        storageItem.push({
+          description: value,
+          qtd: 1,
+          dtRecent: this.getOnlyDate()
+        });
+      }
+      localStorage.setItem('hotSearch-ez-search:' + key, JSON.stringify(storageItem));
+      return storageItem;
+    };
+    this.adjustOptions = (arrayOptions) => {
+      let optionsTemp = [];
+      arrayOptions.map(el => {
+        optionsTemp.push({
+          value: el.value,
+          label: el.label,
+          ajustedValue: el.value === null || el.value === undefined || el.value === '' ? el.label : el.value,
+        });
+      });
+      return optionsTemp;
+    };
+    this.sortArrayOptions = (array, propname) => {
+      const sortedArray = array.sort(function (a, b) {
+        if (a[propname] < b[propname]) {
+          return -1;
+        }
+        if (a[propname] > b[propname]) {
+          return 1;
+        }
+        return 0;
+      });
+      return sortedArray;
+    };
+  }
+  valueChanged() {
+    var _a;
+    if (this.value) {
+      this.ezChange.emit({ value: this.value, label: (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value });
+      let key = this.buildId();
+      this.saveStorageItem(key, this.value);
+    }
+  }
+  //ajustar ao fim do teste
+  onInputTeste() {
+    if (this._inputElem) {
+      this.handleChange();
+    }
+  }
+  getElement(storageItem, value) {
+    return storageItem.find(e => e.description === value);
+  }
+  getOnlyDate() {
+    let dt = new Date();
+    dt.setHours(0);
+    dt.setMinutes(0);
+    dt.setSeconds(0);
+    dt.setUTCMilliseconds(0);
+    return dt.toString();
+  }
+  onInputChange(ev) {
+    const el = ev.target;
+    let key = this.buildId();
+    this.saveStorageItem(key, el.value);
+  }
+  buildDataList() {
+    try {
+      if (this.hotsearchid === undefined) {
+        return;
+      }
+      let key = this.buildId();
+      let optionsArray = [];
+      this._options = [];
+      if (this.getStorageItems(key).length > 0) {
+        this.orderHotList(this.getStorageItems(key))
+          .forEach((el) => {
+          optionsArray.push({
+            value: el.description,
+            label: el.description,
+          });
+        });
+        this._options = [{ value: '', label: '' }].concat(optionsArray);
+        this.buildOptions();
+      }
+    }
+    catch (err) {
+      this.errormessage = err;
+    }
+  }
+  ///// EVENT HANDLERS
+  buildItem(opt, index) {
+    const className = index === this._preSelection ? "--li--preselected" : "";
+    return h("li", { class: className, key: opt.ajustedValue, accessKey: opt.label.toString(), id: 'item_' + opt.ajustedValue, onMouseDown: (ev) => this.handleSetValueByOption(ev) },
+      this.highlightMatch(opt.label),
+      this.showvalue ? h("span", { title: opt.ajustedValue, class: '--li__spanvalue' }, opt.ajustedValue) : null);
+  }
+  highlightMatch(label) {
+    var _a;
+    const spanClassName = this.showvalue ? '--li__spanlabel' : '--li__spanlabel--full-width';
+    if ((_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value) {
+      const criteriaLength = this._inputElem.value.length;
+      const matchStart = label.toUpperCase().indexOf(this._inputElem.value);
+      if (matchStart > -1) {
+        const strLabelStart = label.substr(0, matchStart);
+        const strLabelEnd = label.substr(matchStart + criteriaLength);
+        const strMatch = label.substr(matchStart, criteriaLength);
+        return (h("span", { class: spanClassName },
+          strLabelStart,
+          h("strong", null, strMatch),
+          strLabelEnd));
+      }
+    }
+    return (h("span", { class: spanClassName }, label));
+  }
+  showOptions() {
+    if (this.enabled) {
+      const top = this._inputElem.errormessage ? '0px' : '-17px';
+      this._popover.show(top);
+    }
+  }
+  nextOption() {
+    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) {
+    const liElem = this.el.shadowRoot.querySelector(`li#item_${opt.value}`);
+    if (liElem) {
+      const parent = liElem.parentElement;
+      const parentRect = parent.getBoundingClientRect();
+      const itemRect = liElem.getBoundingClientRect();
+      if (itemRect.bottom > parentRect.bottom || itemRect.top < parentRect.top) {
+        liElem.scrollIntoView();
+      }
+    }
+  }
+  selectCurrentOption() {
+    if (this._preSelection !== undefined) {
+      this.selectOption(this._visibleOptions[this._preSelection]);
+      this._preSelection = undefined;
+    }
+  }
+  selectOption(opt) {
+    this._popover.hide();
+    this.value = opt === null || opt === void 0 ? void 0 : opt.ajustedValue;
+    this._inputElem.value = opt.value;
+    //Definir com a equipe de design se vai ser utilizado dessa forma.
+    // this._inputElem.value = opt.value? opt.value + " - "+ opt?.label: '';
+  }
+  keyDownHandler(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        this.nextOption();
+        break;
+      case "ArrowUp":
+        this.previousOption();
+        break;
+      case "Enter":
+        this.selectCurrentOption();
+        break;
+    }
+    event.stopPropagation();
+  }
+  handleSetValueByOption(ev) {
+    this._popover.hide();
+    const spanEl = ev.target;
+    const sourceElement = ev.composedPath()[0];
+    let li;
+    if (sourceElement.tagName === 'SPAN') {
+      li = spanEl.parentNode;
+    }
+    else {
+      li = spanEl.parentNode.parentNode;
+    }
+    this.value = li.id.split('_')[1];
+    this._inputElem.value = li.accessKey;
+    this.ezChange.emit();
+  }
+  handleChange() {
+    if (this._changeDeboucing) {
+      window.clearTimeout(this._changeDeboucing);
+    }
+    this._changeDeboucing = window.setTimeout(() => {
+      var _a, _b;
+      if (((_b = (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) <= 0) {
+        return;
+      }
+      /* save tip on localStorage */
+      let key = this.buildId();
+      this.saveStorageItem(key, this._inputElem.value);
+      /* load data */
+      if (this.loadexecutor) {
+        this._loadDataFunction(this._inputElem.value, (serverData) => { this.populateOptions(serverData); });
+      }
+    }, 200);
+  }
+  normalizeResult(data) {
+    let options = [];
+    if (data instanceof Array) {
+      options = data;
+    }
+    else {
+      if (data instanceof Object) {
+        for (var key in data) {
+          let newOption = { value: '', label: '' };
+          newOption.value = key;
+          newOption.label = data[key];
+          options.push(newOption);
+        }
+      }
+    }
+    this._options = [{ value: '', label: '' }].concat(options);
+    this.buildOptions();
+  }
+  populateOptions(serverData) {
+    if (serverData instanceof Promise) {
+      serverData.then(this.normalizeResult);
+    }
+    else {
+      this.normalizeResult(serverData);
+    }
+  }
+  buildOptions() {
+    var _a;
+    this._visibleOptions = [];
+    this._visibleOptions = this.adjustOptions(this._options);
+    this._visibleOptions = this.sortArrayOptions(this._visibleOptions, 'label');
+    if (this._visibleOptions.length > 0) {
+      (_a = this._divElem) === null || _a === void 0 ? void 0 : _a.classList.add(this._classSelect);
+      this.showOptions();
+    }
+  }
+  setClassForSpanLabel() {
+    if (!this.showvalue) {
+      return '--li__spanlabel--full-width';
+    }
+    else {
+      return '--li__spanlabel';
+    }
+  }
+  handleFocus() {
+    if (this._inputElem && (!this._inputElem.value || this._inputElem.value.length === 0)) {
+      this.buildDataList();
+    }
+  }
+  parseExecutor(executor) {
+    if (executor) {
+      return executor instanceof Function ? executor : eval(executor);
+    }
+    return null;
+  }
+  componentDidLoad() {
+    if (this.value && this.value.length > 0) {
+      this._inputElem.value = this.value;
+    }
+    this._loadDataFunction = this.parseExecutor(this.loadexecutor);
+  }
+  render() {
+    var _a;
+    return (h(Host, null,
+      h("ez-text-input", { ref: (el) => { this._inputElem = el; }, label: this.label, enabled: this.enabled, onFocus: () => { this.handleFocus(); }, onInput: () => { this.handleChange(); }, onKeyDown: event => this.keyDownHandler(event), errormessage: this.errormessage },
+        h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-search", onClick: () => { alert("Esta ação irá abrir o PopUp!"); }, slot: "leftIcon" })),
+      h("ez-popover", { boxwidth: '100%', ref: el => this._popover = el },
+        h("div", { class: 'list-container', ref: (el) => this._divElem = el }, (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.map((opt, index) => this.buildItem(opt, index))))));
+  }
+  ;
+  static get is() { return "ez-search"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-search.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-search.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "C\u00F3digo do registro selecionado"
+      },
+      "attribute": "value",
+      "reflect": true
+    },
+    "label": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label \u00E9 o 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": "Deixa o campo dispon\u00EDvel ou n\u00E3o para digita\u00E7\u00E3o."
+      },
+      "attribute": "enabled",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "qtdHotItems": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Quantidade m\u00E1xima de itens guardados no localstorage"
+      },
+      "attribute": "qtd-hot-items",
+      "reflect": true,
+      "defaultValue": "6"
+    },
+    "showvalue": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Ajusta a op\u00E7\u00E3o de mostrar o \"value\" para cada \"label\". Como default \"value\" n\u00E3o est\u00E1 presente (showvalue = false)"
+      },
+      "attribute": "showvalue",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "errormessage": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Quando h\u00E1 um problema de valida\u00E7\u00E3o, serve como orienta\u00E7\u00E3o ao usu\u00E1rio"
+      },
+      "attribute": "errormessage",
+      "reflect": true
+    },
+    "loadexecutor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | Function",
+        "resolved": "Function | string",
+        "references": {
+          "Function": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Quando h\u00E1 um problema de valida\u00E7\u00E3o, serve como orienta\u00E7\u00E3o ao usu\u00E1rio"
+      },
+      "attribute": "loadexecutor",
+      "reflect": false
+    },
+    "hotsearchid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o identificador \u00FAnico do hotSearch, caso esta propriedade n\u00E3o seja preenchida, o hotSearch n\u00E3o funcionar\u00E1."
+      },
+      "attribute": "hotsearchid",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "_preSelection": {},
+    "_visibleOptions": {}
+  }; }
+  static get events() { return [{
+      "method": "ezChange",
+      "name": "ezChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Este evento emite o c\u00F3digo do registro selecionado"
+      },
+      "complexType": {
+        "original": "OptionsPesquisa",
+        "resolved": "OptionsPesquisa",
+        "references": {
+          "OptionsPesquisa": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "onInputTeste": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {},
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "valueChanged"
+    }]; }
+}