import { Component, Event, h, Host, Prop, State } from "@stencil/core";
export class IntergiroUserMenu {
  constructor() {
    this.isOpen = false;
  }
  close() {
    this.isOpen = false;
  }
  toggle() {
    this.isOpen = !this.isOpen;
  }
  logout() {
    this.trigger.emit({ name: "logout", value: undefined });
  }
  render() {
    return (h(Host, { open: this.isOpen },
      h("a", { onClick: e => this.toggle(), class: { active: this.isOpen } },
        h("smoothly-icon", { name: "person", size: "medium" })),
      h("div", { class: "background", onClick: () => this.close() }),
      h("div", null,
        h("div", null, this.userName),
        h("ul", null,
          h("li", { onClick: () => this.logout() },
            h("span", null, "Logout"),
            h("smoothly-icon", { name: "log-out", size: "medium" }))))));
  }
  static get is() { return "ig-user-menu"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "userName": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "user-name",
      "reflect": false
    }
  }; }
  static get states() { return {
    "isOpen": {}
  }; }
  static get events() { return [{
      "method": "trigger",
      "name": "trigger",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "Trigger",
        "resolved": "Trigger",
        "references": {
          "Trigger": {
            "location": "import",
            "path": "smoothly"
          }
        }
      }
    }]; }
}
