import { Component, Prop, State, h, Method } from '@stencil/core';
export class ScMenuItem {
  constructor() {
    this.hasFocus = false;
    /** Draws the item in a checked state. */
    this.checked = false;
    /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
    this.value = '';
    /** Draws the menu item in a disabled state. */
    this.disabled = false;
  }
  /** Sets focus on the button. */
  async setFocus(options) {
    this.menuItem.focus(options);
  }
  /** Removes focus from the button. */
  async setBlur() {
    this.menuItem.blur();
  }
  handleBlur() {
    this.hasFocus = false;
  }
  handleFocus() {
    this.hasFocus = true;
  }
  render() {
    const Tag = this.href ? 'a' : 'div';
    return (h(Tag, { ref: el => (this.menuItem = el), part: "base", class: {
        'menu-item': true,
        'menu-item--checked': this.checked,
        'menu-item--disabled': this.disabled,
        'menu-item--focused': this.hasFocus,
      }, href: this.href, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabindex: !this.disabled ? '0' : undefined, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), onMouseEnter: () => this.handleFocus(), onMouseLeave: () => this.handleBlur() },
      h("span", { part: "checked-icon", class: "menu-item__check" },
        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", class: "bi bi-check", viewBox: "0 0 16 16" },
          h("path", { d: "M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" }))),
      h("span", { part: "prefix", class: "menu-item__prefix" },
        h("slot", { name: "prefix" })),
      h("span", { part: "label", class: "menu-item__label" },
        h("slot", null)),
      h("span", { part: "suffix", class: "menu-item__suffix" },
        h("slot", { name: "suffix" }))));
  }
  static get is() { return "sc-menu-item"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-menu-item.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-menu-item.css"]
  }; }
  static get properties() { return {
    "href": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Optional link to follow."
      },
      "attribute": "href",
      "reflect": false
    },
    "checked": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Draws the item in a checked state."
      },
      "attribute": "checked",
      "reflect": true,
      "defaultValue": "false"
    },
    "value": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected."
      },
      "attribute": "value",
      "reflect": true,
      "defaultValue": "''"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Draws the menu item in a disabled state."
      },
      "attribute": "disabled",
      "reflect": true,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "hasFocus": {}
  }; }
  static get methods() { return {
    "setFocus": {
      "complexType": {
        "signature": "(options?: FocusOptions) => Promise<void>",
        "parameters": [{
            "tags": [],
            "text": ""
          }],
        "references": {
          "Promise": {
            "location": "global"
          },
          "FocusOptions": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Sets focus on the button.",
        "tags": []
      }
    },
    "setBlur": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Removes focus from the button.",
        "tags": []
      }
    }
  }; }
}
