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

Comparing version 1.6.8 to 1.6.9

dist/myuw-profile.js

@@ -141,3 +141,3 @@ (function () {
 
-  var template = "<style> @import url(https://fonts.googleapis.com/icon?family=Material+Icons);\n\n  #myuw-profile-login {\n    font-family: var( --myuw-profile-font, var(--myuw-font, '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: 16px;\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-circle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    align-content: center;\n    align-self: center;\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.2);\n  }\n\n  #myuw-profile-circle:focus,\n  #myuw-profile-nav a:focus,\n  #myuw-profile-nav p:focus {\n    outline: -webkit-focus-ring-color auto 5px;\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-nav {\n    position: absolute;\n    top: 45px;\n    right: 0;\n    min-width: 230px;\n    color: black;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    font-size: 16px;\n    z-index: 101;\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    transform: scale(1);\n    opacity: 1;\n    visibility: visible;\n  }\n\n  #myuw-profile-nav[hidden] {\n    display: unset !important;\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\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: 16px;\n    font-family: var( --myuw-profile-font, var(--myuw-font, '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    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: 16px;\n    font-family: var( --myuw-profile-font, var(--myuw-font, '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    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: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  ::slotted(a:focus),\n  ::slotted(p:focus) {\n    outline: -webkit-focus-ring-color auto 5px;\n    z-index: 1;\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  }\n\n  #myuw-profile-backdrop {\n    display: block;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: 99;\n  }\n\n  /* Don't let `display` styles override hidden attribute */\n  [hidden] {\n    display: none !important;\n  }\n\n  body.modal-open {\n    overflow: hidden;\n    position: fixed;\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);\n\n  #myuw-profile-login {\n    font-family: var( --myuw-profile-font, var(--myuw-font, Red Hat Display, 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: 16px;\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-circle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    align-content: center;\n    align-self: center;\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.2);\n  }\n\n  #myuw-profile-circle:focus,\n  #myuw-profile-nav a:focus,\n  #myuw-profile-nav p:focus {\n    outline: -webkit-focus-ring-color auto 5px;\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, Red Hat Display, 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-nav {\n    position: absolute;\n    top: 45px;\n    right: 0;\n    min-width: 230px;\n    color: black;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    font-size: 16px;\n    z-index: 101;\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    transform: scale(1);\n    opacity: 1;\n    visibility: visible;\n  }\n\n  #myuw-profile-nav[hidden] {\n    display: unset !important;\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\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: 16px;\n    font-family: var( --myuw-profile-font, var(--myuw-font, Red Hat Display, 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    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: 16px;\n    font-family: var( --myuw-profile-font, var(--myuw-font, Red Hat Display, 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    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: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  ::slotted(a:focus),\n  ::slotted(p:focus) {\n    outline: -webkit-focus-ring-color auto 5px;\n    z-index: 1;\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  }\n\n  #myuw-profile-backdrop {\n    display: block;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: 99;\n  }\n\n  /* Don't let `display` styles override hidden attribute */\n  [hidden] {\n    display: none !important;\n  }\n\n  body.modal-open {\n    overflow: hidden;\n    position: fixed;\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 t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function n(n,t,o){return t&&e(n.prototype,t),o&&e(n,o),n}function t(e){return(t=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function o(e,n){return(o=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e})(e,n)}function i(e,n,t){return(i=(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,t){var i=[null];i.push.apply(i,n);var r=new(Function.bind.apply(e,i));return t&&o(r,t.prototype),r}).apply(null,arguments)}function r(e){var n="function"==typeof Map?new Map:void 0;return(r=function(e){if(null===e||(r=e,-1===Function.toString.call(r).indexOf("[native code]")))return e;var r;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 i(e,arguments,t(this).constructor)}return a.prototype=Object.create(e.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),o(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 i(){var e,n,o;return(function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")})(this,i),n=this,o=t(i).call(this),(e=!o||"object"!=typeof o&&"function"!=typeof o?a(n):o).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&&o(e,n)})(i,r(HTMLElement)),n(i,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);\n\n  #myuw-profile-login {\n    font-family: var( --myuw-profile-font, var(--myuw-font, \'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: 16px;\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-circle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    align-content: center;\n    align-self: center;\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.2);\n  }\n\n  #myuw-profile-circle:focus,\n  #myuw-profile-nav a:focus,\n  #myuw-profile-nav p:focus {\n    outline: -webkit-focus-ring-color auto 5px;\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-nav {\n    position: absolute;\n    top: 45px;\n    right: 0;\n    min-width: 230px;\n    color: black;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    font-size: 16px;\n    z-index: 101;\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    transform: scale(1);\n    opacity: 1;\n    visibility: visible;\n  }\n\n  #myuw-profile-nav[hidden] {\n    display: unset !important;\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\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: 16px;\n    font-family: var( --myuw-profile-font, var(--myuw-font, \'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    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: 16px;\n    font-family: var( --myuw-profile-font, var(--myuw-font, \'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    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: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  ::slotted(a:focus),\n  ::slotted(p:focus) {\n    outline: -webkit-focus-ring-color auto 5px;\n    z-index: 1;\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  }\n\n  #myuw-profile-backdrop {\n    display: block;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: 99;\n  }\n\n  /* Don\'t let `display` styles override hidden attribute */\n  [hidden] {\n    display: none !important;\n  }\n\n  body.modal-open {\n    overflow: hidden;\n    position: fixed;\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(i,[{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,t){switch(e){case"login-url":this.$login.setAttribute("href",t);break;case"logout-url":this.$logout.setAttribute("href",t);break;case"background-color":this.$circle.style.backgroundColor=t}}},{key:"connectedCallback",value:function(){this.eventListeners.forEach(function(e){var n=e.target,t=e.type,o=e.handler;return n.addEventListener(t,o)})}},{key:"disconnectedCallback",value:function(){this.eventListeners.forEach(function(e){var n=e.target,t=e.type,o=e.handler;return n.removeEventListener(t,o)})}},{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,t=e.indexOf(n);t===e.length-1||-1===t?e[0].focus():e[t+1].focus()}},{key:"focusPrevious",value:function(){var e=this.getFocusableElements(),n=this.isSameNode(document.activeElement)?this.shadowRoot.activeElement:document.activeElement,t=e.indexOf(n);0===t||-1===t?e[e.length-1].focus():e[t-1].focus()}},{key:"handleLogin",value:function(e){if(e&&e.detail&&e.detail.person){var n=e.detail.person;if(!n.firstName&&!n.lastName)return this.$displayName.hidden=!0,this.$circle.innerHTML='<i class="material-icons">person</i>',void this.showProfileBubble();this.$displayName.textContent=n.firstName+" "+n.lastName,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}}]),i})();void 0===customElements.get(l.elementName)&&customElements.define(l.elementName,l)})();
+!(function(){"use strict";function e(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function n(n,t,o){return t&&e(n.prototype,t),o&&e(n,o),n}function t(e){return(t=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function o(e,n){return(o=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e})(e,n)}function i(e,n,t){return(i=(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,t){var i=[null];i.push.apply(i,n);var r=new(Function.bind.apply(e,i));return t&&o(r,t.prototype),r}).apply(null,arguments)}function r(e){var n="function"==typeof Map?new Map:void 0;return(r=function(e){if(null===e||(r=e,-1===Function.toString.call(r).indexOf("[native code]")))return e;var r;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 i(e,arguments,t(this).constructor)}return a.prototype=Object.create(e.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),o(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 i(){var e,n,o;return(function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")})(this,i),n=this,o=t(i).call(this),(e=!o||"object"!=typeof o&&"function"!=typeof o?a(n):o).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&&o(e,n)})(i,r(HTMLElement)),n(i,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);\n\n  #myuw-profile-login {\n    font-family: var( --myuw-profile-font, var(--myuw-font, Red Hat Display, 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: 16px;\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-circle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    align-content: center;\n    align-self: center;\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.2);\n  }\n\n  #myuw-profile-circle:focus,\n  #myuw-profile-nav a:focus,\n  #myuw-profile-nav p:focus {\n    outline: -webkit-focus-ring-color auto 5px;\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, Red Hat Display, 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-nav {\n    position: absolute;\n    top: 45px;\n    right: 0;\n    min-width: 230px;\n    color: black;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    font-size: 16px;\n    z-index: 101;\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    transform: scale(1);\n    opacity: 1;\n    visibility: visible;\n  }\n\n  #myuw-profile-nav[hidden] {\n    display: unset !important;\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\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: 16px;\n    font-family: var( --myuw-profile-font, var(--myuw-font, Red Hat Display, 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    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: 16px;\n    font-family: var( --myuw-profile-font, var(--myuw-font, Red Hat Display, 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    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: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  ::slotted(a:focus),\n  ::slotted(p:focus) {\n    outline: -webkit-focus-ring-color auto 5px;\n    z-index: 1;\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  }\n\n  #myuw-profile-backdrop {\n    display: block;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: 99;\n  }\n\n  /* Don\'t let `display` styles override hidden attribute */\n  [hidden] {\n    display: none !important;\n  }\n\n  body.modal-open {\n    overflow: hidden;\n    position: fixed;\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(i,[{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,t){switch(e){case"login-url":this.$login.setAttribute("href",t);break;case"logout-url":this.$logout.setAttribute("href",t);break;case"background-color":this.$circle.style.backgroundColor=t}}},{key:"connectedCallback",value:function(){this.eventListeners.forEach(function(e){var n=e.target,t=e.type,o=e.handler;return n.addEventListener(t,o)})}},{key:"disconnectedCallback",value:function(){this.eventListeners.forEach(function(e){var n=e.target,t=e.type,o=e.handler;return n.removeEventListener(t,o)})}},{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,t=e.indexOf(n);t===e.length-1||-1===t?e[0].focus():e[t+1].focus()}},{key:"focusPrevious",value:function(){var e=this.getFocusableElements(),n=this.isSameNode(document.activeElement)?this.shadowRoot.activeElement:document.activeElement,t=e.indexOf(n);0===t||-1===t?e[e.length-1].focus():e[t-1].focus()}},{key:"handleLogin",value:function(e){if(e&&e.detail&&e.detail.person){var n=e.detail.person;if(!n.firstName&&!n.lastName)return this.$displayName.hidden=!0,this.$circle.innerHTML='<i class="material-icons">person</i>',void this.showProfileBubble();this.$displayName.textContent=n.firstName+" "+n.lastName,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}}]),i})();void 0===customElements.get(l.elementName)&&customElements.define(l.elementName,l)})();

package.json

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

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

Worsened metrics

Total package byte prevSize

74748

decreased by-0.02%

No dependency changes