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

const BsDropdown$1 = /*@__PURE__*/ proxyCustomElement(class BsDropdown extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.dropdownchange = createEvent(this, "dropdownchange", 7);
    this.close = createEvent(this, "close", 7);
    this.dropdownId = undefined;
    this.shown = undefined;
    this.label = undefined;
    this.position = undefined;
    this.justify = undefined;
    this.variant = undefined;
  }
  /** Get the bs-dropdown-options element */
  get optionsEl() {
    var _a, _b;
    if (!this._optionsEl) {
      const slotEl = this.hostEl.shadowRoot.querySelector('slot');
      const slotContainer = (_a = slotEl.assignedElements) === null || _a === void 0 ? void 0 : _a.call(slotEl)[0];
      this._optionsEl = Array.from((_b = slotContainer === null || slotContainer === void 0 ? void 0 : slotContainer.children) !== null && _b !== void 0 ? _b : []).find((el) => el.tagName === 'BS-DROPDOWN-OPTIONS');
    }
    return this._optionsEl;
  }
  /** Reset the internally stored options element when slot gets updated */
  handleSlotChange() {
    this._optionsEl = undefined;
  }
  /** Pass down props */
  componentDidRender() {
    const optionsChild = this.optionsEl;
    // Stencil Vue wrappers have an issue with camelCase props currently
    // So, sending both attributes
    optionsChild === null || optionsChild === void 0 ? void 0 : optionsChild.setAttribute('dropdown-id', this.dropdownId);
    optionsChild === null || optionsChild === void 0 ? void 0 : optionsChild.setAttribute('dropdownid', this.dropdownId);
    optionsChild === null || optionsChild === void 0 ? void 0 : optionsChild.setAttribute('shown', this.shown ? 'true' : 'false');
    optionsChild === null || optionsChild === void 0 ? void 0 : optionsChild.setAttribute('label', this.label);
    optionsChild === null || optionsChild === void 0 ? void 0 : optionsChild.setAttribute('variant', this.variant);
    optionsChild === null || optionsChild === void 0 ? void 0 : optionsChild.setAttribute('position', this.position);
  }
  render() {
    return (h(Host, { "data-justify": this.justify || undefined }, h("div", { class: "bs-dropdown", part: "container" }, h("slot", { onSlotchange: this.handleSlotChange.bind(this) }))));
  }
  get hostEl() { return this; }
}, [1, "bs-dropdown", {
    "dropdownId": [1, "dropdown-id"],
    "shown": [4],
    "label": [1],
    "position": [1],
    "justify": [1],
    "variant": [1]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bs-dropdown"];
  components.forEach(tagName => { switch (tagName) {
    case "bs-dropdown":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, BsDropdown$1);
      }
      break;
  } });
}

const BsDropdown = BsDropdown$1;
const defineCustomElement = defineCustomElement$1;

export { BsDropdown, defineCustomElement };

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