Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@myuw-web-components/myuw-profile

Package Overview
Dependencies
Maintainers
8
Versions
20
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 1.6.6 to 1.6.7

2

dist/myuw-profile.js

@@ -378,3 +378,3 @@ (function () {

if (!person.firstName || !person.lastName) {
if (!person.firstName && !person.lastName) {
this.$displayName.hidden = true;

@@ -381,0 +381,0 @@ this.$circle.innerHTML = '<i class="material-icons">person</i>';

2

dist/myuw-profile.min.js

@@ -1,1 +0,1 @@

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

2

package.json
{
"name": "@myuw-web-components/myuw-profile",
"version": "1.6.6",
"version": "1.6.7",
"description": "Web component that provides an avatar button and profile menu",

@@ -5,0 +5,0 @@ "module": "dist/myuw-profile.min.mjs",

dist/myuw-profile.min.mjs

Sorry, the diff of this file is not supported yet

dist/myuw-profile.mjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc