import { Host, h } from '@stencil/core';
/** Option list item for the bs-dropdown component. Should be used as a child
 * of the bs-dropdown-options component. Some of the props are **Parent-Provided**
 * (provided by the parent component) and are not o be given by users. All events
 * that this component emits are handled by the parent component and do not need to be listened for.
 *
 * When using variant of 2-col and/or description, all slotted children should
 * be wrapped in a single outer <div>.
 *
 * @docsPage
 * @exSlot Apples
 */
export class BsDropdownOption {
  constructor() {
    this.value = undefined;
    this.variant = undefined;
    this.selected = false;
    this.shown = undefined;
    this.focused = undefined;
    this.index = undefined;
    this.dropdownId = undefined;
  }
  /** Handle focusing on initial load. */
  componentDidLoad() {
    this.onFocusChange(this.focused);
  }
  /** Handle focusing/blurring when the prop changes. */
  onFocusChange(newVal) {
    if (newVal) {
      this.option.focus();
    }
    else {
      this.option.blur();
    }
  }
  /** Handle various keyboard events for an option. */
  handleKeyDown(ev) {
    if (this.shown) {
      switch (ev.key) {
        case ' ':
          this.handleSelect();
          ev.preventDefault();
          break;
        case 'Enter':
          this.handleSelect();
          break;
        case 'NumpadEnter':
          this.handleSelect();
          break;
      }
    }
  }
  /** Handle mouse entering an option by notifying the parent. */
  handleMouseEnter() {
    this.mousefocus.emit(this.index);
  }
  /** Handle clicking on an option. */
  handleSelect() {
    this.optionselect.emit({ id: this.id, index: this.index, value: this.value });
  }
  /** Generate an ID for this option. */
  get id() {
    return `${this.dropdownId}-option-${this.index}`;
  }
  render() {
    return (h(Host, { "data-selected": this.selected ? '' : undefined, "data-variant": this.variant || undefined }, h("li", { role: "option", "data-selected": this.selected ? '' : undefined, "data-variant": this.variant || undefined, "aria-selected": this.selected ? 'true' : undefined, tabIndex: this.shown ? -1 : undefined, id: this.id, ref: el => this.option = el, part: "option" }, h("slot", null))));
  }
  static get is() { return "bs-dropdown-option"; }
  static get encapsulation() { return "shadow"; }
  static get properties() {
    return {
      "value": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "ex",
              "text": "apples"
            }],
          "text": "Value of this option."
        },
        "attribute": "value",
        "reflect": false
      },
      "variant": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Variant of this option. This can be any combination of values \"2-col\",\n\"description\", \"negative\" separated by a space.  When using \"2-col\" or\n\"description\" variants, each child of the <li> should be in some kind of\ncontainer element such as <span>."
        },
        "attribute": "variant",
        "reflect": false
      },
      "selected": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether this option is selected."
        },
        "attribute": "selected",
        "reflect": false,
        "defaultValue": "false"
      },
      "shown": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "[Parent-Provided] - Whether the dropdown is currently shown."
        },
        "attribute": "shown",
        "reflect": false
      },
      "focused": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "[Parent-Provided] - Whether this options is currently focused."
        },
        "attribute": "focused",
        "reflect": false
      },
      "index": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "[Parent-Provided] - The index of this option in the options list."
        },
        "attribute": "index",
        "reflect": false
      },
      "dropdownId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "[Parent-Provided] - The ID of the containing dropdown"
        },
        "attribute": "dropdown-id",
        "reflect": false
      }
    };
  }
  static get events() {
    return [{
        "method": "mousefocus",
        "name": "mousefocus",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "[Parent-Handled] - Emits when the mouse hovers this option"
        },
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        }
      }, {
        "method": "optionselect",
        "name": "optionselect",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "[Parent-Handled] - Emits when this option is selected"
        },
        "complexType": {
          "original": "{ id: string, index: number, value: string }",
          "resolved": "{ id: string; index: number; value: string; }",
          "references": {}
        }
      }];
  }
  static get watchers() {
    return [{
        "propName": "focused",
        "methodName": "onFocusChange"
      }];
  }
  static get listeners() {
    return [{
        "name": "keydown",
        "method": "handleKeyDown",
        "target": undefined,
        "capture": false,
        "passive": false
      }, {
        "name": "mouseenter",
        "method": "handleMouseEnter",
        "target": undefined,
        "capture": false,
        "passive": true
      }, {
        "name": "click",
        "method": "handleSelect",
        "target": undefined,
        "capture": false,
        "passive": false
      }];
  }
}
//# sourceMappingURL=bs-dropdown-option.js.map
