import { EventEmitter } from '../../stencil-public-runtime';
/**
 * Outputs a dropdown which is a design pattern that conserves screen space by
 * letting users display some content without flooding the user with extra
 * content on the page.
 *
 * This component uses `BsTransition` (see [usage examples](../?path=/docs/web-components-bs-transition--docs#usage-examples)).
 *
 * ### Accessibility Notes
 * Toggle element should have:
 * - `aria-expanded = true` when the dropdown is visible.
 * - `aria-controls` attribute which matches dropdown content's ID.
 */
export declare class BsDropdown {
  /**
   * Desired width of the dropdown.
   */
  width: 'sm' | 'md' | 'lg' | 'content' | 'toggle';
  /**
   * Whether or not the dropdown should be positioned above the toggle element.
   */
  top: boolean;
  /**
   * Whether or not the dropdown should be horizontally centered relative to the
   * toggle element.
   */
  center: boolean;
  /**
   * Id of the toggle element. Will be used for positioning.
   */
  toggleId: string;
  /**
   * Optional ID of the container for the dropdown. Will be used as the base for
   * positioning. The container may live anywhere on the DOM (in the case of
   * teleporting the dropdown to a higher DOM level). This container must have
   * `position: relative`. If not given, the dropdown uses its own baked-in
   * relative container.
   */
  containerId: string;
  /** Helper text will be displayed in the header on mobile screens only. */
  helperText?: string;
  /** Helper desription will be displayed in the header below the main helper text on mobile screens only. */
  helperDescription?: string;
  /**
   * Whether or not the enter transition should be controlled manually. Useful
   * when the enter transition needs to be triggered manually (e.g. \`v-show\`
   * in Vue).
   */
  enterControlled: boolean;
  /**
   * Only used when \`enterControlled\` is \`true\`. When ready to play the
   * enter transition, set this to \`true\`.
   */
  enterTrigger: boolean;
  /**
   * If desired, leave transition needs to be triggered manually. Set this to
   * \`true\` when ready to fire leave transition.
   */
  leaveTrigger: boolean;
  /**
   * Emits when a close event has occurred. These events include Escape key
   * being pressed or a user clicking outside of the dropdown area. The consumer
   * must handle accordingly (e.g. hiding the dropdown, setting `tabindex = -1`
   * on elements, etc.).
   */
  close: EventEmitter;
  /**
   * Emits when the enter transition has ended. The element should be fully
   * rendered by now and may be manipulated (e.g. setting focus).
   */
  enterend: EventEmitter;
  /**
   * Only emits when \`leaveTrigger\` is toggled and the leave transition has
   * ended. The element can be fully removed from the DOM now.
   */
  leaveend: EventEmitter;
  hostEl: HTMLElement;
  isVisible: boolean;
  toggleEl: HTMLElement;
  containerEl: HTMLElement;
  dropdownDiv: HTMLDivElement;
  componentDidLoad(): void;
  componentDidUpdate(): void;
  /**
   * 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(): void;
  /**
   * 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(): void;
  /** Close the dropdown on Escape key. */
  handleEscape(ev: KeyboardEvent): void;
  /** Close the dropdown when clicking outside of it or the toggle element. */
  handleClickOutside(ev: MouseEvent): void;
  handleEnterEnd(): void;
  render(): any;
}
