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

Comparing version 1.3.1 to 1.3.2

CHANGELOG.md

 # myuw-profile versions
 
+## 1.3.2
+
+### Fixed 
+
+* Check for valid references before messing with DOM elements/variables
+
 ## 1.3.0
@@ -4,0 +10,0 @@

dist/myuw-profile.js

@@ -168,6 +168,8 @@ (function () {
       value: function attributeChangedCallback(name, oldValue, newValue) {
-        // Update the attribute internally
-        this[name] = newValue; // Update the component with new att value
+        if (typeof this.$circle !== 'undefined' && typeof this[name] !== 'undefined' && this[name] !== null) {
+          // Update the attribute internally
+          this[name] = newValue; // Update the component with new att value
 
-        this.updateAttribute(name);
+          this.updateAttribute(name);
+        }
       }
@@ -174,0 +176,0 @@ }, {

dist/myuw-profile.min.js

@@ -1,1 +0,1 @@
-!(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)})();
+!(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){void 0!==this.$circle&&void 0!==this[n]&&null!==this[n]&&(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.1",
+  "version": "1.3.2",
   "description": "Web component that provides an avatar button and profile menu",
@@ -10,3 +10,3 @@ "module": "dist/myuw-profile.min.mjs",
     "watch": "rollup -c -w",
-    "serve": "live-server",
+    "serve": "live-server --port=4200",
     "start": "run-p watch serve",
@@ -13,0 +13,0 @@ "prepare": "npm run build",

README.md

@@ -83,1 +83,5 @@ # myuw-profile
 For more information about CSS variables and how they work with MyUW Web Components, [reference the styles component](https://github.com/myuw-web-components/myuw-app-styles "reference the styles component")
+
+
+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>

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

67973

increased by0.99%

Lines of code

586

increased by0.69%

Number of lines in readme file

87

increased by4.82%

No dependency changes