import { Host, h } from '@stencil/core';
/** Outputs a dropdown which is a design pattern that conserves screen space by
 * letting users display a list of contents, navigation points, and functions
 * without flooding the user with many options simultaneously.
 *
 * Meant ot be composited together with bs-dropdown-options and
 * bs-dropdown-option components.
 *
 * All slotted children should be wrapped in a single outer <div>.
 */
export class BsDropdown {
  constructor() {
    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) }))));
  }
  static get is() { return "bs-dropdown"; }
  static get encapsulation() { return "shadow"; }
  static get properties() {
    return {
      "dropdownId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "ex",
              "text": "basic-dropdown-id"
            }],
          "text": "Id of the dropdown. This should also be set on the toggle element's\n`aria-controls` attribute and the label's `for` attribute."
        },
        "attribute": "dropdown-id",
        "reflect": false
      },
      "shown": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Whether or not the dropdown is currently shown. Be sure to also set\n`aria-expanded` equal to this value on the toggle element."
        },
        "attribute": "shown",
        "reflect": 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
      },
      "position": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'top'",
          "resolved": "\"top\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Position of the options list. Currently only accepts \"top\"."
        },
        "attribute": "position",
        "reflect": false
      },
      "justify": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'center'",
          "resolved": "\"center\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Option to center the dropdown."
        },
        "attribute": "justify",
        "reflect": false
      },
      "variant": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'fit'",
          "resolved": "\"fit\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Option to set the dropdown to fit content width rather than have a\nfixed width."
        },
        "attribute": "variant",
        "reflect": false
      }
    };
  }
  static get events() {
    return [{
        "method": "dropdownchange",
        "name": "dropdownchange",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emits the value when an option is 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. updating show/hide)."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }];
  }
  static get elementRef() { return "hostEl"; }
}
//# sourceMappingURL=bs-dropdown.js.map
