@sankhyalabs/ezui 1.1.4 → 1.1.8

package/dist/{ezui/ez-search.entry.js → collection/components/ez-search/ez-search.js}

@@ -1,334 +1,527 @@
-import { r as registerInstance, e as createEvent, h, i as Host, g as getElement } from './index-39044be2.js';
-
-const ezSearchCss = ":host{--srch--height:42px;--srch--width:100%;--srch__icon--width:48px;--srch--border-radius:var(--border--radius-medium, 12px);--srch--border-radius-small:var(--border--radius-small, 6px);--srch--font-size:var(--text--medium, 14px);--srch--font-family:var(--font-pattern, Arial);--srch--font-weight--large:var(--text-weight--large, 500);--srch--font-weight--medium:var(--text-weight--medium, 400);--srch--space--medium:var(--space--medium, 12px);--srch--space--small:var(--space--small, 6px);--srch--shadow:var(--shadow, 0px 0px 16px 0px rgba(0, 38, 111, .12));--srch--background-color--xlight:var(--background--xlight,#fff);--srch__list-z-index:var(--more-visible, 1);--srch__input--background-color:var(--background--medium, #e0e0e0);--srch__input--border:var(--border--medium, 2px solid);--srch__input--border-color:var(--srch__input--background-color);--srch__input--focus--border-color:var(--color--primary, #008561);--srch__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--srch__input--disabled--color:var(--text--disable, #AFB6C0);--srch__input--error--border-color:#CC2936;--srch__label--color:var(--title--primary, #919191);--srch__message_box--font-size:var(--text--small, 12px);--srch__message_box--info--color:var(--color--success, #22085d);--srch__message_box--error--color:var(--color--error, #FF0000);--srch__list-text--primary:var(--text--primary,#626e82);--srch__list-text--secondary:var(--text--secondary,#a2abb9);--srch__list-height:calc(4px + var(--srch--font-size) + var(--srch--space--medium));display:flex;flex-wrap:wrap;position:relative;width:var(--srch--width)}ez-text-input{--it__input--background-color:var(--srch__input--background-color, #FFFFFF);--it__input--border-color:var(--srch__input--border-color, #DCE0E8)}input{width:100%;box-sizing:border-box;padding:var(--space--medium);height:var(--srch--height);border-radius:var(--srch--border-radius);font-family:var(--srch--font-family);font-size:var(--srch--font-size);border:var(--srch__input--border);border-color:var(--srch__input--border-color);background-color:var(--srch__input--background-color);font-weight:var(--text-weight--large)}input:disabled{background-color:var(--srch__input--disabled--background-color);color:var(--srch__input--disabled--color)}input:focus{outline:none;border-color:var(--srch__input--focus--border-color)}input.icon--left{padding-left:var(--srch__icon--width)}input.icon--right{padding-right:var(--srch__icon--width)}input::placeholder{color:var(--srch__placeholder--color);font-weight:var(--srch__placeholder--font-weight)}input:disabled::placeholder{color:var(--srch__placeholder--disabled--color)}input.hasError{color:inherit;border-color:var(--srch__input--error--border-color)}input.text--right{text-align:right}ez-text-input{--it__input--background-color:var(--srch__input--background-color, #FFFFFF);--it__input--border-color:var(--srch__input--border-color, #DCE0E8)}.message-box{min-height:0;min-width:100%;margin-top:2px;line-height:12px;font-family:var(--srch--font-family);font-size:var(--srch__message_box--font-size);color:var(--srch__message_box--info--color)}.hasError{min-height:16px;color:var(--srch__message_box--error--color)}.input__label{font-size:var(--text--medium);font-weight:var(--text-weight--large);left:var(--space--medium);position:absolute;color:var(--title--primary);top:var(--space--medium);font-family:var(--srch--font-family);-webkit-transition:font-size .3s, top .3s;transition:font-size .3s, top .3s;z-index:var(--visible)}.input__label--floated{font-family:var(--srch--font-family);font-size:var(--text--extra-small);top:var(--space--small);color:var(--text--primary)}.input__label--left{left:var(--srch__icon--width)}.input--with--label{padding-bottom:0}.message-box{min-height:16px;min-width:100%;margin-top:2px;line-height:12px;font-family:var(--srch--font-family);font-size:var(--srch__message_box--font-size);color:var(--srch__message_box--info--color)}.hasError{color:var(--srch__message_box--error--color)}.list-container{z-index:var(--srch__list-z-index);padding:var(--srch--space--small);background:var(--srch--background-color--xlight);border-radius:var(--srch--border-radius);width:100%;overflow:auto;box-sizing:border-box;max-height:calc(4*var(--srch__list-height) + 2*var(--srch--space--small))}li{list-style-type:none;border-radius:var(--srch--border-radius-small);padding:0 var(--srch--space--small);display:flex;justify-content:space-between;align-items:center}li:hover{background-color:var(--background--medium)}.--li__spanlabel{color:var(--srch__list-text--primary);border-radius:var(--srch--border-radius-small);padding:0 var(--srch--space--small);height:var(--srch__list-height);font-weight:var(--srch--font-weight--large);font-family:var(--srch--font-family);line-height:var(--srch__list-height);vertical-align:middle;text-overflow:ellipsis;width:80%;min-width:30px;overflow-x:hidden;text-align:left}.--li__spanlabel--full-width{color:var(--srch__list-text--primary);border-radius:var(--srch--border-radius-small);padding:0 var(--srch--space--small);height:var(--srch__list-height);font-weight:var(--srch--font-weight--large);font-family:var(--srch--font-family);line-height:var(--srch__list-height);vertical-align:middle;text-overflow:ellipsis;width:100%;min-width:30px;overflow-x:hidden;text-align:left}.--li__spanvalue{color:var(--srch__list-text--secondary);border-radius:var(--srch--border-radius-small);padding:0 var(--srch--space--small);height:var(--srch__list-height);font-weight:var(--srch--font-weight--medium);font-family:var(--srch--font-family);line-height:var(--srch__list-height);vertical-align:middle;text-overflow:ellipsis;width:20%;min-width:20px;overflow-x:hidden;text-align:right}.btn-open-search{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-search:disabled{cursor:unset}.btn-open-search::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:22px;height:22px;clip-path:path(\"m 9.4,2.3 c 4.1,0 7.4,3.2 7.4,7.2 0,1.8 -0.7,3.4 -1.8,4.7 l 0.3,0.3 h 0.9 l 5.7,5.6 -1.7,1.7 -5.7,-5.6 V 15.3 L 14.3,15 C 13,16.1 11.3,16.7 9.5,16.7 5.3,16.7 2,13.5 2,9.5 2,5.5 5.3,2.3 9.4,2.3 m 0,2.2 c -2.9,0 -5.1,2.2 -5.1,5 0,2.8 2.3,5 5.1,5 2.8,0 5.1,-2.2 5.1,-5 0,-2.8 -2.2,-5 -5.1,-5 z\")}.btn-open-search:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-search:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}.--li--preselected{background-color:var(--background--strong)}";
-
-;
-;
-const EzSearch = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ezChange = createEvent(this, "ezChange", 7);
-    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))))));
-  }
-  ;
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "value": ["valueChanged"]
-  }; }
-};
-EzSearch.style = ezSearchCss;
-
-export { EzSearch as ez_search };
+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"
+    }]; }
+}