'use strict';

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

const index = require('./index-6e6e9b7c.js');

const BsDropdownOption = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.optmouseenter = index.createEvent(this, "optmouseenter", 7);
    this.optselect = index.createEvent(this, "optselect", 7);
    this.value = undefined;
    this.variant = undefined;
    this.optionsId = undefined;
    this.selected = false;
    this.focused = false;
    this.index = undefined;
  }
  componentDidLoad() {
    this.onFocusChange(this.focused);
  }
  onFocusChange(isFocusedNow) {
    if (isFocusedNow) {
      this.option.focus();
    }
    else {
      this.option.blur();
    }
  }
  handleKeyDown(ev) {
    switch (ev.key) {
      case ' ':
        this.handleSelect();
        break;
      case 'Enter':
        this.handleSelect();
        break;
      case 'NumpadEnter':
        this.handleSelect();
        break;
    }
    ev.preventDefault();
  }
  /** Notify parent of mouse entering so it can set focus. */
  handleMouseEnter() {
    this.optmouseenter.emit(this.index);
  }
  handleSelect() {
    this.optselect.emit({ id: this.id, index: this.index, value: this.value });
  }
  /** Generate an ID. */
  get id() {
    return `${this.optionsId}-option-${this.index}`;
  }
  render() {
    return (index.h(index.Host, { value: this.value }, index.h("li", { role: "option", "data-selected": this.selected ? '' : undefined, "data-variant": this.variant || undefined, "aria-selected": this.selected ? 'true' : undefined, id: this.id, tabIndex: -1, ref: el => this.option = el }, index.h("slot", null))));
  }
  static get watchers() { return {
    "focused": ["onFocusChange"]
  }; }
};

exports.bs_dropdown_option = BsDropdownOption;

//# sourceMappingURL=bs-dropdown-option.cjs.entry.js.map