@myuw-web-components/myuw-profile - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

dist/myuw-profile.js

 (function () {
   'use strict';
 
-  var tpl = "<style> @import url(https://fonts.googleapis.com/icon?family=Material+Icons);\n\n:host([hidden]) {\n    display: none;\n}\n\n#myuw-profile-login {\n    font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );\n    text-transform: uppercase;\n    text-decoration: none;\n    color: var( --myuw-profile-login-color, var(--myuw-primary-color, white) );\n    padding: 10px 13px;\n    font-weight: var(--myuw-profile-font-weight, 600);\n    letter-spacing: 0px;\n    font-size: 14px;\n    position: relative;\n    display: inline-block;\n    transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);\n}\n\n#myuw-profile-login.hidden {\n    display: none;\n}\n\n#myuw-profile-circle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    align-content: center;\n    align-self: center;\n    outline: none;\n    border-radius: 50%;\n    height: 42px;\n    width: 42px;\n    min-width: initial;\n    text-transform: uppercase;\n    text-align: center;\n    background: transparent;\n    border-color: transparent;\n    transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);\n}\n\n#myuw-profile-circle:hover,\n#myuw-profile-login:hover {\n    cursor: pointer;\n    background: rgba(0,0,0,0.12);\n}\n\n#myuw-profile-circle-initial {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    align-content: center;\n    align-self: center;\n    padding: 0;\n    margin: 0;\n    font-weight: var(--myuw-profile-font-weight, 300);\n    font-size: 18px;\n    font-family: var( --myuw-profile-font, var(--myuw-font, 'Roboto', Arial, sans-serif) );\n    background-color: var( --myuw-profile-background-color, #fb686d);\n    user-select: none;\n    color: white;\n    text-transform: capitalize;\n    border-radius: 50%;\n    margin: 0;\n    overflow: hidden;\n    position: relative;\n    height: 34px;\n    width: 34px;\n    min-width: 34px;\n    font-size: 18px;\n}\n\n#myuw-profile-wrapper {\n    position: relative;\n    display: inline-block;\n    margin: 0 6px;\n}\n\n#myuw-profile-wrapper.hidden {\n    display: none;\n}\n\n#myuw-profile-nav {\n    position: absolute;\n    top: 45px;\n    right: 0;\n    min-width: 320px;\n    color: black;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    font-size: 14px;\n    z-index: 101;\n\n    transform-origin: top right;\n    transform: scale(0);\n    opacity: 0;\n    visibility: hidden;\n    transition: visibility 0s, opacity .25s cubic-bezier(0.0, 0.0, 0.2, 1), transform .25s cubic-bezier(0.0, 0.0, 0.2, 1);\n\n    -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);\n    -moz-box-shadow:    0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);\n    box-shadow:         0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);\n}\n\n#myuw-profile-nav.visible {\n    transform: scale(1);\n    opacity: 1;\n    visibility: visible;\n}\n\n#myuw-profile-nav p {\n    padding: 0;\n    margin: 0;\n}\n\n::slotted(a),\n::slotted(p) {\n  transition: all .3s ease;\n  position: relative;\n  font-size: 15px;\n  font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );\n  padding: 3px 16px;\n  color: var(--myuw-menu-color, rgba(0,0,0,0.87));\n  text-decoration: none;\n  background-color: #f5f5f5;\n  border-bottom: 1px solid #e5e5e5;\n  user-select: none;\n  outline: none;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n  flex-direction: row;\n  min-height: 48px;\n  height: 48px;\n  -webkit-align-content: center;\n  align-content: center;\n  -webkit-align-items: center;\n  align-items: center;\n  -webkit-box-pack: start;\n  -webkit-justify-content: flex-start;\n  justify-content: flex-start;\n}\n\n/* \n  Styles need to be duplicated separate from ::slotted in order for \n  Firefox to do it's job\n*/\n#myuw-profile-nav a,\n#myuw-profile-nav p {\n  transition: all .3s ease;\n  position: relative;\n  font-size: 15px;\n  font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );\n  padding: 3px 16px;\n  color: var(--myuw-menu-color, rgba(0,0,0,0.87));\n  text-decoration: none;\n  background-color: #f5f5f5;\n  border-bottom: 1px solid #e5e5e5;\n  user-select: none;\n  outline: none;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n  flex-direction: row;\n  min-height: 48px;\n  height: 48px;\n  -webkit-align-content: center;\n  align-content: center;\n  -webkit-align-items: center;\n  align-items: center;\n  -webkit-box-pack: start;\n  -webkit-justify-content: flex-start;\n  justify-content: flex-start;\n}\n\n#myuw-profile-nav #myuw-profile-nav-user {\n    font-weight: 600;\n    text-transform: capitalize;\n    background-color: rgb(255,255,255);\n    border-bottom: none;\n}\n\n#myuw-profile-nav #myuw-profile-nav-user.hidden {\n  display: none;\n}\n\n#myuw-profile-nav #myuw-profile-nav-user:hover {\n    background-color: rgb(255,255,255);\n}\n\n::slotted(a:hover),\n::slotted(a:focus),\n::slotted(p:hover),\n::slotted(p:focus)  {\n    background-color: #ececec;\n}\n\n#myuw-profile-nav a:hover,\n#myuw-profile-nav a:focus,\n#myuw-profile-nav p:hover,\n#myuw-profile-nav p:focus {\n    background-color: #ececec;\n} </style> <a href=\"#\" id=\"myuw-profile-login\" class=\"hidden\">Login</a> <div id=\"myuw-profile-wrapper\" class=\"hidden\"> <button id=\"myuw-profile-circle\" aria-label=\"profile menu\" aria-haspopup=\"true\" aria-controls=\"myuw-profile-nav\" aria-expanded=\"false\"> <p id=\"myuw-profile-circle-initial\"><i class=\"material-icons\">person</i></p> </button> <ul id=\"myuw-profile-nav\" role=\"menu\" tabindex=\"-1\" aria-labelledby=\"myuw-profile-circle\"> <p id=\"myuw-profile-nav-user\"></p> <li role=\"menuitem\"> <slot name=\"nav-item\"></slot> </li> <li role=\"menuitem\"> <a id=\"myuw-profile-logout\" href=\"#\">Logout</a> </li> </ul> </div> ";
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
 
-  class MyUWProfile extends HTMLElement {
-      constructor() {
-          super();
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
 
-          // Create a shadowroot for this element
-          this.attachShadow({mode: 'open'});
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+  }
 
-          // Append the custom HTML to the shadowroot
-          this.shadowRoot.appendChild(MyUWProfile.template.content.cloneNode(true));
+  function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function");
+    }
+
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        writable: true,
+        configurable: true
       }
+    });
+    if (superClass) _setPrototypeOf(subClass, superClass);
+  }
 
-      static get observedAttributes() {
-          return [
-              'login-url',
-              'logout-url',
-              'background-color'
-          ];
+  function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+      return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _getPrototypeOf(o);
+  }
+
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+
+    try {
+      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function _construct(Parent, args, Class) {
+    if (isNativeReflectConstruct()) {
+      _construct = Reflect.construct;
+    } else {
+      _construct = function _construct(Parent, args, Class) {
+        var a = [null];
+        a.push.apply(a, args);
+        var Constructor = Function.bind.apply(Parent, a);
+        var instance = new Constructor();
+        if (Class) _setPrototypeOf(instance, Class.prototype);
+        return instance;
+      };
+    }
+
+    return _construct.apply(null, arguments);
+  }
+
+  function _isNativeFunction(fn) {
+    return Function.toString.call(fn).indexOf("[native code]") !== -1;
+  }
+
+  function _wrapNativeSuper(Class) {
+    var _cache = typeof Map === "function" ? new Map() : undefined;
+
+    _wrapNativeSuper = function _wrapNativeSuper(Class) {
+      if (Class === null || !_isNativeFunction(Class)) return Class;
+
+      if (typeof Class !== "function") {
+        throw new TypeError("Super expression must either be null or a function");
       }
 
-      attributeChangedCallback(name, oldValue, newValue){
-          // Update the attribute internally
-          this[name] = newValue;
+      if (typeof _cache !== "undefined") {
+        if (_cache.has(Class)) return _cache.get(Class);
 
-          // Update the component with new att value
-          this.updateAttribute(name);
+        _cache.set(Class, Wrapper);
       }
 
-      connectedCallback(){
-          // Get all attributes
-          this['login-url']           = this.getAttribute('login-url');
-          this['logout-url']          = this.getAttribute('logout-url');
-          this['background-color']    = this.getAttribute('background-color');
+      function Wrapper() {
+        return _construct(Class, arguments, _getPrototypeOf(this).constructor);
+      }
 
-          this.$login       = this.shadowRoot.getElementById('myuw-profile-login');
-          this.$logout      = this.shadowRoot.getElementById('myuw-profile-logout');
-          this.$button      = this.shadowRoot.getElementById('myuw-profile-circle');
-          this.$circle      = this.shadowRoot.getElementById('myuw-profile-circle-initial');
-          this.$nav         = this.shadowRoot.getElementById('myuw-profile-nav');
-          this.$displayName = this.shadowRoot.getElementById('myuw-profile-nav-user');
-          this.$wrapper     = this.shadowRoot.getElementById('myuw-profile-wrapper');
+      Wrapper.prototype = Object.create(Class.prototype, {
+        constructor: {
+          value: Wrapper,
+          enumerable: false,
+          writable: true,
+          configurable: true
+        }
+      });
+      return _setPrototypeOf(Wrapper, Class);
+    };
 
-          /**
-           * @typedef {Object} person
-           * @property {String} firstName
-           */
-          /**
-           * Listen for custom event to receive session information
-           * @param {CustomEvent} event Event that should pass "person" information to display
-           */
-          document.addEventListener('myuw-login', (event) => {
-            // Process data passed with event
-            if (event.detail.person) {
-              this.componentReady(event.detail.person);
-            } else {
-              this.componentReady();
-            }
-          }, false);
+    return _wrapNativeSuper(Class);
+  }
 
-          /*
-              Add an on click event to the window.
-              This allows us to close the menu if the user
-              clicks anywhere but on the menu.
-          */
-          window.addEventListener('click', e => {
-              if (this.$nav.classList.contains('visible')) {
-                  this.$nav.classList.remove('visible');
-                  this.$button.setAttribute('aria-expanded', 'false');
-              }
-          });
+  function _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
 
-          /*
-              Add an on click event to the profile nav menu.
-              We need to do this in order to stop the propagation
-              of click events on the menu specifically.
+    return self;
+  }
 
-              If a user clicks on the nav menu, the window on click
-              event will not fire, and it will not close the nav menu
-          */
-          this.$nav.addEventListener('click', e => {
-              e.stopPropagation();
-          });
+  function _possibleConstructorReturn(self, call) {
+    if (call && (typeof call === "object" || typeof call === "function")) {
+      return call;
+    }
 
-          /*
-              Add an on click event to profile bubble
+    return _assertThisInitialized(self);
+  }
 
-              We need to make sure that we stop propagation on
-              this event or else the window on click will always fire
-              and the menu will never open.
-          */
-          this.$button.addEventListener('click', e => {
-              e.stopPropagation();
-              this.$nav.classList.toggle('visible');
+  var tpl = "<style> @import url(https://fonts.googleapis.com/icon?family=Material+Icons);\n\n:host([hidden]) {\n    display: none;\n}\n\n#myuw-profile-login {\n    font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );\n    text-transform: uppercase;\n    text-decoration: none;\n    color: var( --myuw-profile-login-color, var(--myuw-primary-color, white) );\n    padding: 10px 13px;\n    font-weight: var(--myuw-profile-font-weight, 600);\n    letter-spacing: 0px;\n    font-size: 14px;\n    position: relative;\n    display: inline-block;\n    transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);\n}\n\n#myuw-profile-login.hidden {\n    display: none;\n}\n\n#myuw-profile-circle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    align-content: center;\n    align-self: center;\n    outline: none;\n    border-radius: 50%;\n    height: 42px;\n    width: 42px;\n    min-width: initial;\n    text-transform: uppercase;\n    text-align: center;\n    background: transparent;\n    border-color: transparent;\n    transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);\n}\n\n#myuw-profile-circle:hover,\n#myuw-profile-login:hover {\n    cursor: pointer;\n    background: rgba(0,0,0,0.12);\n}\n\n#myuw-profile-circle-initial {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    align-content: center;\n    align-self: center;\n    padding: 0;\n    margin: 0;\n    font-weight: var(--myuw-profile-font-weight, 300);\n    font-size: 18px;\n    font-family: var( --myuw-profile-font, var(--myuw-font, 'Roboto', Arial, sans-serif) );\n    background-color: var( --myuw-profile-background-color, #fb686d);\n    user-select: none;\n    color: white;\n    text-transform: capitalize;\n    border-radius: 50%;\n    margin: 0;\n    overflow: hidden;\n    position: relative;\n    height: 34px;\n    width: 34px;\n    min-width: 34px;\n    font-size: 18px;\n}\n\n#myuw-profile-wrapper {\n    position: relative;\n    display: inline-block;\n    margin: 0 6px;\n}\n\n#myuw-profile-wrapper.hidden {\n    display: none;\n}\n\n#myuw-profile-nav {\n    position: absolute;\n    top: 45px;\n    right: 0;\n    min-width: 320px;\n    color: black;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    font-size: 14px;\n    z-index: 101;\n\n    transform-origin: top right;\n    transform: scale(0);\n    opacity: 0;\n    visibility: hidden;\n    transition: visibility 0s, opacity .25s cubic-bezier(0.0, 0.0, 0.2, 1), transform .25s cubic-bezier(0.0, 0.0, 0.2, 1);\n\n    -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);\n    -moz-box-shadow:    0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);\n    box-shadow:         0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);\n}\n\n#myuw-profile-nav.visible {\n    transform: scale(1);\n    opacity: 1;\n    visibility: visible;\n}\n\n#myuw-profile-nav p {\n    padding: 0;\n    margin: 0;\n}\n\n::slotted(a),\n::slotted(p) {\n  transition: all .3s ease;\n  position: relative;\n  font-size: 15px;\n  font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );\n  padding: 3px 16px;\n  color: var(--myuw-menu-color, rgba(0,0,0,0.87));\n  text-decoration: none;\n  background-color: #f5f5f5;\n  border-bottom: 1px solid #e5e5e5;\n  user-select: none;\n  outline: none;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n  flex-direction: row;\n  min-height: 48px;\n  height: 48px;\n  -webkit-align-content: center;\n  align-content: center;\n  -webkit-align-items: center;\n  align-items: center;\n  -webkit-box-pack: start;\n  -webkit-justify-content: flex-start;\n  justify-content: flex-start;\n}\n\n/* \n  Styles need to be duplicated separate from ::slotted in order for \n  Firefox to do it's job\n*/\n#myuw-profile-nav a,\n#myuw-profile-nav p {\n  transition: all .3s ease;\n  position: relative;\n  font-size: 15px;\n  font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );\n  padding: 3px 16px;\n  color: var(--myuw-menu-color, rgba(0,0,0,0.87));\n  text-decoration: none;\n  background-color: #f5f5f5;\n  border-bottom: 1px solid #e5e5e5;\n  user-select: none;\n  outline: none;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n  flex-direction: row;\n  min-height: 48px;\n  height: 48px;\n  -webkit-align-content: center;\n  align-content: center;\n  -webkit-align-items: center;\n  align-items: center;\n  -webkit-box-pack: start;\n  -webkit-justify-content: flex-start;\n  justify-content: flex-start;\n}\n\n#myuw-profile-nav #myuw-profile-nav-user {\n    font-weight: 600;\n    text-transform: capitalize;\n    background-color: rgb(255,255,255);\n    border-bottom: none;\n}\n\n#myuw-profile-nav #myuw-profile-nav-user.hidden {\n  display: none;\n}\n\n#myuw-profile-nav #myuw-profile-nav-user:hover {\n    background-color: rgb(255,255,255);\n}\n\n::slotted(a:hover),\n::slotted(a:focus),\n::slotted(p:hover),\n::slotted(p:focus)  {\n    background-color: #ececec;\n}\n\n#myuw-profile-nav a:hover,\n#myuw-profile-nav a:focus,\n#myuw-profile-nav p:hover,\n#myuw-profile-nav p:focus {\n    background-color: #ececec;\n} </style> <a href=\"#\" id=\"myuw-profile-login\" class=\"hidden\">Login</a> <div id=\"myuw-profile-wrapper\" class=\"hidden\"> <button id=\"myuw-profile-circle\" aria-label=\"profile menu\" aria-haspopup=\"true\" aria-controls=\"myuw-profile-nav\" aria-expanded=\"false\"> <p id=\"myuw-profile-circle-initial\"><i class=\"material-icons\">person</i></p> </button> <ul id=\"myuw-profile-nav\" role=\"menu\" tabindex=\"-1\" aria-labelledby=\"myuw-profile-circle\"> <p id=\"myuw-profile-nav-user\"></p> <li role=\"menuitem\"> <slot name=\"nav-item\"></slot> </li> <li role=\"menuitem\"> <a id=\"myuw-profile-logout\" href=\"#\">Logout</a> </li> </ul> </div> ";
 
-              // Focus the menu upon opening, blur on close
-              if (this.$nav.classList.contains('visible')) {
-                  this.$nav.focus();
-                  this.$button.setAttribute('aria-expanded', 'true');
-              } else {
-                  this.$nav.blur();
-                  this.$button.setAttribute('aria-expanded', 'false');
-              }
-          });
+  var MyUWProfile =
+  /*#__PURE__*/
+  function (_HTMLElement) {
+    _inherits(MyUWProfile, _HTMLElement);
 
-          // this.componentReady();
+    function MyUWProfile() {
+      var _this;
 
-          // Update the component to use the new attributes
-          this.updateAttribute('login-url');
-          this.updateAttribute('logout-url');
-          this.updateAttribute('background-color');
+      _classCallCheck(this, MyUWProfile);
+
+      _this = _possibleConstructorReturn(this, _getPrototypeOf(MyUWProfile).call(this)); // Create a shadowroot for this element
+
+      _this.attachShadow({
+        mode: 'open'
+      }); // Append the custom HTML to the shadowroot
+
+
+      _this.shadowRoot.appendChild(MyUWProfile.template.content.cloneNode(true));
+
+      return _this;
+    }
+
+    _createClass(MyUWProfile, [{
+      key: "attributeChangedCallback",
+      value: function attributeChangedCallback(name, oldValue, newValue) {
+        // Update the attribute internally
+        this[name] = newValue; // Update the component with new att value
+
+        this.updateAttribute(name);
       }
+    }, {
+      key: "connectedCallback",
+      value: function connectedCallback() {
+        var _this2 = this;
 
-      // Update the component with attribute values
-      updateAttribute(att) {
-        switch(att){
+        // Get all attributes
+        this['login-url'] = this.getAttribute('login-url');
+        this['logout-url'] = this.getAttribute('logout-url');
+        this['background-color'] = this.getAttribute('background-color');
+        this.$login = this.shadowRoot.getElementById('myuw-profile-login');
+        this.$logout = this.shadowRoot.getElementById('myuw-profile-logout');
+        this.$button = this.shadowRoot.getElementById('myuw-profile-circle');
+        this.$circle = this.shadowRoot.getElementById('myuw-profile-circle-initial');
+        this.$nav = this.shadowRoot.getElementById('myuw-profile-nav');
+        this.$displayName = this.shadowRoot.getElementById('myuw-profile-nav-user');
+        this.$wrapper = this.shadowRoot.getElementById('myuw-profile-wrapper');
+        /**
+         * @typedef {Object} person
+         * @property {String} firstName
+         */
+
+        /**
+         * Listen for custom event to receive session information
+         * @param {CustomEvent} event Event that should pass "person" information to display
+         */
+
+        document.addEventListener('myuw-login', function (event) {
+          // Process data passed with event
+          if (event.detail.person) {
+            _this2.componentReady(event.detail.person);
+          } else {
+            _this2.componentReady();
+          }
+        }, false);
+        /*
+            Add an on click event to the window.
+            This allows us to close the menu if the user
+            clicks anywhere but on the menu.
+        */
+
+        window.addEventListener('click', function (e) {
+          if (_this2.$nav.classList.contains('visible')) {
+            _this2.$nav.classList.remove('visible');
+
+            _this2.$button.setAttribute('aria-expanded', 'false');
+          }
+        });
+        /*
+            Add an on click event to the profile nav menu.
+            We need to do this in order to stop the propagation
+            of click events on the menu specifically.
+             If a user clicks on the nav menu, the window on click
+            event will not fire, and it will not close the nav menu
+        */
+
+        this.$nav.addEventListener('click', function (e) {
+          e.stopPropagation();
+        });
+        /*
+            Add an on click event to profile bubble
+             We need to make sure that we stop propagation on
+            this event or else the window on click will always fire
+            and the menu will never open.
+        */
+
+        this.$button.addEventListener('click', function (e) {
+          e.stopPropagation();
+
+          _this2.$nav.classList.toggle('visible'); // Focus the menu upon opening, blur on close
+
+
+          if (_this2.$nav.classList.contains('visible')) {
+            _this2.$nav.focus();
+
+            _this2.$button.setAttribute('aria-expanded', 'true');
+          } else {
+            _this2.$nav.blur();
+
+            _this2.$button.setAttribute('aria-expanded', 'false');
+          }
+        }); // this.componentReady();
+        // Update the component to use the new attributes
+
+        this.updateAttribute('login-url');
+        this.updateAttribute('logout-url');
+        this.updateAttribute('background-color');
+      } // Update the component with attribute values
+
+    }, {
+      key: "updateAttribute",
+      value: function updateAttribute(att) {
+        switch (att) {
           case 'login-url':
@@ -133,9 +278,11 @@ this.shadowRoot.getElementById('myuw-profile-login').setAttribute('href', this['login-url']);
       }
+      /**
+       * Runs after component detects the 'myuw-login' event and receives
+       * the required parameter
+       * @param {*} person 
+       */
 
-     /**
-      * Runs after component detects the 'myuw-login' event and receives
-      * the required parameter
-      * @param {*} person 
-      */
-      componentReady(person) {
+    }, {
+      key: "componentReady",
+      value: function componentReady(person) {
         if (person) {
@@ -145,6 +292,6 @@ if (person.firstName) {
             this.$displayName.classList.remove('hidden');
-            this.$displayName.innerHTML = person.firstName;
-            // Change the letter in the profile circle
-            this.$circle.innerHTML = person.firstName.substring(0,1);
-            // Show the profile bubble
+            this.$displayName.innerHTML = person.firstName; // Change the letter in the profile circle
+
+            this.$circle.innerHTML = person.firstName.substring(0, 1); // Show the profile bubble
+
             this.showProfileBubble();
@@ -160,24 +307,33 @@ } else {
       }
+    }, {
+      key: "showLoginButton",
+      value: function showLoginButton() {
+        // Show Login Button
+        this.$login.classList.remove('hidden'); // Hide profile Circle
 
-      showLoginButton() {
-          // Show Login Button
-          this.$login.classList.remove('hidden');
-          // Hide profile Circle
-          this.$wrapper.classList.add('hidden');
+        this.$wrapper.classList.add('hidden');
       }
+    }, {
+      key: "showProfileBubble",
+      value: function showProfileBubble() {
+        // Hide login button
+        this.$login.classList.add('hidden'); // Show Profile circle
 
-      showProfileBubble() {
-          // Hide login button
-          this.$login.classList.add('hidden');
-          // Show Profile circle
-          this.$wrapper.classList.remove('hidden');
+        this.$wrapper.classList.remove('hidden');
       }
+    }], [{
+      key: "observedAttributes",
+      get: function get() {
+        return ['login-url', 'logout-url', 'background-color'];
+      }
+    }]);
 
-  }
-  MyUWProfile.template = (function template(src) {
-    const template = (document.createElement('template'));
+    return MyUWProfile;
+  }(_wrapNativeSuper(HTMLElement));
+
+  MyUWProfile.template = function template(src) {
+    var template = document.createElement('template');
     template.innerHTML = src;
     return template;
-  })(tpl);
-
+  }(tpl);
   /**
@@ -187,2 +343,4 @@ * Polyfill for supporting the CustomEvent constructor in IE9+
    */
+
+
   (function () {
@@ -192,9 +350,14 @@ if (typeof window.CustomEvent === 'function') {
     }
-    
-    function CustomEvent (event, params) {
-      params = params || { bubbles: false, cancelable: false, detail: undefined };
-      var evt = document.createEvent( 'CustomEvent' );
+
+    function CustomEvent(event, params) {
+      params = params || {
+        bubbles: false,
+        cancelable: false,
+        detail: undefined
+      };
+      var evt = document.createEvent('CustomEvent');
       evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
       return evt;
     }
+
     CustomEvent.prototype = window.Event.prototype;
@@ -201,0 +364,0 @@ window.CustomEvent = CustomEvent;

dist/myuw-profile.min.js

@@ -1,1 +0,1 @@
-!(function(){"use strict";class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(n.template.content.cloneNode(!0))}static get observedAttributes(){return["login-url","logout-url","background-color"]}attributeChangedCallback(n,e,t){this[n]=t,this.updateAttribute(n)}connectedCallback(){this["login-url"]=this.getAttribute("login-url"),this["logout-url"]=this.getAttribute("logout-url"),this["background-color"]=this.getAttribute("background-color"),this.$login=this.shadowRoot.getElementById("myuw-profile-login"),this.$logout=this.shadowRoot.getElementById("myuw-profile-logout"),this.$button=this.shadowRoot.getElementById("myuw-profile-circle"),this.$circle=this.shadowRoot.getElementById("myuw-profile-circle-initial"),this.$nav=this.shadowRoot.getElementById("myuw-profile-nav"),this.$displayName=this.shadowRoot.getElementById("myuw-profile-nav-user"),this.$wrapper=this.shadowRoot.getElementById("myuw-profile-wrapper"),document.addEventListener("myuw-login",n=>{n.detail.person?this.componentReady(n.detail.person):this.componentReady()},!1),window.addEventListener("click",n=>{this.$nav.classList.contains("visible")&&(this.$nav.classList.remove("visible"),this.$button.setAttribute("aria-expanded","false"))}),this.$nav.addEventListener("click",n=>{n.stopPropagation()}),this.$button.addEventListener("click",n=>{n.stopPropagation(),this.$nav.classList.toggle("visible"),this.$nav.classList.contains("visible")?(this.$nav.focus(),this.$button.setAttribute("aria-expanded","true")):(this.$nav.blur(),this.$button.setAttribute("aria-expanded","false"))}),this.updateAttribute("login-url"),this.updateAttribute("logout-url"),this.updateAttribute("background-color")}updateAttribute(n){switch(n){case"login-url":this.shadowRoot.getElementById("myuw-profile-login").setAttribute("href",this["login-url"]);break;case"logout-url":this.shadowRoot.getElementById("myuw-profile-logout").setAttribute("href",this["logout-url"]);break;case"background-color":this.$circle.style.backgroundColor=this["background-color"]}}componentReady(n){n?n.firstName?(this.$displayName.classList.remove("hidden"),this.$displayName.innerHTML=n.firstName,this.$circle.innerHTML=n.firstName.substring(0,1),this.showProfileBubble()):(this.$displayName.classList.add("hidden"),this.$circle.innerHTML='<i class="material-icons">person</i>',this.showProfileBubble()):this.showLoginButton()}showLoginButton(){this.$login.classList.remove("hidden"),this.$wrapper.classList.add("hidden")}showProfileBubble(){this.$login.classList.add("hidden"),this.$wrapper.classList.remove("hidden")}}n.template=(function(n){const e=document.createElement("template");return e.innerHTML=n,e})('<style> @import url(https://fonts.googleapis.com/icon?family=Material+Icons);\n\n:host([hidden]) {\n    display: none;\n}\n\n#myuw-profile-login {\n    font-family: var( --myuw-profile-font, var(--myuw-font, \'Montserrat\', \'Roboto\', Arial, sans-serif) );\n    text-transform: uppercase;\n    text-decoration: none;\n    color: var( --myuw-profile-login-color, var(--myuw-primary-color, white) );\n    padding: 10px 13px;\n    font-weight: var(--myuw-profile-font-weight, 600);\n    letter-spacing: 0px;\n    font-size: 14px;\n    position: relative;\n    display: inline-block;\n    transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);\n}\n\n#myuw-profile-login.hidden {\n    display: none;\n}\n\n#myuw-profile-circle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    align-content: center;\n    align-self: center;\n    outline: none;\n    border-radius: 50%;\n    height: 42px;\n    width: 42px;\n    min-width: initial;\n    text-transform: uppercase;\n    text-align: center;\n    background: transparent;\n    border-color: transparent;\n    transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);\n}\n\n#myuw-profile-circle:hover,\n#myuw-profile-login:hover {\n    cursor: pointer;\n    background: rgba(0,0,0,0.12);\n}\n\n#myuw-profile-circle-initial {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    align-content: center;\n    align-self: center;\n    padding: 0;\n    margin: 0;\n    font-weight: var(--myuw-profile-font-weight, 300);\n    font-size: 18px;\n    font-family: var( --myuw-profile-font, var(--myuw-font, \'Roboto\', Arial, sans-serif) );\n    background-color: var( --myuw-profile-background-color, #fb686d);\n    user-select: none;\n    color: white;\n    text-transform: capitalize;\n    border-radius: 50%;\n    margin: 0;\n    overflow: hidden;\n    position: relative;\n    height: 34px;\n    width: 34px;\n    min-width: 34px;\n    font-size: 18px;\n}\n\n#myuw-profile-wrapper {\n    position: relative;\n    display: inline-block;\n    margin: 0 6px;\n}\n\n#myuw-profile-wrapper.hidden {\n    display: none;\n}\n\n#myuw-profile-nav {\n    position: absolute;\n    top: 45px;\n    right: 0;\n    min-width: 320px;\n    color: black;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    font-size: 14px;\n    z-index: 101;\n\n    transform-origin: top right;\n    transform: scale(0);\n    opacity: 0;\n    visibility: hidden;\n    transition: visibility 0s, opacity .25s cubic-bezier(0.0, 0.0, 0.2, 1), transform .25s cubic-bezier(0.0, 0.0, 0.2, 1);\n\n    -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);\n    -moz-box-shadow:    0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);\n    box-shadow:         0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);\n}\n\n#myuw-profile-nav.visible {\n    transform: scale(1);\n    opacity: 1;\n    visibility: visible;\n}\n\n#myuw-profile-nav p {\n    padding: 0;\n    margin: 0;\n}\n\n::slotted(a),\n::slotted(p) {\n  transition: all .3s ease;\n  position: relative;\n  font-size: 15px;\n  font-family: var( --myuw-profile-font, var(--myuw-font, \'Montserrat\', \'Roboto\', Arial, sans-serif) );\n  padding: 3px 16px;\n  color: var(--myuw-menu-color, rgba(0,0,0,0.87));\n  text-decoration: none;\n  background-color: #f5f5f5;\n  border-bottom: 1px solid #e5e5e5;\n  user-select: none;\n  outline: none;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n  flex-direction: row;\n  min-height: 48px;\n  height: 48px;\n  -webkit-align-content: center;\n  align-content: center;\n  -webkit-align-items: center;\n  align-items: center;\n  -webkit-box-pack: start;\n  -webkit-justify-content: flex-start;\n  justify-content: flex-start;\n}\n\n/* \n  Styles need to be duplicated separate from ::slotted in order for \n  Firefox to do it\'s job\n*/\n#myuw-profile-nav a,\n#myuw-profile-nav p {\n  transition: all .3s ease;\n  position: relative;\n  font-size: 15px;\n  font-family: var( --myuw-profile-font, var(--myuw-font, \'Montserrat\', \'Roboto\', Arial, sans-serif) );\n  padding: 3px 16px;\n  color: var(--myuw-menu-color, rgba(0,0,0,0.87));\n  text-decoration: none;\n  background-color: #f5f5f5;\n  border-bottom: 1px solid #e5e5e5;\n  user-select: none;\n  outline: none;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n  flex-direction: row;\n  min-height: 48px;\n  height: 48px;\n  -webkit-align-content: center;\n  align-content: center;\n  -webkit-align-items: center;\n  align-items: center;\n  -webkit-box-pack: start;\n  -webkit-justify-content: flex-start;\n  justify-content: flex-start;\n}\n\n#myuw-profile-nav #myuw-profile-nav-user {\n    font-weight: 600;\n    text-transform: capitalize;\n    background-color: rgb(255,255,255);\n    border-bottom: none;\n}\n\n#myuw-profile-nav #myuw-profile-nav-user.hidden {\n  display: none;\n}\n\n#myuw-profile-nav #myuw-profile-nav-user:hover {\n    background-color: rgb(255,255,255);\n}\n\n::slotted(a:hover),\n::slotted(a:focus),\n::slotted(p:hover),\n::slotted(p:focus)  {\n    background-color: #ececec;\n}\n\n#myuw-profile-nav a:hover,\n#myuw-profile-nav a:focus,\n#myuw-profile-nav p:hover,\n#myuw-profile-nav p:focus {\n    background-color: #ececec;\n} </style> <a href="#" id="myuw-profile-login" class="hidden">Login</a> <div id="myuw-profile-wrapper" class="hidden"> <button id="myuw-profile-circle" aria-label="profile menu" aria-haspopup="true" aria-controls="myuw-profile-nav" aria-expanded="false"> <p id="myuw-profile-circle-initial"><i class="material-icons">person</i></p> </button> <ul id="myuw-profile-nav" role="menu" tabindex="-1" aria-labelledby="myuw-profile-circle"> <p id="myuw-profile-nav-user"></p> <li role="menuitem"> <slot name="nav-item"></slot> </li> <li role="menuitem"> <a id="myuw-profile-logout" href="#">Logout</a> </li> </ul> </div> '),(function(){if("function"==typeof window.CustomEvent)return!1;function n(n,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var t=document.createEvent("CustomEvent");return t.initCustomEvent(n,e.bubbles,e.cancelable,e.detail),t}n.prototype=window.Event.prototype,window.CustomEvent=n})(),window.customElements.define("myuw-profile",n)})();
+!(function(){"use strict";function n(n,e){for(var t=0;t<e.length;t++){var o=e[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(n,o.key,o)}}function e(n){return(e=Object.setPrototypeOf?Object.getPrototypeOf:function(n){return n.__proto__||Object.getPrototypeOf(n)})(n)}function t(n,e){return(t=Object.setPrototypeOf||function(n,e){return n.__proto__=e,n})(n,e)}function o(n,e,i){return(o=(function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(n){return!1}})()?Reflect.construct:function(n,e,o){var i=[null];i.push.apply(i,e);var r=new(Function.bind.apply(n,i));return o&&t(r,o.prototype),r}).apply(null,arguments)}function i(n){var r="function"==typeof Map?new Map:void 0;return(i=function(n){if(null===n||(i=n,-1===Function.toString.call(i).indexOf("[native code]")))return n;var i;if("function"!=typeof n)throw new TypeError("Super expression must either be null or a function");if(void 0!==r){if(r.has(n))return r.get(n);r.set(n,a)}function a(){return o(n,arguments,e(this).constructor)}return a.prototype=Object.create(n.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),t(a,n)})(n)}function r(n,e){return!e||"object"!=typeof e&&"function"!=typeof e?(function(n){if(void 0===n)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return n})(n):e}var a,l,s=(function(o){function a(){var n;return(function(n,e){if(!(n instanceof e))throw new TypeError("Cannot call a class as a function")})(this,a),(n=r(this,e(a).call(this))).attachShadow({mode:"open"}),n.shadowRoot.appendChild(a.template.content.cloneNode(!0)),n}var l,s,u;return(function(n,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");n.prototype=Object.create(e&&e.prototype,{constructor:{value:n,writable:!0,configurable:!0}}),e&&t(n,e)})(a,i(HTMLElement)),l=a,u=[{key:"observedAttributes",get:function(){return["login-url","logout-url","background-color"]}}],(s=[{key:"attributeChangedCallback",value:function(n,e,t){this[n]=t,this.updateAttribute(n)}},{key:"connectedCallback",value:function(){var n=this;this["login-url"]=this.getAttribute("login-url"),this["logout-url"]=this.getAttribute("logout-url"),this["background-color"]=this.getAttribute("background-color"),this.$login=this.shadowRoot.getElementById("myuw-profile-login"),this.$logout=this.shadowRoot.getElementById("myuw-profile-logout"),this.$button=this.shadowRoot.getElementById("myuw-profile-circle"),this.$circle=this.shadowRoot.getElementById("myuw-profile-circle-initial"),this.$nav=this.shadowRoot.getElementById("myuw-profile-nav"),this.$displayName=this.shadowRoot.getElementById("myuw-profile-nav-user"),this.$wrapper=this.shadowRoot.getElementById("myuw-profile-wrapper"),document.addEventListener("myuw-login",function(e){e.detail.person?n.componentReady(e.detail.person):n.componentReady()},!1),window.addEventListener("click",function(e){n.$nav.classList.contains("visible")&&(n.$nav.classList.remove("visible"),n.$button.setAttribute("aria-expanded","false"))}),this.$nav.addEventListener("click",function(n){n.stopPropagation()}),this.$button.addEventListener("click",function(e){e.stopPropagation(),n.$nav.classList.toggle("visible"),n.$nav.classList.contains("visible")?(n.$nav.focus(),n.$button.setAttribute("aria-expanded","true")):(n.$nav.blur(),n.$button.setAttribute("aria-expanded","false"))}),this.updateAttribute("login-url"),this.updateAttribute("logout-url"),this.updateAttribute("background-color")}},{key:"updateAttribute",value:function(n){switch(n){case"login-url":this.shadowRoot.getElementById("myuw-profile-login").setAttribute("href",this["login-url"]);break;case"logout-url":this.shadowRoot.getElementById("myuw-profile-logout").setAttribute("href",this["logout-url"]);break;case"background-color":this.$circle.style.backgroundColor=this["background-color"]}}},{key:"componentReady",value:function(n){n?n.firstName?(this.$displayName.classList.remove("hidden"),this.$displayName.innerHTML=n.firstName,this.$circle.innerHTML=n.firstName.substring(0,1),this.showProfileBubble()):(this.$displayName.classList.add("hidden"),this.$circle.innerHTML='<i class="material-icons">person</i>',this.showProfileBubble()):this.showLoginButton()}},{key:"showLoginButton",value:function(){this.$login.classList.remove("hidden"),this.$wrapper.classList.add("hidden")}},{key:"showProfileBubble",value:function(){this.$login.classList.add("hidden"),this.$wrapper.classList.remove("hidden")}}])&&n(l.prototype,s),u&&n(l,u),a})();s.template=(a='<style> @import url(https://fonts.googleapis.com/icon?family=Material+Icons);\n\n:host([hidden]) {\n    display: none;\n}\n\n#myuw-profile-login {\n    font-family: var( --myuw-profile-font, var(--myuw-font, \'Montserrat\', \'Roboto\', Arial, sans-serif) );\n    text-transform: uppercase;\n    text-decoration: none;\n    color: var( --myuw-profile-login-color, var(--myuw-primary-color, white) );\n    padding: 10px 13px;\n    font-weight: var(--myuw-profile-font-weight, 600);\n    letter-spacing: 0px;\n    font-size: 14px;\n    position: relative;\n    display: inline-block;\n    transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);\n}\n\n#myuw-profile-login.hidden {\n    display: none;\n}\n\n#myuw-profile-circle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    align-content: center;\n    align-self: center;\n    outline: none;\n    border-radius: 50%;\n    height: 42px;\n    width: 42px;\n    min-width: initial;\n    text-transform: uppercase;\n    text-align: center;\n    background: transparent;\n    border-color: transparent;\n    transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);\n}\n\n#myuw-profile-circle:hover,\n#myuw-profile-login:hover {\n    cursor: pointer;\n    background: rgba(0,0,0,0.12);\n}\n\n#myuw-profile-circle-initial {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    align-content: center;\n    align-self: center;\n    padding: 0;\n    margin: 0;\n    font-weight: var(--myuw-profile-font-weight, 300);\n    font-size: 18px;\n    font-family: var( --myuw-profile-font, var(--myuw-font, \'Roboto\', Arial, sans-serif) );\n    background-color: var( --myuw-profile-background-color, #fb686d);\n    user-select: none;\n    color: white;\n    text-transform: capitalize;\n    border-radius: 50%;\n    margin: 0;\n    overflow: hidden;\n    position: relative;\n    height: 34px;\n    width: 34px;\n    min-width: 34px;\n    font-size: 18px;\n}\n\n#myuw-profile-wrapper {\n    position: relative;\n    display: inline-block;\n    margin: 0 6px;\n}\n\n#myuw-profile-wrapper.hidden {\n    display: none;\n}\n\n#myuw-profile-nav {\n    position: absolute;\n    top: 45px;\n    right: 0;\n    min-width: 320px;\n    color: black;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    font-size: 14px;\n    z-index: 101;\n\n    transform-origin: top right;\n    transform: scale(0);\n    opacity: 0;\n    visibility: hidden;\n    transition: visibility 0s, opacity .25s cubic-bezier(0.0, 0.0, 0.2, 1), transform .25s cubic-bezier(0.0, 0.0, 0.2, 1);\n\n    -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);\n    -moz-box-shadow:    0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);\n    box-shadow:         0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);\n}\n\n#myuw-profile-nav.visible {\n    transform: scale(1);\n    opacity: 1;\n    visibility: visible;\n}\n\n#myuw-profile-nav p {\n    padding: 0;\n    margin: 0;\n}\n\n::slotted(a),\n::slotted(p) {\n  transition: all .3s ease;\n  position: relative;\n  font-size: 15px;\n  font-family: var( --myuw-profile-font, var(--myuw-font, \'Montserrat\', \'Roboto\', Arial, sans-serif) );\n  padding: 3px 16px;\n  color: var(--myuw-menu-color, rgba(0,0,0,0.87));\n  text-decoration: none;\n  background-color: #f5f5f5;\n  border-bottom: 1px solid #e5e5e5;\n  user-select: none;\n  outline: none;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n  flex-direction: row;\n  min-height: 48px;\n  height: 48px;\n  -webkit-align-content: center;\n  align-content: center;\n  -webkit-align-items: center;\n  align-items: center;\n  -webkit-box-pack: start;\n  -webkit-justify-content: flex-start;\n  justify-content: flex-start;\n}\n\n/* \n  Styles need to be duplicated separate from ::slotted in order for \n  Firefox to do it\'s job\n*/\n#myuw-profile-nav a,\n#myuw-profile-nav p {\n  transition: all .3s ease;\n  position: relative;\n  font-size: 15px;\n  font-family: var( --myuw-profile-font, var(--myuw-font, \'Montserrat\', \'Roboto\', Arial, sans-serif) );\n  padding: 3px 16px;\n  color: var(--myuw-menu-color, rgba(0,0,0,0.87));\n  text-decoration: none;\n  background-color: #f5f5f5;\n  border-bottom: 1px solid #e5e5e5;\n  user-select: none;\n  outline: none;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -webkit-flex-direction: row;\n  flex-direction: row;\n  min-height: 48px;\n  height: 48px;\n  -webkit-align-content: center;\n  align-content: center;\n  -webkit-align-items: center;\n  align-items: center;\n  -webkit-box-pack: start;\n  -webkit-justify-content: flex-start;\n  justify-content: flex-start;\n}\n\n#myuw-profile-nav #myuw-profile-nav-user {\n    font-weight: 600;\n    text-transform: capitalize;\n    background-color: rgb(255,255,255);\n    border-bottom: none;\n}\n\n#myuw-profile-nav #myuw-profile-nav-user.hidden {\n  display: none;\n}\n\n#myuw-profile-nav #myuw-profile-nav-user:hover {\n    background-color: rgb(255,255,255);\n}\n\n::slotted(a:hover),\n::slotted(a:focus),\n::slotted(p:hover),\n::slotted(p:focus)  {\n    background-color: #ececec;\n}\n\n#myuw-profile-nav a:hover,\n#myuw-profile-nav a:focus,\n#myuw-profile-nav p:hover,\n#myuw-profile-nav p:focus {\n    background-color: #ececec;\n} </style> <a href="#" id="myuw-profile-login" class="hidden">Login</a> <div id="myuw-profile-wrapper" class="hidden"> <button id="myuw-profile-circle" aria-label="profile menu" aria-haspopup="true" aria-controls="myuw-profile-nav" aria-expanded="false"> <p id="myuw-profile-circle-initial"><i class="material-icons">person</i></p> </button> <ul id="myuw-profile-nav" role="menu" tabindex="-1" aria-labelledby="myuw-profile-circle"> <p id="myuw-profile-nav-user"></p> <li role="menuitem"> <slot name="nav-item"></slot> </li> <li role="menuitem"> <a id="myuw-profile-logout" href="#">Logout</a> </li> </ul> </div> ',l=document.createElement("template"),l.innerHTML=a,l),(function(){if("function"==typeof window.CustomEvent)return!1;function n(n,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var t=document.createEvent("CustomEvent");return t.initCustomEvent(n,e.bubbles,e.cancelable,e.detail),t}n.prototype=window.Event.prototype,window.CustomEvent=n})(),window.customElements.define("myuw-profile",s)})();

package.json

 {
   "name": "@myuw-web-components/myuw-profile",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Web component that provides an avatar button and profile menu",
@@ -27,2 +27,4 @@ "module": "dist/myuw-profile.min.mjs",
   "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/preset-env": "^7.1.0",
     "gh-pages": "^1.2.0",
@@ -32,2 +34,3 @@ "live-server": "^1.2.0",
     "rollup": "^0.63.4",
+    "rollup-plugin-babel": "^4.0.3",
     "rollup-plugin-html": "^0.2.1",
@@ -34,0 +37,0 @@ "rollup-plugin-minify-es": "^1.1.1",

README.md

@@ -12,2 +12,4 @@ # myuw-profile
 
+*Note: You may want to specify a specific version of the component to ensure stability. See [the change log](CHANGELOG.md) or the [npm entry](https://www.npmjs.com/package/@myuw-web-components/myuw-profile) for version information.*
+
 Use the component's HTML tag wherever you want:
@@ -24,12 +26,21 @@
 
-### Login event
 
-To tell the component that there is an active session, dispatch a CustomEvent called "myuw-login":
+### Displaying the component
 
+Because it has multiple states depending on whether there is an active session, all elements of the profile component are hidden by default. The component listens for a CustomEvent called "myuw-login" and its state is dependent on the data you pass when you dispatch that event:
+
 ```js
+/*
+    Notes about configuring the event:
+    - The event MUST contain a "detail" object. The contents of the detail object determine what the component will display:
+        - An empty "detail" object ( detail: {} ) will result in the login button being displayed
+        - An empty "person" object ( person: {} ) will result in a generic session being displayed (using the person icon). This should only be used when the session doesn't provide a user's name, username, email, etc.
+        - A person object containing a "firstName" ( person: {firstName: "Name"} ) will result in the full session display
+    - The "bubbles" property is optional unless you're dispatching the event from an element/scope other than "document"
+*/
 var customEvent = new CustomEvent('myuw-login', {
   bubbles: true, // optional
-  detail: { // required object "detail"
-    person: { // required object "person"
-      "firstName": "User" // optional property "firstName"
+  detail: { // required always
+    person: { // required for generic session display
+      "firstName": "User" // required for full session display
     }
@@ -39,14 +50,21 @@ }
 // Dispatch the event
-document.getElementsByTagName('myuw-profile')[0].dispatchEvent(customEvent);       
+document.dispatchEvent(customEvent);    
 ```
 
-Notes:
+#### Initial page load
 
-- The "bubbles" property is required if you dispatch the event from an element/scope other than `document`
-- The "detail" object is required by the CustomEvent spec
-- The "person" object is required by the myuw-profile component
-- The "firstName" attribute determines the letter displayed in the profile menu button and the name displayed within the menu. If no first name is provided, the button will show a generic "person" icon
+If you want the component to show something on the initial page load (and not be hidden), make sure to dispatch the "myuw-login" event **after** all web components are loaded and upgraded (i.e. ready to be interacted with). The webcomponentsjs polyfill provides and event you can hook into:
 
-#### Configurable properties
+```js
+document.addEventListener('WebComponentsReady', function() {
+    var customEvent = new CustomEvent('myuw-login', {
+        // Configure the event data to display what you want
+    });
+    // Dispatch the event
+    document.dispatchEvent(customEvent);    
+});
+```
 
+### Configurable properties
+
 - **Login URL (login-url):** The URL to redirect users to on login
@@ -56,7 +74,7 @@ - **Logout URL (logout-url):** The Logout URL to redirect users to on logout
 
-#### Slots
+### Slots
 
 - **Profile Navigation Item (nav-item):** Add a custom item to the profile button's navigation menu, this slot expects an `<a>` tag
 
-#### CSS Variables
+### CSS Variables
 
@@ -63,0 +81,0 @@ - `--myuw-profile-font`: Set the font stack for this component

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67309

increased by13.15%

Lines of code

582

increased by30.2%

Number of lines in readme file

83

increased by27.69%

Worsened metrics

Dev dependency count

10

increased by42.86%

No dependency changes