import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$3 } from './bs-dropdown2.js';
import { d as defineCustomElement$2 } from './bs-dropdown-option-list2.js';
import { d as defineCustomElement$1 } from './bs-transition2.js';

const bsDropdownWithOptionsCss = "bs-dropdown-with-options{display:block}";

const BsDropdownWithOptions = /*@__PURE__*/ proxyCustomElement(class BsDropdownWithOptions extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.optselected = createEvent(this, "optselected", 7);
    this.close = createEvent(this, "close", 7);
    this.enterend = createEvent(this, "enterend", 3);
    this.leaveend = createEvent(this, "leaveend", 3);
    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.helperText = undefined;
    this.helperDescription = undefined;
    this.isVisible = false;
  }
  /** Dropdown has fully rendered */
  handleEnterEnd() {
    this.isVisible = true;
    this.enterend.emit();
  }
  handleOptSelected(ev) {
    ev.stopPropagation();
    this.isVisible = false;
    this.optselected.emit(ev.detail);
    this.close.emit();
  }
  handleClose(ev) {
    ev.stopPropagation();
    if (this.isVisible) {
      this.isVisible = false;
      this.close.emit();
    }
  }
  render() {
    return (h(Host, null, 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, helperText: this.helperText, helperDescription: this.helperDescription, onClose: (e) => this.handleClose(e), onEnterend: () => this.handleEnterEnd(), onLeaveend: () => this.leaveend.emit() }, h("bs-dropdown-option-list", { optionsId: this.optionsId, visible: this.isVisible, focusDelay: 0, label: this.label, selectedValue: this.selectedValue, onOptselected: (e) => this.handleOptSelected(e), onClose: (e) => this.handleClose(e) }, h("slot", null)))));
  }
  static get style() { return bsDropdownWithOptionsCss; }
}, [4, "bs-dropdown-with-options", {
    "toggleId": [1, "toggle-id"],
    "containerId": [1, "container-id"],
    "optionsId": [1, "options-id"],
    "width": [1],
    "top": [4],
    "center": [4],
    "label": [1],
    "selectedValue": [1, "selected-value"],
    "enterControlled": [4, "enter-controlled"],
    "enterTrigger": [4, "enter-trigger"],
    "leaveTrigger": [4, "leave-trigger"],
    "helperText": [1, "helper-text"],
    "helperDescription": [1, "helper-description"],
    "isVisible": [32]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bs-dropdown-with-options", "bs-dropdown", "bs-dropdown-option-list", "bs-transition"];
  components.forEach(tagName => { switch (tagName) {
    case "bs-dropdown-with-options":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, BsDropdownWithOptions);
      }
      break;
    case "bs-dropdown":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "bs-dropdown-option-list":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "bs-transition":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}

export { BsDropdownWithOptions as B, defineCustomElement as d };

//# sourceMappingURL=bs-dropdown-with-options2.js.map