import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';

const BsDropdownOption = /*@__PURE__*/ proxyCustomElement(class BsDropdownOption extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.optmouseenter = createEvent(this, "optmouseenter", 7);
    this.optselect = 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) {
    var _a;
    switch (ev.key) {
      case ' ':
      case 'Enter':
      case 'NumpadEnter':
        this.handleSelect();
        // If the option is a link, click it
        (_a = this.option.querySelector('a')) === null || _a === void 0 ? void 0 : _a.click();
        break;
    }
    ev.preventDefault();
  }
  /** Notify parent of mouse entering so it can set focus. */
  handleMouseEnter() {
    this.optmouseenter.emit(this.index);
  }
  handleSelect() {
    var _a;
    this.optselect.emit({ id: this.id, index: this.index, value: this.value });
    // If the option is a link, click it
    (_a = this.option.querySelector('a')) === null || _a === void 0 ? void 0 : _a.click();
  }
  /** Generate an ID. */
  get id() {
    return `${this.optionsId}-option-${this.index}`;
  }
  render() {
    return (h(Host, { value: this.value }, 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 }, h("slot", null))));
  }
  static get watchers() { return {
    "focused": ["onFocusChange"]
  }; }
}, [4, "bs-dropdown-option", {
    "value": [1],
    "variant": [1],
    "optionsId": [1, "options-id"],
    "selected": [4],
    "focused": [4],
    "index": [2]
  }, [[0, "keydown", "handleKeyDown"], [1, "mouseenter", "handleMouseEnter"], [0, "click", "handleSelect"]]]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bs-dropdown-option"];
  components.forEach(tagName => { switch (tagName) {
    case "bs-dropdown-option":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, BsDropdownOption);
      }
      break;
  } });
}

export { BsDropdownOption as B, defineCustomElement as d };

//# sourceMappingURL=bs-dropdown-option2.js.map