import { Host, h } from '@stencil/core';
/**
 * 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 class BsDropdownWithOptions {
  constructor() {
    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 is() { return "bs-dropdown-with-options"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-dropdown-with-options.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-dropdown-with-options.css"]
    };
  }
  static get properties() {
    return {
      "toggleId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Id of the toggle element. Will be used for positioning."
        },
        "attribute": "toggle-id",
        "reflect": false
      },
      "containerId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Optional ID of the container for the dropdown. Will be used as the base for\npositioning. The container may live anywhere on the DOM (in the case of\nteleporting the dropdown to a higher DOM level). This container must have\n`position: relative`. If not given, the dropdown uses its own baked-in\nrelative container."
        },
        "attribute": "container-id",
        "reflect": false,
        "defaultValue": "undefined"
      },
      "optionsId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Id of the options list. This should also be set on the toggle element's\n`aria-controls` attribute and the label's `for` attribute."
        },
        "attribute": "options-id",
        "reflect": false
      },
      "width": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'sm'|'md'|'lg'|'content'|'toggle'",
          "resolved": "\"content\" | \"lg\" | \"md\" | \"sm\" | \"toggle\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Desired width of the dropdown."
        },
        "attribute": "width",
        "reflect": false,
        "defaultValue": "undefined"
      },
      "top": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether or not the dropdown should be positioned above the toggle element."
        },
        "attribute": "top",
        "reflect": false,
        "defaultValue": "false"
      },
      "center": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether or not the dropdown should be horizontally centered relative to the\ntoggle element."
        },
        "attribute": "center",
        "reflect": false,
        "defaultValue": "false"
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Optionally provide a label for the dropdown which `aria-label` will get\nset to. This is used as an alternative to setting the `for` attribute on a\nlabel element when there is no visible label."
        },
        "attribute": "label",
        "reflect": false
      },
      "selectedValue": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "The option to be selected. This should match the desired option's\n`value` prop."
        },
        "attribute": "selected-value",
        "reflect": false
      },
      "enterControlled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether or not the enter transition should be controlled manually. Useful\nwhen the enter transition needs to be triggered manually (e.g. \\`v-show\\`\nin Vue)."
        },
        "attribute": "enter-controlled",
        "reflect": false,
        "defaultValue": "false"
      },
      "enterTrigger": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Only used when \\`enterControlled\\` is \\`true\\`. When ready to play the\nenter transition, set this to \\`true\\`."
        },
        "attribute": "enter-trigger",
        "reflect": false,
        "defaultValue": "false"
      },
      "leaveTrigger": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "If desired, leave transition needs to be triggered manually. Set this to\n\\`true\\` when ready to fire leave transition."
        },
        "attribute": "leave-trigger",
        "reflect": false,
        "defaultValue": "false"
      },
      "helperText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Helper text will be displayed in the header on mobile screens only."
        },
        "attribute": "helper-text",
        "reflect": false
      },
      "helperDescription": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Helper description will be displayed in the header below the main helper\ntext on mobile screens only."
        },
        "attribute": "helper-description",
        "reflect": false
      }
    };
  }
  static get states() {
    return {
      "isVisible": {}
    };
  }
  static get events() {
    return [{
        "method": "optselected",
        "name": "optselected",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emits the value of an option when selected."
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }, {
        "method": "close",
        "name": "close",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emits when a close event has occurred. The consumer must handle\naccordingly (e.g. triggering leave transition, removing from DOM,\nre-focusing toggle, etc.)."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }, {
        "method": "enterend",
        "name": "enterend",
        "bubbles": false,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emits when the enter transition has ended. The element should be fully\nrendered by now and may be manipulated (e.g. setting focus)."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }, {
        "method": "leaveend",
        "name": "leaveend",
        "bubbles": false,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Only emits when \\`leaveTrigger\\` is toggled and the leave transition has\nended. The element can be fully removed from the DOM now."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }];
  }
}
//# sourceMappingURL=bs-dropdown-with-options.js.map
