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

const bsDropdownCss = ".bs-dropdown-parent{display:inline-block;position:relative}.bs-dropdown{--dropdown-bottom:0;--dropdown-left:0;--dropdown-top:auto;--dropdown-width:100%;background-color:var(--bs-bg-base-elevated);border-radius:4px;bottom:var(--dropdown-bottom);box-shadow:var(--bs-shadow-contentMedium);left:var(--dropdown-left);line-height:1.5rem;margin:0;opacity:0;overflow-y:auto;position:fixed;top:var(--dropdown-top);transform:translateY(100%);transform-origin:center bottom;transition-duration:75ms;transition-property:opacity, transform;transition-timing-function:ease-in-out;width:var(--dropdown-width);z-index:-1}.bs-dropdown>:where(header){border-bottom:1px solid var(--bs-border-base);padding:1.5rem}.bs-dropdown>:where(header) :where(h3){font-size:1.25rem}.bs-dropdown>:where(header) :where(p){font-size:1rem}.bs-dropdown :where(.bs-dropdown-search){padding:1.5rem 1.5rem 0 1.5rem}.bs-dropdown :where(.bs-dropdown-search bs-input-search){margin-bottom:1rem;margin-left:-0.75rem;width:calc(100% + 1.5rem)}.bs-dropdown:where([data-search]) :where(.bs-dropdown-options){--options-height-max:11.5rem}.bs-dropdown:where([data-shown]){opacity:1;transform:translateY(0);z-index:999}@media (min-width: 752px){.bs-dropdown{--dropdown-bottom:var(--dropdown-wscreen-bottom, auto);--dropdown-left:var(--dropdown-wscreen-left, initial);--dropdown-top:var(--dropdown-wscreen-top, calc(100% + 0.5rem));--dropdown-width:var(--dropdown-wscreen-width, initial);position:absolute;transform:initial}.bs-dropdown>:where(header){display:none}.bs-dropdown:where([data-width=\"sm\"]){--dropdown-wscreen-width:10rem}.bs-dropdown:where([data-width=\"md\"]),.bs-dropdown:where(:not([data-width])){--dropdown-wscreen-width:20rem}.bs-dropdown:where([data-width=\"lg\"]){--dropdown-wscreen-width:40rem}.bs-dropdown:where([data-width=\"content\"]){--dropdown-wscreen-width:auto}.bs-dropdown-parent:where([data-width=\"toggle\"]) :where(.bs-dropdown){--dropdown-wscreen-width:100%}.bs-dropdown:where([data-shown]){opacity:1}.bs-dropdown:where([data-top]){--dropdown-wscreen-bottom:calc(100% + 0.5rem);--dropdown-wscreen-top:auto}.bs-dropdown-parent:where([data-center]) :where(.bs-dropdown){--dropdown-wscreen-left:50%;transform:translateX(-50%)}.bs-dropdown :where(.bs-dropdown-options){--options-height-max:20rem}.bs-dropdown:where([data-search]) :where(.bs-dropdown-options){--options-height-max:17.25rem}}bs-dropdown{display:block}";

const BsDropdown = /*@__PURE__*/ proxyCustomElement(class BsDropdown extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.close = createEvent(this, "close", 7);
    this.enterend = createEvent(this, "enterend", 3);
    this.leaveend = createEvent(this, "leaveend", 3);
    this.isVisible = false;
    this.width = undefined;
    this.top = false;
    this.center = false;
    this.toggleId = undefined;
    this.containerId = undefined;
    this.helperText = undefined;
    this.helperDescription = undefined;
    this.enterControlled = false;
    this.enterTrigger = false;
    this.leaveTrigger = false;
  }
  componentDidLoad() {
    if (this.containerId) {
      this.containerEl = document.getElementById(this.containerId);
    }
    this.toggleEl = document.getElementById(this.toggleId);
    this.setPosition();
    this.setWidth();
  }
  componentDidUpdate() {
    this.setPosition();
    this.setWidth();
  }
  /**
   * Dynamically set position based on toggle element. Doing this rather than
   * relying on CSS since the dropdown's container could live anywhere on the
   * DOM (in the case of teleporting the dropdown to a higher DOM level).
   *
   * Use custom properties rather than explicit properties to allow for
   * us to ignore them on mobile.
   */
  setPosition() {
    const containerRect = this.containerEl.getBoundingClientRect();
    const toggleRect = this.toggleEl.getBoundingClientRect();
    const dropdownRect = this.dropdownDiv.getBoundingClientRect();
    // Calculate top/bottom position relative to target container
    if (this.top) {
      const bottom = containerRect.bottom - toggleRect.bottom;
      this.dropdownDiv.style.setProperty('--dropdown-wscreen-top', 'auto');
      this.dropdownDiv.style.setProperty('--dropdown-wscreen-bottom', `${bottom + toggleRect.height + 8}px`);
    }
    else {
      const top = toggleRect.top - containerRect.top;
      this.dropdownDiv.style.setProperty('--dropdown-wscreen-top', `${top + toggleRect.height + 8}px`);
      this.dropdownDiv.style.setProperty('--dropdown-wscreen-bottom', 'auto');
    }
    // Calculate left position relative to target container
    const left = toggleRect.left - containerRect.left;
    if (this.center) {
      const offset = (toggleRect.width - dropdownRect.width) / 2;
      this.dropdownDiv.style.setProperty('--dropdown-wscreen-left', `${left + offset}px`);
    }
    else {
      this.dropdownDiv.style.setProperty('--dropdown-wscreen-left', `${left}px`);
    }
  }
  /**
   * Special case when width is "toggle".
   * Dynamically set width based on toggle element. Doing this rather than
   * relying on CSS since the dropdown's container could live anywhere on the
   * DOM (in the case of teleporting the dropdown to a higher DOM level).
   */
  setWidth() {
    if (this.width === 'toggle') {
      const toggleRect = this.toggleEl.getBoundingClientRect();
      this.dropdownDiv.style.setProperty('--dropdown-wscreen-width', `${toggleRect.width}px`);
    }
    else {
      this.dropdownDiv.style.setProperty('--dropdown-wscreen-width', '');
    }
  }
  /** Close the dropdown on Escape key. */
  handleEscape(ev) {
    if (this.isVisible && ev.key === 'Escape') {
      this.close.emit();
    }
  }
  /** Close the dropdown when clicking outside of it or the toggle element. */
  handleClickOutside(ev) {
    if (this.isVisible) {
      const toggleEl = document.getElementById(this.toggleId);
      if (!this.dropdownDiv.contains(ev.target) &&
        !toggleEl.contains(ev.target)) {
        this.close.emit();
      }
    }
  }
  handleEnterEnd() {
    this.isVisible = true;
    this.enterend.emit();
  }
  render() {
    // Don't set data-width in the special 'toggle' width case
    const width = this.width === 'toggle' ? undefined : this.width;
    const dropdownJsx = (h("bs-transition", { enterAttribute: "data-shown", enterDuration: 75, enterControlled: this.enterControlled, enterTrigger: this.enterTrigger, leaveTrigger: this.leaveTrigger, onEnterend: () => this.handleEnterEnd(), onLeaveend: () => this.leaveend.emit() }, h("div", { class: "bs-dropdown", "data-width": width, ref: (el) => this.dropdownDiv = el }, this.helperText && (h("header", null, h("h3", null, this.helperText), this.helperDescription && h("p", null, this.helperDescription))), h("slot", null))));
    return (h(Host, null, this.containerId && dropdownJsx, !this.containerId && (h("div", { style: { position: 'relative' }, ref: (el) => this.containerEl = el }, dropdownJsx))));
  }
  get hostEl() { return this; }
  static get style() { return bsDropdownCss; }
}, [4, "bs-dropdown", {
    "width": [1],
    "top": [4],
    "center": [4],
    "toggleId": [1, "toggle-id"],
    "containerId": [1, "container-id"],
    "helperText": [1, "helper-text"],
    "helperDescription": [1, "helper-description"],
    "enterControlled": [4, "enter-controlled"],
    "enterTrigger": [4, "enter-trigger"],
    "leaveTrigger": [4, "leave-trigger"]
  }, [[8, "keydown", "handleEscape"], [8, "click", "handleClickOutside"]]]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bs-dropdown", "bs-transition"];
  components.forEach(tagName => { switch (tagName) {
    case "bs-dropdown":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, BsDropdown);
      }
      break;
    case "bs-transition":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}

export { BsDropdown as B, defineCustomElement as d };

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