import { Host, h } from '@stencil/core';
/**
 * Option list item for `BsDropdownWithOptions` and `BsDropdownOptionList>`
 * components.
 *
 * Some of the props are **Parent-Provided** (provided by the parent
 * component) and should not to be set manually.
 *
 * All events that this component
 * emits are handled by the parent component and do not need to be listened for.
 */
export class BsDropdownOption {
  constructor() {
    this.value = undefined;
    this.variant = undefined;
    this.optionsId = undefined;
    this.selected = false;
    this.focused = false;
    this.index = undefined;
  }
  componentDidLoad() {
    this.onFocusChange(this.focused);
  }
  onFocusChange(isFocusedNow) {
    if (isFocusedNow) {
      this.option.focus();
    }
    else {
      this.option.blur();
    }
  }
  handleKeyDown(ev) {
    var _a;
    switch (ev.key) {
      case ' ':
      case 'Enter':
      case 'NumpadEnter':
        this.handleSelect();
        // If the option is a link, click it
        (_a = this.option.querySelector('a')) === null || _a === void 0 ? void 0 : _a.click();
        break;
    }
    ev.preventDefault();
  }
  /** Notify parent of mouse entering so it can set focus. */
  handleMouseEnter() {
    this.optmouseenter.emit(this.index);
  }
  handleSelect() {
    var _a;
    this.optselect.emit({ id: this.id, index: this.index, value: this.value });
    // If the option is a link, click it
    (_a = this.option.querySelector('a')) === null || _a === void 0 ? void 0 : _a.click();
  }
  /** Generate an ID. */
  get id() {
    return `${this.optionsId}-option-${this.index}`;
  }
  render() {
    return (h(Host, { value: this.value }, h("li", { role: "option", "data-selected": this.selected ? '' : undefined, "data-variant": this.variant || undefined, "aria-selected": this.selected ? 'true' : undefined, id: this.id, tabIndex: -1, ref: el => this.option = el }, h("slot", null))));
  }
  static get is() { return "bs-dropdown-option"; }
  static get properties() {
    return {
      "value": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Value of this option."
        },
        "attribute": "value",
        "reflect": false
      },
      "variant": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "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\"`\nor `\"description\"` variants, each child of the `<li>` should be in some\nkind of container element such as `<span>`."
        },
        "attribute": "variant",
        "reflect": false,
        "defaultValue": "undefined"
      },
      "optionsId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "**Parent-Provided** - The ID of the containing options list. Emitted as\npart of the event when this item is selected."
        },
        "attribute": "options-id",
        "reflect": false
      },
      "selected": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "**Parent-Provided** - Whether this option is selected."
        },
        "attribute": "selected",
        "reflect": false,
        "defaultValue": "false"
      },
      "focused": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "**Parent-Provided** - Whether this option is currently focused."
        },
        "attribute": "focused",
        "reflect": false,
        "defaultValue": "false"
      },
      "index": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "**Parent-Provided** - The index of this option in the options list."
        },
        "attribute": "index",
        "reflect": false
      }
    };
  }
  static get events() {
    return [{
        "method": "optmouseenter",
        "name": "optmouseenter",
        "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": "optselect",
        "name": "optselect",
        "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
