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

const BsDropdownOption$1 = /*@__PURE__*/ proxyCustomElement(class BsDropdownOption extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.mousefocus = createEvent(this, "mousefocus", 7);
    this.optionselect = createEvent(this, "optionselect", 7);
    this.value = undefined;
    this.variant = undefined;
    this.selected = false;
    this.shown = undefined;
    this.focused = undefined;
    this.index = undefined;
    this.dropdownId = undefined;
  }
  /** Handle focusing on initial load. */
  componentDidLoad() {
    this.onFocusChange(this.focused);
  }
  /** Handle focusing/blurring when the prop changes. */
  onFocusChange(newVal) {
    if (newVal) {
      this.option.focus();
    }
    else {
      this.option.blur();
    }
  }
  /** Handle various keyboard events for an option. */
  handleKeyDown(ev) {
    if (this.shown) {
      switch (ev.key) {
        case ' ':
          this.handleSelect();
          ev.preventDefault();
          break;
        case 'Enter':
          this.handleSelect();
          break;
        case 'NumpadEnter':
          this.handleSelect();
          break;
      }
    }
  }
  /** Handle mouse entering an option by notifying the parent. */
  handleMouseEnter() {
    this.mousefocus.emit(this.index);
  }
  /** Handle clicking on an option. */
  handleSelect() {
    this.optionselect.emit({ id: this.id, index: this.index, value: this.value });
  }
  /** Generate an ID for this option. */
  get id() {
    return `${this.dropdownId}-option-${this.index}`;
  }
  render() {
    return (h(Host, { "data-selected": this.selected ? '' : undefined, "data-variant": this.variant || undefined }, h("li", { role: "option", "data-selected": this.selected ? '' : undefined, "data-variant": this.variant || undefined, "aria-selected": this.selected ? 'true' : undefined, tabIndex: this.shown ? -1 : undefined, id: this.id, ref: el => this.option = el, part: "option" }, h("slot", null))));
  }
  static get watchers() { return {
    "focused": ["onFocusChange"]
  }; }
}, [1, "bs-dropdown-option", {
    "value": [1],
    "variant": [1],
    "selected": [4],
    "shown": [4],
    "focused": [4],
    "index": [2],
    "dropdownId": [1, "dropdown-id"]
  }, [[0, "keydown", "handleKeyDown"], [1, "mouseenter", "handleMouseEnter"], [0, "click", "handleSelect"]]]);
function defineCustomElement$1() {
  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$1);
      }
      break;
  } });
}

const BsDropdownOption = BsDropdownOption$1;
const defineCustomElement = defineCustomElement$1;

export { BsDropdownOption, defineCustomElement };

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