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

Comparing version 1.6.3 to 1.6.5

CHANGELOG.md

 # myuw-profile versions
 
+## 1.6.5
+
+### Updated
+
+* Update profile button to strengthen the contrast between the background and foreground on hover effect
+
+## 1.6.4
+
+### Updated
+
+* Update README with releasing information and import path usage recommendation
+
 ## 1.6.3
@@ -4,0 +16,0 @@

dist/myuw-profile.js

@@ -141,3 +141,3 @@ (function () {
 
-  var template = "<style> @import url(https://fonts.googleapis.com/icon?family=Material+Icons);\r\n\r\n  #myuw-profile-login {\r\n    font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );\r\n    text-transform: uppercase;\r\n    text-decoration: none;\r\n    color: var( --myuw-profile-login-color, var(--myuw-primary-color, white) );\r\n    padding: 10px 13px;\r\n    font-weight: var(--myuw-profile-font-weight, 600);\r\n    letter-spacing: 0px;\r\n    font-size: 14px;\r\n    position: relative;\r\n    display: inline-block;\r\n    transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);\r\n  }\r\n\r\n  #myuw-profile-circle {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    align-content: center;\r\n    align-self: center;\r\n    border-radius: 50%;\r\n    height: 42px;\r\n    width: 42px;\r\n    min-width: initial;\r\n    text-transform: uppercase;\r\n    text-align: center;\r\n    background: transparent;\r\n    border-color: transparent;\r\n    transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);\r\n  }\r\n\r\n  #myuw-profile-circle:hover,\r\n  #myuw-profile-login:hover {\r\n    cursor: pointer;\r\n    background: rgba(0, 0, 0, 0.12);\r\n  }\r\n\r\n  #myuw-profile-circle:focus,\r\n  #myuw-profile-nav a:focus,\r\n  #myuw-profile-nav p:focus {\r\n    outline: -webkit-focus-ring-color auto 5px;\r\n  }\r\n\r\n  #myuw-profile-circle-initial {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    align-content: center;\r\n    align-self: center;\r\n    padding: 0;\r\n    margin: 0;\r\n    font-weight: var(--myuw-profile-font-weight, 300);\r\n    font-size: 18px;\r\n    font-family: var( --myuw-profile-font, var(--myuw-font, 'Roboto', Arial, sans-serif) );\r\n    background-color: var( --myuw-profile-background-color, #fb686d);\r\n    user-select: none;\r\n    color: white;\r\n    text-transform: capitalize;\r\n    border-radius: 50%;\r\n    margin: 0;\r\n    overflow: hidden;\r\n    position: relative;\r\n    height: 34px;\r\n    width: 34px;\r\n    min-width: 34px;\r\n    font-size: 18px;\r\n  }\r\n\r\n  #myuw-profile-wrapper {\r\n    position: relative;\r\n    display: inline-block;\r\n    margin: 0 6px;\r\n  }\r\n\r\n  #myuw-profile-nav {\r\n    position: absolute;\r\n    top: 45px;\r\n    right: 0;\r\n    min-width: 230px;\r\n    color: black;\r\n    list-style: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    font-size: 14px;\r\n    z-index: 101;\r\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);\r\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);\r\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);\r\n    transform: scale(1);\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n\r\n  #myuw-profile-nav[hidden] {\r\n    display: unset !important;\r\n    transform-origin: top right;\r\n    transform: scale(0);\r\n    opacity: 0;\r\n    visibility: hidden;\r\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);\r\n  }\r\n\r\n  #myuw-profile-nav p {\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n\r\n  ::slotted(a),\r\n  ::slotted(p) {\r\n    transition: all .3s ease;\r\n    position: relative;\r\n    font-size: 15px;\r\n    font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );\r\n    padding: 3px 16px;\r\n    color: var(--myuw-menu-color, rgba(0,0,0,0.87));\r\n    text-decoration: none;\r\n    background-color: #f5f5f5;\r\n    border-bottom: 1px solid #e5e5e5;\r\n    user-select: none;\r\n    display: flex;\r\n    -webkit-box-orient: horizontal;\r\n    -webkit-box-direction: normal;\r\n    -webkit-flex-direction: row;\r\n    flex-direction: row;\r\n    min-height: 48px;\r\n    height: 48px;\r\n    -webkit-align-content: center;\r\n    align-content: center;\r\n    -webkit-align-items: center;\r\n    align-items: center;\r\n    -webkit-box-pack: start;\r\n    -webkit-justify-content: flex-start;\r\n    justify-content: flex-start;\r\n  }\r\n\r\n  /*\r\n     Styles need to be duplicated separate from ::slotted in order for\r\n     Firefox to do it's job\r\n   */\r\n  #myuw-profile-nav a,\r\n  #myuw-profile-nav p {\r\n    transition: all .3s ease;\r\n    position: relative;\r\n    font-size: 15px;\r\n    font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );\r\n    padding: 3px 16px;\r\n    color: var(--myuw-menu-color, rgba(0,0,0,0.87));\r\n    text-decoration: none;\r\n    background-color: #f5f5f5;\r\n    border-bottom: 1px solid #e5e5e5;\r\n    user-select: none;\r\n    display: flex;\r\n    -webkit-box-orient: horizontal;\r\n    -webkit-box-direction: normal;\r\n    -webkit-flex-direction: row;\r\n    flex-direction: row;\r\n    min-height: 48px;\r\n    height: 48px;\r\n    -webkit-align-content: center;\r\n    align-content: center;\r\n    -webkit-align-items: center;\r\n    align-items: center;\r\n    -webkit-box-pack: start;\r\n    -webkit-justify-content: flex-start;\r\n    justify-content: flex-start;\r\n  }\r\n\r\n  #myuw-profile-nav #myuw-profile-nav-user {\r\n    font-weight: 600;\r\n    text-transform: capitalize;\r\n    background-color: rgb(255,255,255);\r\n    border-bottom: none;\r\n  }\r\n\r\n  #myuw-profile-nav #myuw-profile-nav-user:hover {\r\n    background-color: rgb(255,255,255);\r\n  }\r\n\r\n  ::slotted(a:hover),\r\n  ::slotted(a:focus),\r\n  ::slotted(p:hover),\r\n  ::slotted(p:focus)  {\r\n    background-color: #ececec;\r\n  }\r\n\r\n  ::slotted(a:focus),\r\n  ::slotted(p:focus) {\r\n    outline: -webkit-focus-ring-color auto 5px;\r\n    z-index: 1;\r\n  }\r\n\r\n  #myuw-profile-nav a:hover,\r\n  #myuw-profile-nav a:focus,\r\n  #myuw-profile-nav p:hover,\r\n  #myuw-profile-nav p:focus {\r\n    background-color: #ececec;\r\n  }\r\n\r\n  #myuw-profile-backdrop {\r\n    display: block;\r\n    height: 100%;\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    z-index: 99;\r\n  }\r\n\r\n  /* Don't let `display` styles override hidden attribute */\r\n  [hidden] {\r\n    display: none !important;\r\n  }\r\n\r\n  body.modal-open {\r\n    overflow: hidden;\r\n    position: fixed;\r\n  } </style> <a href=\"#\" id=\"myuw-profile-login\" hidden>Login</a> <div id=\"myuw-profile-backdrop\" hidden></div> <div id=\"myuw-profile-wrapper\" 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\" hidden> <p id=\"myuw-profile-nav-user\"></p> <li role=\"menuitem\"> <slot name=\"nav-item\"></slot> </li> <li> <a id=\"myuw-profile-logout\" href=\"#\" role=\"menuitem\">Logout</a> </li> </ul> </div> ";
+  var template = "<style> @import url(https://fonts.googleapis.com/icon?family=Material+Icons);\r\n\r\n  #myuw-profile-login {\r\n    font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );\r\n    text-transform: uppercase;\r\n    text-decoration: none;\r\n    color: var( --myuw-profile-login-color, var(--myuw-primary-color, white) );\r\n    padding: 10px 13px;\r\n    font-weight: var(--myuw-profile-font-weight, 600);\r\n    letter-spacing: 0px;\r\n    font-size: 14px;\r\n    position: relative;\r\n    display: inline-block;\r\n    transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);\r\n  }\r\n\r\n  #myuw-profile-circle {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    align-content: center;\r\n    align-self: center;\r\n    border-radius: 50%;\r\n    height: 42px;\r\n    width: 42px;\r\n    min-width: initial;\r\n    text-transform: uppercase;\r\n    text-align: center;\r\n    background: transparent;\r\n    border-color: transparent;\r\n    transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);\r\n  }\r\n\r\n  #myuw-profile-circle:hover,\r\n  #myuw-profile-login:hover {\r\n    cursor: pointer;\r\n    background: rgba(0, 0, 0, 0.2);\r\n  }\r\n\r\n  #myuw-profile-circle:focus,\r\n  #myuw-profile-nav a:focus,\r\n  #myuw-profile-nav p:focus {\r\n    outline: -webkit-focus-ring-color auto 5px;\r\n  }\r\n\r\n  #myuw-profile-circle-initial {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    align-content: center;\r\n    align-self: center;\r\n    padding: 0;\r\n    margin: 0;\r\n    font-weight: var(--myuw-profile-font-weight, 300);\r\n    font-size: 18px;\r\n    font-family: var( --myuw-profile-font, var(--myuw-font, 'Roboto', Arial, sans-serif) );\r\n    background-color: var( --myuw-profile-background-color, #fb686d);\r\n    user-select: none;\r\n    color: white;\r\n    text-transform: capitalize;\r\n    border-radius: 50%;\r\n    margin: 0;\r\n    overflow: hidden;\r\n    position: relative;\r\n    height: 34px;\r\n    width: 34px;\r\n    min-width: 34px;\r\n    font-size: 18px;\r\n  }\r\n\r\n  #myuw-profile-wrapper {\r\n    position: relative;\r\n    display: inline-block;\r\n    margin: 0 6px;\r\n  }\r\n\r\n  #myuw-profile-nav {\r\n    position: absolute;\r\n    top: 45px;\r\n    right: 0;\r\n    min-width: 230px;\r\n    color: black;\r\n    list-style: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    font-size: 14px;\r\n    z-index: 101;\r\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);\r\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);\r\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);\r\n    transform: scale(1);\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n\r\n  #myuw-profile-nav[hidden] {\r\n    display: unset !important;\r\n    transform-origin: top right;\r\n    transform: scale(0);\r\n    opacity: 0;\r\n    visibility: hidden;\r\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);\r\n  }\r\n\r\n  #myuw-profile-nav p {\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n\r\n  ::slotted(a),\r\n  ::slotted(p) {\r\n    transition: all .3s ease;\r\n    position: relative;\r\n    font-size: 15px;\r\n    font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );\r\n    padding: 3px 16px;\r\n    color: var(--myuw-menu-color, rgba(0,0,0,0.87));\r\n    text-decoration: none;\r\n    background-color: #f5f5f5;\r\n    border-bottom: 1px solid #e5e5e5;\r\n    user-select: none;\r\n    display: flex;\r\n    -webkit-box-orient: horizontal;\r\n    -webkit-box-direction: normal;\r\n    -webkit-flex-direction: row;\r\n    flex-direction: row;\r\n    min-height: 48px;\r\n    height: 48px;\r\n    -webkit-align-content: center;\r\n    align-content: center;\r\n    -webkit-align-items: center;\r\n    align-items: center;\r\n    -webkit-box-pack: start;\r\n    -webkit-justify-content: flex-start;\r\n    justify-content: flex-start;\r\n  }\r\n\r\n  /*\r\n     Styles need to be duplicated separate from ::slotted in order for\r\n     Firefox to do it's job\r\n   */\r\n  #myuw-profile-nav a,\r\n  #myuw-profile-nav p {\r\n    transition: all .3s ease;\r\n    position: relative;\r\n    font-size: 15px;\r\n    font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );\r\n    padding: 3px 16px;\r\n    color: var(--myuw-menu-color, rgba(0,0,0,0.87));\r\n    text-decoration: none;\r\n    background-color: #f5f5f5;\r\n    border-bottom: 1px solid #e5e5e5;\r\n    user-select: none;\r\n    display: flex;\r\n    -webkit-box-orient: horizontal;\r\n    -webkit-box-direction: normal;\r\n    -webkit-flex-direction: row;\r\n    flex-direction: row;\r\n    min-height: 48px;\r\n    height: 48px;\r\n    -webkit-align-content: center;\r\n    align-content: center;\r\n    -webkit-align-items: center;\r\n    align-items: center;\r\n    -webkit-box-pack: start;\r\n    -webkit-justify-content: flex-start;\r\n    justify-content: flex-start;\r\n  }\r\n\r\n  #myuw-profile-nav #myuw-profile-nav-user {\r\n    font-weight: 600;\r\n    text-transform: capitalize;\r\n    background-color: rgb(255,255,255);\r\n    border-bottom: none;\r\n  }\r\n\r\n  #myuw-profile-nav #myuw-profile-nav-user:hover {\r\n    background-color: rgb(255,255,255);\r\n  }\r\n\r\n  ::slotted(a:hover),\r\n  ::slotted(a:focus),\r\n  ::slotted(p:hover),\r\n  ::slotted(p:focus)  {\r\n    background-color: #ececec;\r\n  }\r\n\r\n  ::slotted(a:focus),\r\n  ::slotted(p:focus) {\r\n    outline: -webkit-focus-ring-color auto 5px;\r\n    z-index: 1;\r\n  }\r\n\r\n  #myuw-profile-nav a:hover,\r\n  #myuw-profile-nav a:focus,\r\n  #myuw-profile-nav p:hover,\r\n  #myuw-profile-nav p:focus {\r\n    background-color: #ececec;\r\n  }\r\n\r\n  #myuw-profile-backdrop {\r\n    display: block;\r\n    height: 100%;\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    z-index: 99;\r\n  }\r\n\r\n  /* Don't let `display` styles override hidden attribute */\r\n  [hidden] {\r\n    display: none !important;\r\n  }\r\n\r\n  body.modal-open {\r\n    overflow: hidden;\r\n    position: fixed;\r\n  } </style> <a href=\"#\" id=\"myuw-profile-login\" hidden>Login</a> <div id=\"myuw-profile-backdrop\" hidden></div> <div id=\"myuw-profile-wrapper\" 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\" hidden> <p id=\"myuw-profile-nav-user\"></p> <li role=\"menuitem\"> <slot name=\"nav-item\"></slot> </li> <li> <a id=\"myuw-profile-logout\" href=\"#\" role=\"menuitem\">Logout</a> </li> </ul> </div> ";
 
@@ -144,0 +144,0 @@ var MyUWProfile =

dist/myuw-profile.min.js

@@ -1,1 +0,1 @@
-!(function(){"use strict";function e(e,n){for(var r=0;r<n.length;r++){var t=n[r];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}function n(n,r,t){return r&&e(n.prototype,r),t&&e(n,t),n}function r(e){return(r=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function t(e,n){return(t=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e})(e,n)}function o(e,n,r){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(e){return!1}})()?Reflect.construct:function(e,n,r){var o=[null];o.push.apply(o,n);var i=new(Function.bind.apply(e,o));return r&&t(i,r.prototype),i}).apply(null,arguments)}function i(e){var n="function"==typeof Map?new Map:void 0;return(i=function(e){if(null===e||(i=e,-1===Function.toString.call(i).indexOf("[native code]")))return e;var i;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(e))return n.get(e);n.set(e,a)}function a(){return o(e,arguments,r(this).constructor)}return a.prototype=Object.create(e.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),t(a,e)})(e)}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var l=(function(e){function o(){var e,n,t;return(function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")})(this,o),n=this,t=r(o).call(this),(e=!t||"object"!=typeof t&&"function"!=typeof t?a(n):t).attachShadow({mode:"open"}),e.shadowRoot.appendChild(e.constructor.template.content.cloneNode(!0)),e.$login=e.shadowRoot.getElementById("myuw-profile-login"),e.$logout=e.shadowRoot.getElementById("myuw-profile-logout"),e.$backdrop=e.shadowRoot.getElementById("myuw-profile-backdrop"),e.$button=e.shadowRoot.getElementById("myuw-profile-circle"),e.$circle=e.shadowRoot.getElementById("myuw-profile-circle-initial"),e.$nav=e.shadowRoot.getElementById("myuw-profile-nav"),e.$displayName=e.shadowRoot.getElementById("myuw-profile-nav-user"),e.$wrapper=e.shadowRoot.getElementById("myuw-profile-wrapper"),e.contentSlotElement=e.shadowRoot.querySelector("slot[name=nav-item]"),e.eventListeners=[{target:document,type:"myuw-login",handler:function(n){return e.handleLogin(n)}},{target:e.$button,type:"click",handler:function(n){return e.handleButtonClick(n)}},{target:e.$nav,type:"click",handler:function(n){return e.handleNavClick(n)}},{target:a(e),type:"keydown",handler:function(n){return e.handleKeydown(n)}},{target:window,type:"click",handler:function(n){return e.handleWindowClick(n)}}],e.getFocusableElements(),e}return(function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),n&&t(e,n)})(o,i(HTMLElement)),n(o,null,[{key:"elementName",get:function(){return"myuw-profile"}},{key:"observedAttributes",get:function(){return["login-url","logout-url","background-color"]}},{key:"template",get:function(){return void 0===this._template&&(this._template=document.createElement("template"),this._template.innerHTML='<style> @import url(https://fonts.googleapis.com/icon?family=Material+Icons);\r\n\r\n  #myuw-profile-login {\r\n    font-family: var( --myuw-profile-font, var(--myuw-font, \'Montserrat\', \'Roboto\', Arial, sans-serif) );\r\n    text-transform: uppercase;\r\n    text-decoration: none;\r\n    color: var( --myuw-profile-login-color, var(--myuw-primary-color, white) );\r\n    padding: 10px 13px;\r\n    font-weight: var(--myuw-profile-font-weight, 600);\r\n    letter-spacing: 0px;\r\n    font-size: 14px;\r\n    position: relative;\r\n    display: inline-block;\r\n    transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);\r\n  }\r\n\r\n  #myuw-profile-circle {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    align-content: center;\r\n    align-self: center;\r\n    border-radius: 50%;\r\n    height: 42px;\r\n    width: 42px;\r\n    min-width: initial;\r\n    text-transform: uppercase;\r\n    text-align: center;\r\n    background: transparent;\r\n    border-color: transparent;\r\n    transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);\r\n  }\r\n\r\n  #myuw-profile-circle:hover,\r\n  #myuw-profile-login:hover {\r\n    cursor: pointer;\r\n    background: rgba(0, 0, 0, 0.12);\r\n  }\r\n\r\n  #myuw-profile-circle:focus,\r\n  #myuw-profile-nav a:focus,\r\n  #myuw-profile-nav p:focus {\r\n    outline: -webkit-focus-ring-color auto 5px;\r\n  }\r\n\r\n  #myuw-profile-circle-initial {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    align-content: center;\r\n    align-self: center;\r\n    padding: 0;\r\n    margin: 0;\r\n    font-weight: var(--myuw-profile-font-weight, 300);\r\n    font-size: 18px;\r\n    font-family: var( --myuw-profile-font, var(--myuw-font, \'Roboto\', Arial, sans-serif) );\r\n    background-color: var( --myuw-profile-background-color, #fb686d);\r\n    user-select: none;\r\n    color: white;\r\n    text-transform: capitalize;\r\n    border-radius: 50%;\r\n    margin: 0;\r\n    overflow: hidden;\r\n    position: relative;\r\n    height: 34px;\r\n    width: 34px;\r\n    min-width: 34px;\r\n    font-size: 18px;\r\n  }\r\n\r\n  #myuw-profile-wrapper {\r\n    position: relative;\r\n    display: inline-block;\r\n    margin: 0 6px;\r\n  }\r\n\r\n  #myuw-profile-nav {\r\n    position: absolute;\r\n    top: 45px;\r\n    right: 0;\r\n    min-width: 230px;\r\n    color: black;\r\n    list-style: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    font-size: 14px;\r\n    z-index: 101;\r\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);\r\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);\r\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);\r\n    transform: scale(1);\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n\r\n  #myuw-profile-nav[hidden] {\r\n    display: unset !important;\r\n    transform-origin: top right;\r\n    transform: scale(0);\r\n    opacity: 0;\r\n    visibility: hidden;\r\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);\r\n  }\r\n\r\n  #myuw-profile-nav p {\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n\r\n  ::slotted(a),\r\n  ::slotted(p) {\r\n    transition: all .3s ease;\r\n    position: relative;\r\n    font-size: 15px;\r\n    font-family: var( --myuw-profile-font, var(--myuw-font, \'Montserrat\', \'Roboto\', Arial, sans-serif) );\r\n    padding: 3px 16px;\r\n    color: var(--myuw-menu-color, rgba(0,0,0,0.87));\r\n    text-decoration: none;\r\n    background-color: #f5f5f5;\r\n    border-bottom: 1px solid #e5e5e5;\r\n    user-select: none;\r\n    display: flex;\r\n    -webkit-box-orient: horizontal;\r\n    -webkit-box-direction: normal;\r\n    -webkit-flex-direction: row;\r\n    flex-direction: row;\r\n    min-height: 48px;\r\n    height: 48px;\r\n    -webkit-align-content: center;\r\n    align-content: center;\r\n    -webkit-align-items: center;\r\n    align-items: center;\r\n    -webkit-box-pack: start;\r\n    -webkit-justify-content: flex-start;\r\n    justify-content: flex-start;\r\n  }\r\n\r\n  /*\r\n     Styles need to be duplicated separate from ::slotted in order for\r\n     Firefox to do it\'s job\r\n   */\r\n  #myuw-profile-nav a,\r\n  #myuw-profile-nav p {\r\n    transition: all .3s ease;\r\n    position: relative;\r\n    font-size: 15px;\r\n    font-family: var( --myuw-profile-font, var(--myuw-font, \'Montserrat\', \'Roboto\', Arial, sans-serif) );\r\n    padding: 3px 16px;\r\n    color: var(--myuw-menu-color, rgba(0,0,0,0.87));\r\n    text-decoration: none;\r\n    background-color: #f5f5f5;\r\n    border-bottom: 1px solid #e5e5e5;\r\n    user-select: none;\r\n    display: flex;\r\n    -webkit-box-orient: horizontal;\r\n    -webkit-box-direction: normal;\r\n    -webkit-flex-direction: row;\r\n    flex-direction: row;\r\n    min-height: 48px;\r\n    height: 48px;\r\n    -webkit-align-content: center;\r\n    align-content: center;\r\n    -webkit-align-items: center;\r\n    align-items: center;\r\n    -webkit-box-pack: start;\r\n    -webkit-justify-content: flex-start;\r\n    justify-content: flex-start;\r\n  }\r\n\r\n  #myuw-profile-nav #myuw-profile-nav-user {\r\n    font-weight: 600;\r\n    text-transform: capitalize;\r\n    background-color: rgb(255,255,255);\r\n    border-bottom: none;\r\n  }\r\n\r\n  #myuw-profile-nav #myuw-profile-nav-user:hover {\r\n    background-color: rgb(255,255,255);\r\n  }\r\n\r\n  ::slotted(a:hover),\r\n  ::slotted(a:focus),\r\n  ::slotted(p:hover),\r\n  ::slotted(p:focus)  {\r\n    background-color: #ececec;\r\n  }\r\n\r\n  ::slotted(a:focus),\r\n  ::slotted(p:focus) {\r\n    outline: -webkit-focus-ring-color auto 5px;\r\n    z-index: 1;\r\n  }\r\n\r\n  #myuw-profile-nav a:hover,\r\n  #myuw-profile-nav a:focus,\r\n  #myuw-profile-nav p:hover,\r\n  #myuw-profile-nav p:focus {\r\n    background-color: #ececec;\r\n  }\r\n\r\n  #myuw-profile-backdrop {\r\n    display: block;\r\n    height: 100%;\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    z-index: 99;\r\n  }\r\n\r\n  /* Don\'t let `display` styles override hidden attribute */\r\n  [hidden] {\r\n    display: none !important;\r\n  }\r\n\r\n  body.modal-open {\r\n    overflow: hidden;\r\n    position: fixed;\r\n  } </style> <a href="#" id="myuw-profile-login" hidden>Login</a> <div id="myuw-profile-backdrop" hidden></div> <div id="myuw-profile-wrapper" 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" hidden> <p id="myuw-profile-nav-user"></p> <li role="menuitem"> <slot name="nav-item"></slot> </li> <li> <a id="myuw-profile-logout" href="#" role="menuitem">Logout</a> </li> </ul> </div> '),this._template}}]),n(o,[{key:"getFocusableElements",value:function(){var e=this.contentSlotElement.assignedElements({flatten:!0}).reduce(function(e,n){return n.setAttribute("role","menuitem"),n.matches("a[href]")?e.push(n):n.querySelectorAll("a[href]").forEach(function(n){return e.push(n)}),e},[]);return e.push.apply(e,[this.$logout,this.$button]),e}},{key:"attributeChangedCallback",value:function(e,n,r){switch(e){case"login-url":this.$login.setAttribute("href",r);break;case"logout-url":this.$logout.setAttribute("href",r);break;case"background-color":this.$circle.style.backgroundColor=r}}},{key:"connectedCallback",value:function(){this.eventListeners.forEach(function(e){var n=e.target,r=e.type,t=e.handler;return n.addEventListener(r,t)})}},{key:"disconnectedCallback",value:function(){this.eventListeners.forEach(function(e){var n=e.target,r=e.type,t=e.handler;return n.removeEventListener(r,t)})}},{key:"handleButtonClick",value:function(e){e.stopPropagation(),this.toggleMenu()}},{key:"handleKeydown",value:function(e){switch(e.key){default:return;case"Escape":case"Tab":this.closeMenu();break;case"ArrowDown":this.focusNext();break;case"ArrowUp":this.focusPrevious()}e.stopPropagation()}},{key:"focusNext",value:function(){var e=this.getFocusableElements(),n=this.isSameNode(document.activeElement)?this.shadowRoot.activeElement:document.activeElement,r=e.indexOf(n);r===e.length-1||-1===r?e[0].focus():e[r+1].focus()}},{key:"focusPrevious",value:function(){var e=this.getFocusableElements(),n=this.isSameNode(document.activeElement)?this.shadowRoot.activeElement:document.activeElement,r=e.indexOf(n);0===r||-1===r?e[e.length-1].focus():e[r-1].focus()}},{key:"handleLogin",value:function(e){if(e&&e.detail&&e.detail.person){var n=e.detail.person;if(!n.firstName)return this.$displayName.hidden=!0,this.$circle.innerHTML='<i class="material-icons">person</i>',void this.showProfileBubble();this.$displayName.textContent=n.firstName,this.$displayName.hidden=!1,this.$circle.textContent=n.firstName.substring(0,1),this.showProfileBubble()}else this.showLoginButton()}},{key:"handleNavClick",value:function(e){e.stopPropagation()}},{key:"handleWindowClick",value:function(e){this.closeMenu()}},{key:"openMenu",value:function(){this.$nav.hidden=!1,this.$backdrop.hidden=!1,this.$nav.focus(),this.$button.setAttribute("aria-expanded","true"),document.body.classList.add("modal-open")}},{key:"closeMenu",value:function(){this.$nav.hidden=!0,this.$backdrop.hidden=!0,this.$nav.blur(),this.$button.setAttribute("aria-expanded","false"),document.body.classList.remove("modal-open")}},{key:"toggleMenu",value:function(){this.$nav.hidden?this.openMenu():this.closeMenu()}},{key:"showLoginButton",value:function(){this.$login.hidden=!1,this.$wrapper.hidden=!0}},{key:"showProfileBubble",value:function(){this.$login.hidden=!0,this.$wrapper.hidden=!1}}]),o})();void 0===customElements.get(l.elementName)&&customElements.define(l.elementName,l)})();
+!(function(){"use strict";function e(e,n){for(var r=0;r<n.length;r++){var t=n[r];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}function n(n,r,t){return r&&e(n.prototype,r),t&&e(n,t),n}function r(e){return(r=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function t(e,n){return(t=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e})(e,n)}function o(e,n,r){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(e){return!1}})()?Reflect.construct:function(e,n,r){var o=[null];o.push.apply(o,n);var i=new(Function.bind.apply(e,o));return r&&t(i,r.prototype),i}).apply(null,arguments)}function i(e){var n="function"==typeof Map?new Map:void 0;return(i=function(e){if(null===e||(i=e,-1===Function.toString.call(i).indexOf("[native code]")))return e;var i;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(e))return n.get(e);n.set(e,a)}function a(){return o(e,arguments,r(this).constructor)}return a.prototype=Object.create(e.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),t(a,e)})(e)}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var l=(function(e){function o(){var e,n,t;return(function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")})(this,o),n=this,t=r(o).call(this),(e=!t||"object"!=typeof t&&"function"!=typeof t?a(n):t).attachShadow({mode:"open"}),e.shadowRoot.appendChild(e.constructor.template.content.cloneNode(!0)),e.$login=e.shadowRoot.getElementById("myuw-profile-login"),e.$logout=e.shadowRoot.getElementById("myuw-profile-logout"),e.$backdrop=e.shadowRoot.getElementById("myuw-profile-backdrop"),e.$button=e.shadowRoot.getElementById("myuw-profile-circle"),e.$circle=e.shadowRoot.getElementById("myuw-profile-circle-initial"),e.$nav=e.shadowRoot.getElementById("myuw-profile-nav"),e.$displayName=e.shadowRoot.getElementById("myuw-profile-nav-user"),e.$wrapper=e.shadowRoot.getElementById("myuw-profile-wrapper"),e.contentSlotElement=e.shadowRoot.querySelector("slot[name=nav-item]"),e.eventListeners=[{target:document,type:"myuw-login",handler:function(n){return e.handleLogin(n)}},{target:e.$button,type:"click",handler:function(n){return e.handleButtonClick(n)}},{target:e.$nav,type:"click",handler:function(n){return e.handleNavClick(n)}},{target:a(e),type:"keydown",handler:function(n){return e.handleKeydown(n)}},{target:window,type:"click",handler:function(n){return e.handleWindowClick(n)}}],e.getFocusableElements(),e}return(function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),n&&t(e,n)})(o,i(HTMLElement)),n(o,null,[{key:"elementName",get:function(){return"myuw-profile"}},{key:"observedAttributes",get:function(){return["login-url","logout-url","background-color"]}},{key:"template",get:function(){return void 0===this._template&&(this._template=document.createElement("template"),this._template.innerHTML='<style> @import url(https://fonts.googleapis.com/icon?family=Material+Icons);\r\n\r\n  #myuw-profile-login {\r\n    font-family: var( --myuw-profile-font, var(--myuw-font, \'Montserrat\', \'Roboto\', Arial, sans-serif) );\r\n    text-transform: uppercase;\r\n    text-decoration: none;\r\n    color: var( --myuw-profile-login-color, var(--myuw-primary-color, white) );\r\n    padding: 10px 13px;\r\n    font-weight: var(--myuw-profile-font-weight, 600);\r\n    letter-spacing: 0px;\r\n    font-size: 14px;\r\n    position: relative;\r\n    display: inline-block;\r\n    transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);\r\n  }\r\n\r\n  #myuw-profile-circle {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    align-content: center;\r\n    align-self: center;\r\n    border-radius: 50%;\r\n    height: 42px;\r\n    width: 42px;\r\n    min-width: initial;\r\n    text-transform: uppercase;\r\n    text-align: center;\r\n    background: transparent;\r\n    border-color: transparent;\r\n    transition: background .25s cubic-bezier(0.0, 0.0, 0.2, 1);\r\n  }\r\n\r\n  #myuw-profile-circle:hover,\r\n  #myuw-profile-login:hover {\r\n    cursor: pointer;\r\n    background: rgba(0, 0, 0, 0.2);\r\n  }\r\n\r\n  #myuw-profile-circle:focus,\r\n  #myuw-profile-nav a:focus,\r\n  #myuw-profile-nav p:focus {\r\n    outline: -webkit-focus-ring-color auto 5px;\r\n  }\r\n\r\n  #myuw-profile-circle-initial {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    align-content: center;\r\n    align-self: center;\r\n    padding: 0;\r\n    margin: 0;\r\n    font-weight: var(--myuw-profile-font-weight, 300);\r\n    font-size: 18px;\r\n    font-family: var( --myuw-profile-font, var(--myuw-font, \'Roboto\', Arial, sans-serif) );\r\n    background-color: var( --myuw-profile-background-color, #fb686d);\r\n    user-select: none;\r\n    color: white;\r\n    text-transform: capitalize;\r\n    border-radius: 50%;\r\n    margin: 0;\r\n    overflow: hidden;\r\n    position: relative;\r\n    height: 34px;\r\n    width: 34px;\r\n    min-width: 34px;\r\n    font-size: 18px;\r\n  }\r\n\r\n  #myuw-profile-wrapper {\r\n    position: relative;\r\n    display: inline-block;\r\n    margin: 0 6px;\r\n  }\r\n\r\n  #myuw-profile-nav {\r\n    position: absolute;\r\n    top: 45px;\r\n    right: 0;\r\n    min-width: 230px;\r\n    color: black;\r\n    list-style: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    font-size: 14px;\r\n    z-index: 101;\r\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);\r\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);\r\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);\r\n    transform: scale(1);\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n\r\n  #myuw-profile-nav[hidden] {\r\n    display: unset !important;\r\n    transform-origin: top right;\r\n    transform: scale(0);\r\n    opacity: 0;\r\n    visibility: hidden;\r\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);\r\n  }\r\n\r\n  #myuw-profile-nav p {\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n\r\n  ::slotted(a),\r\n  ::slotted(p) {\r\n    transition: all .3s ease;\r\n    position: relative;\r\n    font-size: 15px;\r\n    font-family: var( --myuw-profile-font, var(--myuw-font, \'Montserrat\', \'Roboto\', Arial, sans-serif) );\r\n    padding: 3px 16px;\r\n    color: var(--myuw-menu-color, rgba(0,0,0,0.87));\r\n    text-decoration: none;\r\n    background-color: #f5f5f5;\r\n    border-bottom: 1px solid #e5e5e5;\r\n    user-select: none;\r\n    display: flex;\r\n    -webkit-box-orient: horizontal;\r\n    -webkit-box-direction: normal;\r\n    -webkit-flex-direction: row;\r\n    flex-direction: row;\r\n    min-height: 48px;\r\n    height: 48px;\r\n    -webkit-align-content: center;\r\n    align-content: center;\r\n    -webkit-align-items: center;\r\n    align-items: center;\r\n    -webkit-box-pack: start;\r\n    -webkit-justify-content: flex-start;\r\n    justify-content: flex-start;\r\n  }\r\n\r\n  /*\r\n     Styles need to be duplicated separate from ::slotted in order for\r\n     Firefox to do it\'s job\r\n   */\r\n  #myuw-profile-nav a,\r\n  #myuw-profile-nav p {\r\n    transition: all .3s ease;\r\n    position: relative;\r\n    font-size: 15px;\r\n    font-family: var( --myuw-profile-font, var(--myuw-font, \'Montserrat\', \'Roboto\', Arial, sans-serif) );\r\n    padding: 3px 16px;\r\n    color: var(--myuw-menu-color, rgba(0,0,0,0.87));\r\n    text-decoration: none;\r\n    background-color: #f5f5f5;\r\n    border-bottom: 1px solid #e5e5e5;\r\n    user-select: none;\r\n    display: flex;\r\n    -webkit-box-orient: horizontal;\r\n    -webkit-box-direction: normal;\r\n    -webkit-flex-direction: row;\r\n    flex-direction: row;\r\n    min-height: 48px;\r\n    height: 48px;\r\n    -webkit-align-content: center;\r\n    align-content: center;\r\n    -webkit-align-items: center;\r\n    align-items: center;\r\n    -webkit-box-pack: start;\r\n    -webkit-justify-content: flex-start;\r\n    justify-content: flex-start;\r\n  }\r\n\r\n  #myuw-profile-nav #myuw-profile-nav-user {\r\n    font-weight: 600;\r\n    text-transform: capitalize;\r\n    background-color: rgb(255,255,255);\r\n    border-bottom: none;\r\n  }\r\n\r\n  #myuw-profile-nav #myuw-profile-nav-user:hover {\r\n    background-color: rgb(255,255,255);\r\n  }\r\n\r\n  ::slotted(a:hover),\r\n  ::slotted(a:focus),\r\n  ::slotted(p:hover),\r\n  ::slotted(p:focus)  {\r\n    background-color: #ececec;\r\n  }\r\n\r\n  ::slotted(a:focus),\r\n  ::slotted(p:focus) {\r\n    outline: -webkit-focus-ring-color auto 5px;\r\n    z-index: 1;\r\n  }\r\n\r\n  #myuw-profile-nav a:hover,\r\n  #myuw-profile-nav a:focus,\r\n  #myuw-profile-nav p:hover,\r\n  #myuw-profile-nav p:focus {\r\n    background-color: #ececec;\r\n  }\r\n\r\n  #myuw-profile-backdrop {\r\n    display: block;\r\n    height: 100%;\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    z-index: 99;\r\n  }\r\n\r\n  /* Don\'t let `display` styles override hidden attribute */\r\n  [hidden] {\r\n    display: none !important;\r\n  }\r\n\r\n  body.modal-open {\r\n    overflow: hidden;\r\n    position: fixed;\r\n  } </style> <a href="#" id="myuw-profile-login" hidden>Login</a> <div id="myuw-profile-backdrop" hidden></div> <div id="myuw-profile-wrapper" 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" hidden> <p id="myuw-profile-nav-user"></p> <li role="menuitem"> <slot name="nav-item"></slot> </li> <li> <a id="myuw-profile-logout" href="#" role="menuitem">Logout</a> </li> </ul> </div> '),this._template}}]),n(o,[{key:"getFocusableElements",value:function(){var e=this.contentSlotElement.assignedElements({flatten:!0}).reduce(function(e,n){return n.setAttribute("role","menuitem"),n.matches("a[href]")?e.push(n):n.querySelectorAll("a[href]").forEach(function(n){return e.push(n)}),e},[]);return e.push.apply(e,[this.$logout,this.$button]),e}},{key:"attributeChangedCallback",value:function(e,n,r){switch(e){case"login-url":this.$login.setAttribute("href",r);break;case"logout-url":this.$logout.setAttribute("href",r);break;case"background-color":this.$circle.style.backgroundColor=r}}},{key:"connectedCallback",value:function(){this.eventListeners.forEach(function(e){var n=e.target,r=e.type,t=e.handler;return n.addEventListener(r,t)})}},{key:"disconnectedCallback",value:function(){this.eventListeners.forEach(function(e){var n=e.target,r=e.type,t=e.handler;return n.removeEventListener(r,t)})}},{key:"handleButtonClick",value:function(e){e.stopPropagation(),this.toggleMenu()}},{key:"handleKeydown",value:function(e){switch(e.key){default:return;case"Escape":case"Tab":this.closeMenu();break;case"ArrowDown":this.focusNext();break;case"ArrowUp":this.focusPrevious()}e.stopPropagation()}},{key:"focusNext",value:function(){var e=this.getFocusableElements(),n=this.isSameNode(document.activeElement)?this.shadowRoot.activeElement:document.activeElement,r=e.indexOf(n);r===e.length-1||-1===r?e[0].focus():e[r+1].focus()}},{key:"focusPrevious",value:function(){var e=this.getFocusableElements(),n=this.isSameNode(document.activeElement)?this.shadowRoot.activeElement:document.activeElement,r=e.indexOf(n);0===r||-1===r?e[e.length-1].focus():e[r-1].focus()}},{key:"handleLogin",value:function(e){if(e&&e.detail&&e.detail.person){var n=e.detail.person;if(!n.firstName)return this.$displayName.hidden=!0,this.$circle.innerHTML='<i class="material-icons">person</i>',void this.showProfileBubble();this.$displayName.textContent=n.firstName,this.$displayName.hidden=!1,this.$circle.textContent=n.firstName.substring(0,1),this.showProfileBubble()}else this.showLoginButton()}},{key:"handleNavClick",value:function(e){e.stopPropagation()}},{key:"handleWindowClick",value:function(e){this.closeMenu()}},{key:"openMenu",value:function(){this.$nav.hidden=!1,this.$backdrop.hidden=!1,this.$nav.focus(),this.$button.setAttribute("aria-expanded","true"),document.body.classList.add("modal-open")}},{key:"closeMenu",value:function(){this.$nav.hidden=!0,this.$backdrop.hidden=!0,this.$nav.blur(),this.$button.setAttribute("aria-expanded","false"),document.body.classList.remove("modal-open")}},{key:"toggleMenu",value:function(){this.$nav.hidden?this.openMenu():this.closeMenu()}},{key:"showLoginButton",value:function(){this.$login.hidden=!1,this.$wrapper.hidden=!0}},{key:"showProfileBubble",value:function(){this.$login.hidden=!0,this.$wrapper.hidden=!1}}]),o})();void 0===customElements.get(l.elementName)&&customElements.define(l.elementName,l)})();

package.json

 {
   "name": "@myuw-web-components/myuw-profile",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "description": "Web component that provides an avatar button and profile menu",
@@ -5,0 +5,0 @@ "module": "dist/myuw-profile.min.mjs",

README.md

@@ -9,6 +9,6 @@ # myuw-profile
 <!-- import the module -->
-<script type="module" src="https://cdn.my.wisc.edu/@myuw-web-components/myuw-profile@latest/myuw-profile.min.mjs"></script>
+<script type="module" src="https://unpkg.com/@myuw-web-components/myuw-profile@latest?module"></script>
 
 <!-- fallback for browsers without ES2015 module support -->
-<script nomodule src="https://cdn.my.wisc.edu/@myuw-web-components/myuw-profile@latest/myuw-profile.min.js"></script>
+<script nomodule src="https://unpkg.com/@myuw-web-components/myuw-profile@latest"></script>
 
@@ -90,4 +90,9 @@ <!-- initialize -->
 
-
 Cross-browser testing provided by:<br/>
 <a href="https://www.browserstack.com/"><img width="160" src="https://myuw-web-components.github.io/img/Browserstack-logo.svg" alt="BrowserStack"/></a>
+
+### Releasing
+
+Update version using [npm version](https://docs.npmjs.com/cli/version) with appropriate selection: `patch, minor, or major`.
+Deploy npm package to the world using `npm publish` (if you don't have publish rights contact authors).
+Push git changes to the github via `git push origin master`.

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

79102

increased by0.64%

Number of lines in readme file

97

increased by5.43%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes