'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-35579fcb.js');

const balSelectCss = "@keyframes spinAround{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes spinAround{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.sc-bal-select-h{display:block}.sc-bal-select-h{display:block}";

const Select = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.balChange = index.createEvent(this, "balChange", 7);
    this.balInput = index.createEvent(this, "balInput", 7);
    this.balBlur = index.createEvent(this, "balBlur", 7);
    this.balFocus = index.createEvent(this, "balFocus", 7);
    this.balClick = index.createEvent(this, "balClick", 7);
    this.balKeyDown = index.createEvent(this, "balKeyDown", 7);
    this.balKeyPress = index.createEvent(this, "balKeyPress", 7);
    this.balKeyUp = index.createEvent(this, "balKeyUp", 7);
    this.optionElements = new Map();
    this.textToScrollTo = '';
    this.label = '';
    this.remote = false;
    this.expanded = false;
    this.inverted = false;
    this.disabled = false;
    this.typeahead = false;
    this.loading = false;
    this.placeholder = '';
    this.scrollable = 250;
    this.options = [];
  }
  optionsChanged() {
    if (this.options.length === 0) {
      this.dropdownElement.close();
    }
  }
  async optionSelect(event) {
    var _a, _b;
    event.preventDefault();
    event.stopPropagation();
    this.value = Object.assign({}, event.detail);
    this.balChange.emit(event.detail);
    await ((_a = this.dropdownElement) === null || _a === void 0 ? void 0 : _a.toggle());
    this.dispatchEventToOptions(this.buildCustomEvent('balSelectChanged', this.value));
    this.inputElement.value = (_b = this.value) === null || _b === void 0 ? void 0 : _b.text;
  }
  async clear() {
    this.value = null;
    this.inputElement.value = '';
    this.dispatchEventToOptions(this.buildCustomEvent('balSelectChanged', this.value));
  }
  async onInputClick(event) {
    var _a;
    this.balClick.emit(event);
    if (!this.typeahead) {
      await ((_a = this.dropdownElement) === null || _a === void 0 ? void 0 : _a.toggle());
    }
  }
  onInput(event) {
    const inputValue = event.target.value;
    this.balInput.emit(inputValue);
    if (!this.remote) {
      this.dispatchEventToOptions(this.buildCustomEvent('balSelectInput', inputValue));
    }
    if (this.options.length > 0) {
      this.dropdownElement.open();
    }
  }
  onKeyPress(event) {
    this.balKeyPress.emit(event);
    if (!this.typeahead) {
      this.textToScrollTo = this.textToScrollTo + event.key;
      clearTimeout(this.clearScrollToValue);
      this.clearScrollToValue = setTimeout(() => {
        this.scrollToText(this.textToScrollTo);
        this.textToScrollTo = '';
      }, 600);
    }
  }
  render() {
    var _a;
    this.optionElements.clear();
    return (index.h(index.Host, null, index.h("bal-dropdown", { expanded: this.expanded, scrollable: this.scrollable, ref: el => (this.dropdownElement = el) }, index.h("div", { class: "control has-icons-right", slot: "trigger" }, index.h("input", { class: {
        'input': true,
        'clickable': true,
        'is-inverted': this.inverted,
      }, readonly: !this.typeahead, disabled: this.disabled, placeholder: this.placeholder, autoComplete: "off", value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.text, onInput: e => this.onInput(e), onBlur: e => this.balBlur.emit(e), onClick: e => this.onInputClick(e), onKeyDown: e => this.balKeyDown.emit(e), onKeyPress: e => this.onKeyPress(e), onKeyUp: e => this.balKeyUp.emit(e), onFocus: e => this.balFocus.emit(e), ref: el => (this.inputElement = el) }), index.h("bal-icon", { size: "medium", rotate: this.loading, color: this.inverted ? 'white' : 'blue', name: this.loading ? 'refresh' : this.typeahead ? 'search' : 'caret-down', "is-right": true })), this.options.map(option => (index.h("bal-select-option", { ref: el => this.optionElements.set(option.value, el), value: option }))))));
  }
  async scrollToText(text) {
    const dropdownContentElement = await this.dropdownElement.getContentElement();
    const option = this.options.find(option => option.text.startsWith(text));
    const optionElement = this.optionElements.get(option.value);
    dropdownContentElement.scrollTop = optionElement.offsetTop;
  }
  dispatchEventToOptions(event) {
    const options = this.element.querySelectorAll('bal-select-option');
    options.forEach(o => o.dispatchEvent(event));
  }
  buildCustomEvent(typeArg, detail) {
    return new CustomEvent(typeArg, { detail });
  }
  get element() { return index.getElement(this); }
  static get watchers() { return {
    "options": ["optionsChanged"]
  }; }
};
Select.style = balSelectCss;

exports.bal_select = Select;
