'use strict';

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

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

const bsDropdownWithOptionsCss = ".bs-dropdown-options{list-style:none;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{display:block}";

const BsDropdownWithOptions = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.optselected = index.createEvent(this, "optselected", 7);
    this.close = index.createEvent(this, "close", 7);
    this.enterend = index.createEvent(this, "enterend", 3);
    this.leaveend = index.createEvent(this, "leaveend", 3);
    /** Track which option is focused */
    this.focusedIndex = -1;
    /** Track selected option */
    this.selectedIndex = -1;
    /** Track whether the dropdown is currently visible. */
    this.isVisible = false;
    this.toggleId = undefined;
    this.containerId = undefined;
    this.optionsId = undefined;
    this.width = undefined;
    this.top = false;
    this.center = false;
    this.label = undefined;
    this.selectedValue = undefined;
    this.enterControlled = false;
    this.enterTrigger = false;
    this.leaveTrigger = false;
    this.activeDescendantId = undefined;
  }
  /** Pass down initial props */
  componentDidLoad() {
    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);
      // Set selected option
      const value = el.getAttribute('value');
      if (value === this.selectedValue) {
        this.selectedIndex = index;
        el.setAttribute('selected', 'true');
      }
    });
  }
  /** 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() {
    if (this.focusedIndex > -1) {
      this.optionEls[this.focusedIndex].removeAttribute('focused');
    }
  }
  /** Handles all applicable navigation key presses for dropdown accessibility */
  handleKeyDown(ev) {
    if (this.isVisible) {
      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.isVisible) {
      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.selectedIndex = ev.detail.index;
    this.optselected.emit(ev.detail.value);
    this.removeCurrentFocus();
    this.close.emit();
  }
  /** Dropdown has fully rendered */
  handleEnterEnd() {
    this.isVisible = true;
    // Focus a selected item only after open animation plays
    if (this.selectedIndex > -1) {
      this.focusedIndex = this.selectedIndex;
      this.optionEls[this.focusedIndex].setAttribute('focused', 'true');
    }
    this.enterend.emit();
  }
  handleClose(ev) {
    ev.stopPropagation();
    this.close.emit();
  }
  render() {
    return (index.h(index.Host, null, index.h("bs-dropdown", { width: this.width, top: this.top, center: this.center, toggleId: this.toggleId, containerId: this.containerId, enterControlled: this.enterControlled, enterTrigger: this.enterTrigger, leaveTrigger: this.leaveTrigger, onClose: (e) => this.handleClose(e), onEnterend: () => this.handleEnterEnd(), onLeaveend: () => this.leaveend.emit() }, index.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 }, index.h("slot", null)))));
  }
  get hostEl() { return index.getElement(this); }
};
BsDropdownWithOptions.style = bsDropdownWithOptionsCss;

exports.bs_dropdown_with_options = BsDropdownWithOptions;

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