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

const bsDropdownOptionListCss = ".bs-dropdown-options{list-style:none;margin-bottom:0.25rem;margin-top:0.25rem;max-height:var(--options-height-max, 20rem);overflow-y:auto;padding:0}.bs-dropdown-options :where(li:first-child){margin-top:0.5rem}.bs-dropdown-options :where(li){align-items:center;border-bottom:2px solid transparent;border-left:4px solid transparent;border-radius:3px;border-right:2px solid transparent;border-top:2px solid transparent;color:var(--bs-ink-base);column-gap:0.5rem;cursor:pointer;display:grid;margin-bottom:0.5rem;padding-bottom:0.25rem;padding-left:1.25rem;padding-right:1.375rem;padding-top:0.25rem;row-gap:0.125rem;word-break:break-word;word-wrap:break-word}.bs-dropdown-options :where(li[data-variant~=\"2-col\"]){grid-template-columns:min-content 1fr}.bs-dropdown-options :where(li:not([data-variant~=\"2-col\"])[data-variant~=\"description\"] :nth-child(2)){color:var(--bs-ink-light);font-size:var(--bs-text-xs);min-height:1.125rem;line-height:1.125rem}.bs-dropdown-options :where(li[data-variant~=\"2-col\"][data-variant~=\"description\"] :nth-child(3)){color:var(--bs-ink-light);font-size:var(--bs-text-xs);grid-column-start:2;min-height:1.125rem;line-height:1.125rem}.bs-dropdown-options :where(li:hover),.bs-dropdown-options :where(li[data-selected]){background-color:var(--bs-bg-medium);border-left:4px solid var(--bs-blue-base);color:var(--bs-blue-base);outline:none}.bs-dropdown-options :where(li[data-variant~=\"negative\"]:hover),.bs-dropdown-options :where(li[data-variant~=\"negative\"][data-selected]),.bs-dropdown-options :where(li[data-variant~=\"negative\"][data-selected]:hover){background-color:rgba(248, 169, 170, 0.25);border-left:4px solid var(--bs-red-500);color:var(--bs-red-500)}.bs-dropdown-options :where(li:not([data-variant~=\"2-col\"])[data-variant~=\"description\"]:hover :nth-child(2)),.bs-dropdown-options :where(li[data-variant~=\"2-col\"][data-variant~=\"description\"]:hover :nth-child(3)),.bs-dropdown-options :where(li:not([data-variant~=\"2-col\"])[data-variant~=\"description\"][data-selected] :nth-child(2)),.bs-dropdown-options :where(li[data-variant~=\"2-col\"][data-variant~=\"description\"][data-selected] :nth-child(3)){color:var(--bs-blue-base)}.bs-dropdown-options :where(li[data-variant~=\"negative\"]:not([data-variant~=\"2-col\"])[data-variant~=\"description\"]:hover :nth-child(2)),.bs-dropdown-options :where(li[data-variant~=\"negative\"][data-variant~=\"2-col\"][data-variant~=\"description\"]:hover :nth-child(3)),.bs-dropdown-options :where(li[data-variant~=\"negative\"]:not([data-variant~=\"2-col\"])[data-variant~=\"description\"][data-selected] :nth-child(2)),.bs-dropdown-options :where(li[data-variant~=\"negative\"][data-variant~=\"2-col\"][data-variant~=\"description\"][data-selected] :nth-child(3)){color:var(--bs-red-500)}.bs-dropdown-options :where(li:focus:not(:focus-visible)){outline:none}.bs-dropdown-options :where(li[data-variant~=\"negative\"]:focus:not(:focus-visible)){outline:none}.bs-dropdown-options :where(li:focus-visible){--focus-border-color:var(--bs-blue-base);border:2px solid var(--focus-border-color);outline:none;padding-left:0.625rem}.bs-dropdown-options :where(li[data-selected]:focus-visible){border-left:4px solid var(--focus-border-color);padding-left:0.5rem}.bs-dropdown-options :where(li[data-variant~=\"negative\"]:focus-visible){--focus-border-color:var(--bs-red-200)}@media (min-width: 752px){.bs-dropdown-options :where(li){padding-left:0.5rem;padding-right:0.75rem}.bs-dropdown-options :where(li:focus-visible){padding-left:0.625rem}.bs-dropdown-options :where(li[data-selected]:focus-visible){padding-left:0.5rem}}bs-dropdown-option-list{display:block}";

const BsDropdownOptionList = /*@__PURE__*/ proxyCustomElement(class BsDropdownOptionList extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.optselected = createEvent(this, "optselected", 7);
    this.close = createEvent(this, "close", 7);
    /** Track which option is focused */
    this.focusedIndex = -1;
    /** Track selected option */
    this.selectedIndex = -1;
    /** Will observe for child option updates */
    this.mutationObserver = null;
    this.optionsId = undefined;
    this.visible = false;
    this.focusDelay = 75;
    this.label = undefined;
    this.selectedValue = undefined;
    this.activeDescendantId = undefined;
  }
  componentDidLoad() {
    this.passOptionProps();
    // Set selected and focus on mount, if possible
    this.handleVisible();
    this.mutationObserverSetup();
  }
  /** Pass down relevant props */
  passOptionProps() {
    this.optionEls.forEach((el, index) => {
      el.setAttribute('index', String(index));
      // Stencil Vue wrappers have an issue with camelCase props currently
      // So, sending both attributes
      el.setAttribute('options-id', this.optionsId);
      el.setAttribute('optionsid', this.optionsId);
    });
  }
  /** Watch for options being added/removed */
  mutationObserverSetup() {
    this.mutationObserver = new MutationObserver(() => {
      this._optionEls = null;
      this.passOptionProps();
    });
    this.mutationObserver.observe(this.optionsEl, { childList: true });
  }
  disconnectedCallback() {
    var _a, _b;
    // Clean up mutation observer
    (_b = (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
    this.mutationObserver = null;
  }
  /** Get the dropdown option elements. */
  get optionEls() {
    if (!this._optionEls) {
      const els = this.optionsEl.querySelectorAll('bs-dropdown-option');
      this._optionEls = Array.from(els);
    }
    return this._optionEls;
  }
  /** Removes focus from the currently focused option, if applicable */
  removeCurrentFocus() {
    var _a;
    if (this.focusedIndex > -1) {
      (_a = this.optionEls[this.focusedIndex]) === null || _a === void 0 ? void 0 : _a.removeAttribute('focused');
    }
  }
  /** Handles all applicable navigation key presses for dropdown accessibility */
  handleKeyDown(ev) {
    if (this.visible) {
      switch (ev.key) {
        case 'ArrowDown':
          this.traverse('down');
          ev.preventDefault();
          break;
        case 'ArrowUp':
          this.traverse('up');
          ev.preventDefault();
          break;
        case 'Home':
          this.traverse('home');
          ev.preventDefault();
          break;
        case 'End':
          this.traverse('end');
          ev.preventDefault();
          break;
        case 'Tab':
          // Prevent tab from doing anything while dropdown is open
          ev.preventDefault();
          break;
      }
    }
  }
  /** Traverses focus of the option list via keyboard navigation */
  traverse(direction) {
    let newIndex;
    switch (direction) {
      case 'up':
        newIndex = (this.focusedIndex - 1 < 0) ?
          this.optionEls.length - 1 :
          this.focusedIndex - 1;
        break;
      case 'down':
        newIndex = (this.focusedIndex + 1) % this.optionEls.length;
        break;
      case 'home':
        newIndex = 0;
        break;
      case 'end':
        newIndex = this.optionEls.length - 1;
        break;
    }
    this.removeCurrentFocus();
    this.optionEls[newIndex].setAttribute('focused', 'true');
    this.focusedIndex = newIndex;
  }
  /** Handles moving focus on mouse hover */
  handleMouseFocus(ev) {
    if (this.visible) {
      this.removeCurrentFocus();
      this.focusedIndex = ev.detail;
    }
  }
  /**
   * Handles selection by updating various internal states and emitting to
   * parent
   */
  handleSelect(ev) {
    this.activeDescendantId = ev.detail.id;
    this.optselected.emit(ev.detail.value);
    this.removeCurrentFocus();
    this.close.emit();
  }
  /** Focuses and sets selected on a selected option on when visible */
  handleVisible() {
    var _a, _b, _c;
    if (this.visible) {
      // Find selected index
      this.selectedIndex = this.optionEls.findIndex((el) => el.getAttribute('value') === this.selectedValue);
      // Set selected / focused when applicable
      if (this.selectedIndex > -1) {
        (_a = this.optionEls[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.setAttribute('selected', 'true');
        this.focusedIndex = this.selectedIndex;
        if (this.focusDelay > 0) {
          setTimeout(() => {
            var _a;
            (_a = this.optionEls[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.setAttribute('focused', 'true');
          }, this.focusDelay);
        }
        else {
          (_b = this.optionEls[this.selectedIndex]) === null || _b === void 0 ? void 0 : _b.setAttribute('focused', 'true');
        }
      }
    }
    else {
      // Clear out selected item when not visible
      (_c = this.optionEls[this.selectedIndex]) === null || _c === void 0 ? void 0 : _c.removeAttribute('selected');
    }
  }
  render() {
    return (h(Host, null, h("ul", { class: "bs-dropdown-options", role: "listbox", id: this.optionsId, "aria-label": this.label || undefined, "aria-activedescendant": this.activeDescendantId || undefined, ref: el => this.optionsEl = el }, h("slot", null))));
  }
  get hostEl() { return this; }
  static get watchers() { return {
    "visible": ["handleVisible"]
  }; }
  static get style() { return bsDropdownOptionListCss; }
}, [4, "bs-dropdown-option-list", {
    "optionsId": [1, "options-id"],
    "visible": [4],
    "focusDelay": [2, "focus-delay"],
    "label": [1],
    "selectedValue": [1, "selected-value"],
    "activeDescendantId": [32]
  }, [[8, "keydown", "handleKeyDown"], [0, "optmouseenter", "handleMouseFocus"], [0, "optselect", "handleSelect"]]]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bs-dropdown-option-list"];
  components.forEach(tagName => { switch (tagName) {
    case "bs-dropdown-option-list":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, BsDropdownOptionList);
      }
      break;
  } });
}

export { BsDropdownOptionList as B, defineCustomElement as d };

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