'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}.is-turned-up.sc-bal-select{rotate:180deg}";

const Select = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.balChange = index.createEvent(this, "balChange", 7);
    this.balInput = index.createEvent(this, "balInput", 7);
    this.balCancel = index.createEvent(this, "balCancel", 7);
    this.balBlur = index.createEvent(this, "balBlur", 7);
    this.balFocus = index.createEvent(this, "balFocus", 7);
    this.balClick = index.createEvent(this, "balClick", 7);
    this.balKeyPress = index.createEvent(this, "balKeyPress", 7);
    this.isDropdownOpen = false;
    this.textToScrollTo = '';
    /**
     * If `true` the filtering of the options is done outside of the component.
     */
    this.remote = false;
    /**
     * If `true` the component uses the whole width.
     */
    this.expanded = false;
    /**
     * Set this to `true` when the component is placed on a dark background.
     */
    this.inverted = false;
    /**
     * If `true` the component is diabled.
     */
    this.disabled = false;
    /**
     * If `true` the user can search by typing into the input field.
     */
    this.typeahead = false;
    /**
     * If `true` the component shows a loading spinner and sets the input to readonly.
     */
    this.loading = false;
    /**
     * Defines the placeholder of the input element.
     */
    this.placeholder = '';
    /**
     * Defines the height of the dropdown list.
     */
    this.scrollable = 250;
    /**
     * List of the options.
     */
    this.options = [];
  }
  optionsChanged() {
    if (this.typeahead && this.remote) {
      if (this.options.length === 0) {
        this.dropdownElement.close();
      }
      else {
        if (this.inputElement.value.length > 0) {
          this.dropdownElement.open();
        }
      }
    }
  }
  async open() {
    if (this.disabled) {
      return undefined;
    }
    this.dropdownElement.open();
  }
  async close() {
    if (this.disabled) {
      return undefined;
    }
    this.dropdownElement.close();
  }
  /**
   *
   */
  async select(option) {
    var _a, _b;
    this.value = option;
    this.balChange.emit(this.value);
    this.inputElement.value = (_a = this.value) === null || _a === void 0 ? void 0 : _a.text;
    await ((_b = this.dropdownElement) === null || _b === void 0 ? void 0 : _b.toggle());
    this.updateOptionProps();
  }
  /**
   * Sets the value to null and resets the value of the input.
   */
  async clear() {
    this.value = null;
    this.inputElement.value = '';
    this.updateOptionProps();
  }
  async setFocus() {
    if (this.inputElement) {
      this.inputElement.focus();
    }
  }
  async onInputClick(event) {
    var _a;
    if (this.disabled) {
      return undefined;
    }
    this.balClick.emit(event);
    if (!this.typeahead) {
      await ((_a = this.dropdownElement) === null || _a === void 0 ? void 0 : _a.toggle());
    }
  }
  onDropdownChange(event) {
    this.isDropdownOpen = event.detail;
    event.stopPropagation();
  }
  onInput(event) {
    const inputValue = event.target.value;
    this.balInput.emit(inputValue);
    if (!this.remote) {
      this.updateOptionProps();
    }
    if (this.typeahead && inputValue.length === 0) {
      this.dropdownElement.close();
    }
    if (this.typeahead && !this.remote && inputValue.length > 0) {
      this.dropdownElement.open();
    }
  }
  updateOptionProps() {
    const inputValue = this.inputElement.value;
    this.childOptions.forEach(option => {
      if (!this.remote && this.typeahead) {
        const didMatch = this.compareForFilter(`${option.value.text}` || '', `${inputValue}`);
        option.setAttribute('hidden', `${!didMatch}`);
      }
      const isSelected = !!this.value && this.value.value === option.value.value;
      option.setAttribute('selected', `${isSelected}`);
    });
  }
  compareForFilter(text, input) {
    text = text.toLocaleLowerCase();
    input = input.toLocaleLowerCase();
    return text.indexOf(input) >= 0;
  }
  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);
    }
  }
  async scrollToText(input) {
    const dropdownContentElement = await this.dropdownElement.getContentElement();
    const optionElement = this.childOptions.find(o => this.compareForFilter(o.value.text, input));
    if (optionElement) {
      dropdownContentElement.scrollTop = optionElement.offsetTop;
    }
  }
  get childOptions() {
    return Array.from(this.element.querySelectorAll('bal-select-option'));
  }
  render() {
    var _a;
    return (index.h(index.Host, { role: "listbox" }, index.h("bal-dropdown", { expanded: this.expanded, scrollable: this.scrollable, onBalCollapse: e => this.onDropdownChange(e), 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 || this.loading, autoComplete: "off", disabled: this.disabled, placeholder: this.placeholder, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.text, onInput: e => this.onInput(e), onClick: e => this.onInputClick(e), onKeyPress: e => this.onKeyPress(e), onBlur: e => this.balBlur.emit(e), onFocus: e => this.balFocus.emit(e), ref: el => (this.inputElement = el) }), index.h("bal-icon", { size: "medium", "is-right": true, turn: !this.loading && !this.typeahead && this.isDropdownOpen, rotate: this.loading, color: this.inverted ? 'white' : 'blue', name: this.loading ? 'refresh' : this.typeahead ? 'search' : 'caret-down' })), this.options.map(option => (index.h("bal-select-option", { value: option }))))));
  }
  get element() { return index.getElement(this); }
  static get watchers() { return {
    "options": ["optionsChanged"]
  }; }
};
Select.style = balSelectCss;

exports.bal_select = Select;
