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

Comparing version 1.2.0 to 1.2.1

CHANGELOG.md

 # myuw-profile versions
 
-## 1.2.0
+## 1.2.1
 
@@ -9,2 +9,4 @@ ### Changed
 * Removed left-only margin to better support usage outside of myuw-app-bar
-* Add use of a CSS variable for menu link color (myuw-menu-color)
+* Add use of a CSS variable for menu link color (myuw-menu-color)
+* Adjust circle button appearance to be centered better
+* Add font weight CSS variable

dist/myuw-profile.js

 (function () {
     'use strict';
 
-    var tpl = "<style> :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: bold;\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: inline-block;\n    outline: none;\n    border-radius: 50%;\n    height: 42px;\n    width: 42px;\n    min-width: initial;\n    padding: 4px;\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    padding: 0;\n    margin: 0;\n    font-weight: 500;\n    font-size: 18px;\n    font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', '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    display: block;\n    margin: 0;\n    overflow: hidden;\n    position: relative;\n    height: 33px;\n    width: 33px;\n    line-height: 33px;\n    font-size: 18px;\n    font-weight: 400;\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.open-right {\n    left: 0;\n    right: inherit;\n    transform-origin: top left;\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#myuw-profile-nav a,\n#myuw-profile-nav p,\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#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#myuw-profile-nav a:hover,\n#myuw-profile-nav a:focus,\n#myuw-profile-nav p:hover,\n#myuw-profile-nav p:focus,\n::slotted(a:hover),\n::slotted(a:focus),\n::slotted(p:hover),\n::slotted(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\">B</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> ";
+    var tpl = "<style> :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    outline: none;\n    border-radius: 50%;\n    height: 42px;\n    width: 42px;\n    min-width: initial;\n    padding: 4px;\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    padding: 0;\n    margin: 0;\n    font-weight: var(--myuw-profile-font-weight, 400);\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    display: block;\n    margin: 0;\n    overflow: hidden;\n    position: relative;\n    height: 34px;\n    width: 34px;\n    line-height: 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.open-right {\n    left: 0;\n    right: inherit;\n    transform-origin: top left;\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#myuw-profile-nav a,\n#myuw-profile-nav p,\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#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#myuw-profile-nav a:hover,\n#myuw-profile-nav a:focus,\n#myuw-profile-nav p:hover,\n#myuw-profile-nav p:focus,\n::slotted(a:hover),\n::slotted(a:focus),\n::slotted(p:hover),\n::slotted(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\">B</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> ";
 
@@ -6,0 +6,0 @@ class MyUWProfile extends HTMLElement {

dist/myuw-profile.min.js

@@ -1,1 +0,1 @@
-!(function(){"use strict";class n extends HTMLElement{constructor(){super(),this["open-right"]=!1,this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(n.template.content.cloneNode(!0))}static get observedAttributes(){return["login-url","logout-url","open-right","background-color"]}attributeChangedCallback(n,e,t){this[n]=t,this.updateAttribute(n)}connectedCallback(){if(this["login-url"]=this.getAttribute("login-url"),this["logout-url"]=this.getAttribute("logout-url"),this["session-endpoint"]=this.getAttribute("session-endpoint"),this["background-color"]=this.getAttribute("background-color"),this.user=!1,null!==this.getAttribute("open-right")&&(this["open-right"]=!0),!this["session-endpoint"])throw Error('No session endpoint has been defiend. Please set the "session-endpoint" attribute URL into the myuw-profile element!');fetch(this["session-endpoint"]).then(n=>{200===n.status?n.json().then(n=>{n.person&&(this.user=n.person,this.componentReady())}):this.componentReady()}).catch(n=>{console.log(n),this.componentReady()}),window.addEventListener("click",n=>{let e=this.shadowRoot.getElementById("myuw-profile-nav");e.classList.contains("visible")&&(e.classList.remove("visible"),this.shadowRoot.getElementById("myuw-profile-circle").setAttribute("aria-expanded","false"))}),this.shadowRoot.getElementById("myuw-profile-nav").addEventListener("click",n=>{n.stopPropagation()}),this.shadowRoot.getElementById("myuw-profile-circle").addEventListener("click",n=>{let e=this.shadowRoot.getElementById("myuw-profile-nav"),t=this.shadowRoot.getElementById("myuw-profile-circle");n.stopPropagation(),e.classList.toggle("visible"),e.classList.contains("visible")?(e.focus(),t.setAttribute("aria-expanded","true")):(e.blur(),t.setAttribute("aria-expanded","false"))}),this.updateAttribute("login-url"),this.updateAttribute("logout-url"),this.updateAttribute("session-endpoint"),this.updateAttribute("open-right"),this.updateAttribute("background-color")}updateAttribute(n){switch(n){case"login-url":this.shadowRoot.getElementById("myuw-profile-login").setAttribute("href",this["login-url"]);break;case"logout-url":this.shadowRoot.getElementById("myuw-profile-logout").setAttribute("href",this["logout-url"]);break;case"open-right":this["open-right"]&&this.shadowRoot.getElementById("myuw-profile-nav").classList.add("open-right");break;case"background-color":this.shadowRoot.getElementById("myuw-profile-circle-initial").style.backgroundColor=this["background-color"]}}componentReady(){this.user?(this.shadowRoot.getElementById("myuw-profile-nav-user").innerHTML=this.user.firstName,this.shadowRoot.getElementById("myuw-profile-circle-initial").innerHTML=this.user.firstName.substring(0,1),this.showProfileBubble()):null!==this["login-url"]?this.showLoginButton():this.hidden=!0}showLoginButton(){this.shadowRoot.getElementById("myuw-profile-login").classList.remove("hidden"),this.shadowRoot.getElementById("myuw-profile-wrapper").classList.add("hidden")}showProfileBubble(){this.shadowRoot.getElementById("myuw-profile-login").classList.add("hidden"),this.shadowRoot.getElementById("myuw-profile-wrapper").classList.remove("hidden")}}n.template=(function(n){const e=document.createElement("template");return e.innerHTML=n,e})('<style> :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: bold;\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: inline-block;\n    outline: none;\n    border-radius: 50%;\n    height: 42px;\n    width: 42px;\n    min-width: initial;\n    padding: 4px;\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    padding: 0;\n    margin: 0;\n    font-weight: 500;\n    font-size: 18px;\n    font-family: var( --myuw-profile-font, var(--myuw-font, \'Montserrat\', \'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    display: block;\n    margin: 0;\n    overflow: hidden;\n    position: relative;\n    height: 33px;\n    width: 33px;\n    line-height: 33px;\n    font-size: 18px;\n    font-weight: 400;\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.open-right {\n    left: 0;\n    right: inherit;\n    transform-origin: top left;\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#myuw-profile-nav a,\n#myuw-profile-nav p,\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#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#myuw-profile-nav a:hover,\n#myuw-profile-nav a:focus,\n#myuw-profile-nav p:hover,\n#myuw-profile-nav p:focus,\n::slotted(a:hover),\n::slotted(a:focus),\n::slotted(p:hover),\n::slotted(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">B</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> '),window.customElements.define("myuw-profile",n)})();
+!(function(){"use strict";class n extends HTMLElement{constructor(){super(),this["open-right"]=!1,this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(n.template.content.cloneNode(!0))}static get observedAttributes(){return["login-url","logout-url","open-right","background-color"]}attributeChangedCallback(n,e,t){this[n]=t,this.updateAttribute(n)}connectedCallback(){if(this["login-url"]=this.getAttribute("login-url"),this["logout-url"]=this.getAttribute("logout-url"),this["session-endpoint"]=this.getAttribute("session-endpoint"),this["background-color"]=this.getAttribute("background-color"),this.user=!1,null!==this.getAttribute("open-right")&&(this["open-right"]=!0),!this["session-endpoint"])throw Error('No session endpoint has been defiend. Please set the "session-endpoint" attribute URL into the myuw-profile element!');fetch(this["session-endpoint"]).then(n=>{200===n.status?n.json().then(n=>{n.person&&(this.user=n.person,this.componentReady())}):this.componentReady()}).catch(n=>{console.log(n),this.componentReady()}),window.addEventListener("click",n=>{let e=this.shadowRoot.getElementById("myuw-profile-nav");e.classList.contains("visible")&&(e.classList.remove("visible"),this.shadowRoot.getElementById("myuw-profile-circle").setAttribute("aria-expanded","false"))}),this.shadowRoot.getElementById("myuw-profile-nav").addEventListener("click",n=>{n.stopPropagation()}),this.shadowRoot.getElementById("myuw-profile-circle").addEventListener("click",n=>{let e=this.shadowRoot.getElementById("myuw-profile-nav"),t=this.shadowRoot.getElementById("myuw-profile-circle");n.stopPropagation(),e.classList.toggle("visible"),e.classList.contains("visible")?(e.focus(),t.setAttribute("aria-expanded","true")):(e.blur(),t.setAttribute("aria-expanded","false"))}),this.updateAttribute("login-url"),this.updateAttribute("logout-url"),this.updateAttribute("session-endpoint"),this.updateAttribute("open-right"),this.updateAttribute("background-color")}updateAttribute(n){switch(n){case"login-url":this.shadowRoot.getElementById("myuw-profile-login").setAttribute("href",this["login-url"]);break;case"logout-url":this.shadowRoot.getElementById("myuw-profile-logout").setAttribute("href",this["logout-url"]);break;case"open-right":this["open-right"]&&this.shadowRoot.getElementById("myuw-profile-nav").classList.add("open-right");break;case"background-color":this.shadowRoot.getElementById("myuw-profile-circle-initial").style.backgroundColor=this["background-color"]}}componentReady(){this.user?(this.shadowRoot.getElementById("myuw-profile-nav-user").innerHTML=this.user.firstName,this.shadowRoot.getElementById("myuw-profile-circle-initial").innerHTML=this.user.firstName.substring(0,1),this.showProfileBubble()):null!==this["login-url"]?this.showLoginButton():this.hidden=!0}showLoginButton(){this.shadowRoot.getElementById("myuw-profile-login").classList.remove("hidden"),this.shadowRoot.getElementById("myuw-profile-wrapper").classList.add("hidden")}showProfileBubble(){this.shadowRoot.getElementById("myuw-profile-login").classList.add("hidden"),this.shadowRoot.getElementById("myuw-profile-wrapper").classList.remove("hidden")}}n.template=(function(n){const e=document.createElement("template");return e.innerHTML=n,e})('<style> :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    outline: none;\n    border-radius: 50%;\n    height: 42px;\n    width: 42px;\n    min-width: initial;\n    padding: 4px;\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    padding: 0;\n    margin: 0;\n    font-weight: var(--myuw-profile-font-weight, 400);\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    display: block;\n    margin: 0;\n    overflow: hidden;\n    position: relative;\n    height: 34px;\n    width: 34px;\n    line-height: 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.open-right {\n    left: 0;\n    right: inherit;\n    transform-origin: top left;\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#myuw-profile-nav a,\n#myuw-profile-nav p,\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#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#myuw-profile-nav a:hover,\n#myuw-profile-nav a:focus,\n#myuw-profile-nav p:hover,\n#myuw-profile-nav p:focus,\n::slotted(a:hover),\n::slotted(a:focus),\n::slotted(p:hover),\n::slotted(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">B</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> '),window.customElements.define("myuw-profile",n)})();

package.json

 {
   "name": "@myuw-web-components/myuw-profile",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "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

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

56120

increased by0.51%

Number of medium supply chain risk alerts

4

decreased by-20%

No dependency changes