'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-df541290.js');

const styleCss = ".sc-ig-user-menu-h{--menu-offset-top:0.3em;--menu-offset-right:0.3em;--item-padding:0.5em 1em;position:relative}.sc-ig-user-menu-h a.active.sc-ig-user-menu smoothly-icon.sc-ig-user-menu,.sc-ig-user-menu-h a.sc-ig-user-menu:hover smoothly-icon.sc-ig-user-menu{fill:rgb(var(--smoothly-default-shade))}.sc-ig-user-menu-h .background.sc-ig-user-menu{position:absolute;right:0;top:0;height:100vh;width:100vw}.sc-ig-user-menu-h>div.sc-ig-user-menu:not(.background){margin-top:var(--menu-offset-top);position:absolute;right:var(--menu-offset-right);min-width:10em;border-radius:0.2em;white-space:nowrap;background-color:rgb(var(--smoothly-default-shade));-webkit-box-shadow:var(--smoothly-shadow);box-shadow:var(--smoothly-shadow)}.sc-ig-user-menu-h>div.sc-ig-user-menu:not(.background)>div.sc-ig-user-menu{font-style:italic;padding:var(--item-padding);color:rgba(var(--smoothly-default-contrast), 0.6)}.sc-ig-user-menu-h>div.sc-ig-user-menu:not(.background) ul.sc-ig-user-menu{padding:0}.sc-ig-user-menu-h>div.sc-ig-user-menu:not(.background) ul.sc-ig-user-menu li.sc-ig-user-menu{font-weight:bold;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:var(--item-padding);-ms-flex-align:center;align-items:center}.sc-ig-user-menu-h>div.sc-ig-user-menu:not(.background) ul.sc-ig-user-menu li.sc-ig-user-menu:hover{background-color:rgb(var(--smoothly-primary-color));color:rgb(var(--smoothly-primary-contrast))}.sc-ig-user-menu-h>div.sc-ig-user-menu:not(.background) ul.sc-ig-user-menu li.sc-ig-user-menu:hover smoothly-icon.sc-ig-user-menu{fill:rgb(var(--smoothly-primary-contrast))}.sc-ig-user-menu-h:not([open])>div.sc-ig-user-menu{display:none}";

const IntergiroUserMenu = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.trigger = index.createEvent(this, "trigger", 7);
    this.isOpen = false;
  }
  close() {
    this.isOpen = false;
  }
  toggle() {
    this.isOpen = !this.isOpen;
  }
  logout() {
    this.trigger.emit({ name: "logout", value: undefined });
  }
  render() {
    return (index.h(index.Host, { open: this.isOpen }, index.h("a", { onClick: e => this.toggle(), class: { active: this.isOpen } }, index.h("smoothly-icon", { name: "person", size: "medium" })), index.h("div", { class: "background", onClick: () => this.close() }), index.h("div", null, index.h("div", null, this.userName), index.h("ul", null, index.h("li", { onClick: () => this.logout() }, index.h("span", null, "Logout"), index.h("smoothly-icon", { name: "log-out", size: "medium" }))))));
  }
};
IntergiroUserMenu.style = styleCss;

exports.ig_user_menu = IntergiroUserMenu;
