import { EventEmitter } from '../../stencil-public-runtime';
/**
 * Outputs convenient, composed element which places a `<bs-dropdown-option-list>`
 * component within a `<bs-dropdown>` component.
 *
 * Use `<bs-dropdown-option>` as children components.
 *
 * This component uses BsTransition (see usage examples).
 *
 * ### Accessibility Notes
 * Toggle element should have:
 * - `aria-haspopup="listbox"`.
 * - `aria-expanded = true` when the dropdown is visible.
 * - `aria-controls` attribute which matches `optionsId` prop.
 */
export declare class BsDropdownWithOptions {
  /**
   * 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;
  /**
   * Id of the options list. This should also be set on the toggle element's
   * `aria-controls` attribute and the label's `for` attribute.
   */
  optionsId: string;
  /**
   * 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;
  /**
   * Optionally provide a label for the dropdown which `aria-label` will get
   * set to. This is used as an alternative to setting the `for` attribute on a
   * label element when there is no visible label.
   */
  label?: string;
  /**
   * The option to be selected. This should match the desired option's
   * `value` prop.
   */
  selectedValue?: 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;
  /** Helper text will be displayed in the header on mobile screens only. */
  helperText?: string;
  /**
   * Helper description will be displayed in the header below the main helper
   * text on mobile screens only.
   */
  helperDescription?: string;
  /** Emits the value of an option when selected. */
  optselected: EventEmitter<string>;
  /**
   * Emits when a close event has occurred. The consumer must handle
   * accordingly (e.g. triggering leave transition, removing from DOM,
   * re-focusing toggle, 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;
  /** Track whether the dropdown is currently visible. */
  isVisible: boolean;
  /** Dropdown has fully rendered */
  handleEnterEnd(): void;
  handleOptSelected(ev: CustomEvent): void;
  handleClose(ev: CustomEvent): void;
  render(): any;
}
