import { r as registerInstance, e as createEvent, h } from './index-ee578edf.js';

const synbeeSearchboxCss = ":host{font-family:Roboto, serif;display:flex}input{display:inline-flex;flex-grow:1;background-color:ghostwhite;border:0;border-radius:10px;padding:10px;margin-right:1rem;margin-left:1rem;color:#839ECB;font-weight:bold}input:focus{outline:none !important;display:block;border-color:#839ECB}textarea:focus{display:block;outline:none !important;border-color:#ABBCDB}::-moz-placeholder{color:#839ECB;opacity:1;font-weight:bold}:-ms-input-placeholder{color:#839ECB;opacity:1;font-weight:bold}::placeholder{color:#839ECB;opacity:1;font-weight:bold}.hidden{display:none}.searched-value-container{display:flex;margin-right:1rem;margin-left:1rem;margin-top:0.1rem;color:cornflowerblue;background-color:white}.row-search{cursor:pointer}.container{display:flex;flex-direction:column}";

const SynbeeSearchbox = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.stringSearched = createEvent(this, "stringSearched", 7);
    this.valueChanged = createEvent(this, "valueChanged", 7);
    this.selectValueSearched = createEvent(this, "selectValueSearched", 7);
    this.isOpen = false;
    this.type = 'text';
    this.searchResult = [];
  }
  onUserInput(event) {
    this.userInput = event.target.value;
    this.searchText = this.userInput;
  }
  onInputChangeValue(event) {
    this.value = event.target.value;
    this.valueChanged.emit(this.value);
  }
  toggle() {
    this.isOpen = !this.isOpen;
  }
  handleKeyDown(ev) {
    if (ev.key === 'Enter') {
      console.log('Enter pressed, searchResult update: ', this.searchResult);
      this.searchResult.push(this.value);
      this.stringSearched.emit(this.value);
    }
  }
  onRowClicked(name) {
    this.selectValueSearched.emit(name);
    console.log(name, ' emesso');
    this.isOpen = !this.isOpen;
  }
  render() {
    return (h("div", { class: "container" }, h("input", { onClick: () => this.toggle(), onInput: this.onInputChangeValue.bind(this), class: "searchbox", value: this.value, placeholder: this.label }), h("div", { class: {
        'searchbox': true,
        'hidden': !this.isOpen
      } }, h("div", { class: "searched-value-container" }, h("table", null, this.searchResult.map(s => (h("tr", { class: "row-search", onClick: this.onRowClicked.bind(this, s) }, h("td", null, s)))))))));
  }
};
SynbeeSearchbox.style = synbeeSearchboxCss;

export { SynbeeSearchbox as synbee_searchbox };
