@cpelements/pfe-navigation-account
Advanced tools
Comparing version 1.0.10 to 1.0.11
@@ -1,3 +0,3 @@ | ||
import PFElement from '../../pfelement/dist/pfelement.js'; | ||
import '../../pfe-avatar/dist/pfe-avatar.js'; | ||
import PFElement from '../../../@patternfly/pfelement/dist/pfelement.js'; | ||
import '../../../@patternfly/pfe-avatar/dist/pfe-avatar.js'; | ||
@@ -8,3 +8,3 @@ /*! | ||
* Copyright 2020 Red Hat, Inc. | ||
* | ||
* | ||
* Permission is hereby granted, free of charge, to any person obtaining a copy | ||
@@ -16,6 +16,6 @@ * of this software and associated documentation files (the "Software"), to deal | ||
* furnished to do so, subject to the following conditions: | ||
* | ||
* | ||
* The above copyright notice and this permission notice shall be included in | ||
* all copies or substantial portions of the Software. | ||
* | ||
* | ||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
@@ -28,3 +28,3 @@ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
* SOFTWARE. | ||
* | ||
* | ||
*/ | ||
@@ -31,0 +31,0 @@ |
@@ -1,2 +0,2 @@ | ||
import a from"../../pfelement/dist/pfelement.min.js";import"../../pfe-avatar/dist/pfe-avatar.min.js"; | ||
import a from"../../../@patternfly/pfelement/dist/pfelement.min.js";import"../../../@patternfly/pfe-avatar/dist/pfe-avatar.min.js"; | ||
/*! | ||
@@ -6,3 +6,3 @@ * PatternFly Elements: PfeNavigationAccount 1.0.4 | ||
* Copyright 2020 Red Hat, Inc. | ||
* | ||
* | ||
* Permission is hereby granted, free of charge, to any person obtaining a copy | ||
@@ -14,6 +14,6 @@ * of this software and associated documentation files (the "Software"), to deal | ||
* furnished to do so, subject to the following conditions: | ||
* | ||
* | ||
* The above copyright notice and this permission notice shall be included in | ||
* all copies or substantial portions of the Software. | ||
* | ||
* | ||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
@@ -26,5 +26,5 @@ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
* SOFTWARE. | ||
* | ||
* | ||
*/ | ||
class t extends a{static get version(){return"1.0.4"}get html(){return'\n<style>.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.element-invisible,.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host{display:block}:host([hidden]){display:none}.pfe-navigation__dropdown{display:block;width:calc(100% + 32px);max-width:1136px;max-width:var(--pfe-navigation--content-max-width,1136px);margin-left:-16px;margin-right:-16px;padding-top:12px;padding-bottom:12px;-webkit-column-count:auto;-moz-column-count:auto;column-count:auto;gap:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0;margin-left:auto;margin-right:auto;padding:24px;font-size:16px;color:#151515;color:var(--pfe-navigation__dropdown--Color,#151515);background:#fff;background:var(--pfe-navigation__dropdown--Background,var(--pfe-theme--color--surface--lightest,#fff))}@media (min-width:768px){.pfe-navigation__dropdown{display:-ms-grid;display:grid;-ms-grid-columns:minmax(0,1fr) var(--pfe-navigation--gutter,32px) minmax(0,1fr);grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;gap:0 var(--pfe-navigation--gutter,32px);grid-auto-flow:row;-webkit-column-count:auto;-moz-column-count:auto;column-count:auto;padding:24px 64px}}@media (min-width:1200px){.pfe-navigation__dropdown{-ms-grid-columns:minmax(0,1fr) var(--pfe-navigation--gutter,32px) minmax(0,1fr) var(--pfe-navigation--gutter,32px) minmax(0,1fr);grid-template-columns:repeat(3,minmax(0,1fr));padding:48px 32px;gap:0 32px;gap:0 var(--pfe-navigation--gutter,32px)}}:host(.pfe-navigation--collapse-secondary-links) .pfe-navigation__dropdown{display:block;width:calc(100% + 32px);max-width:1136px;max-width:var(--pfe-navigation--content-max-width,1136px);margin-left:-16px;margin-right:-16px;padding-top:12px;padding-bottom:12px;-webkit-column-count:auto;-moz-column-count:auto;column-count:auto;gap:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:24px;gap:0}.pfe-navigation__dropdown[class]{width:auto}.pfe-navigation__dropdown li,.pfe-navigation__dropdown ul{margin:0;padding:0;list-style:none}.pfe-navigation__dropdown .pfe-link-list--header,.pfe-navigation__dropdown [role=heading][aria-heading-level],.pfe-navigation__dropdown h2,.pfe-navigation__dropdown h3,.pfe-navigation__dropdown h4,.pfe-navigation__dropdown h5,.pfe-navigation__dropdown h6{margin:0 0 .75em;padding:0;-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;font-size:18px;font-weight:400;color:#464646;color:var(--pfe-navigation__dropdown--headings--Color,#464646)}.pfe-navigation__dropdown .pfe-link-list--header a,.pfe-navigation__dropdown [role=heading][aria-heading-level] a,.pfe-navigation__dropdown h2 a,.pfe-navigation__dropdown h3 a,.pfe-navigation__dropdown h4 a,.pfe-navigation__dropdown h5 a,.pfe-navigation__dropdown h6 a{margin:0 -12px;padding:0 12px;color:#464646;color:var(--pfe-navigation__dropdown--headings--Color,#464646);border:1px solid transparent}.pfe-navigation__dropdown .pfe-link-list--header a:focus,.pfe-navigation__dropdown .pfe-link-list--header a:hover,.pfe-navigation__dropdown [role=heading][aria-heading-level] a:focus,.pfe-navigation__dropdown [role=heading][aria-heading-level] a:hover,.pfe-navigation__dropdown h2 a:focus,.pfe-navigation__dropdown h2 a:hover,.pfe-navigation__dropdown h3 a:focus,.pfe-navigation__dropdown h3 a:hover,.pfe-navigation__dropdown h4 a:focus,.pfe-navigation__dropdown h4 a:hover,.pfe-navigation__dropdown h5 a:focus,.pfe-navigation__dropdown h5 a:hover,.pfe-navigation__dropdown h6 a:focus,.pfe-navigation__dropdown h6 a:hover{text-decoration:underline;color:#036;color:var(--pfe-navigation__dropdown--link--Color--hover,#036)}.pfe-navigation__dropdown .pfe-link-list--header a:focus,.pfe-navigation__dropdown [role=heading][aria-heading-level] a:focus,.pfe-navigation__dropdown h2 a:focus,.pfe-navigation__dropdown h3 a:focus,.pfe-navigation__dropdown h4 a:focus,.pfe-navigation__dropdown h5 a:focus,.pfe-navigation__dropdown h6 a:focus{border:1px dashed currentColor;border-top:1px dashed currentColor;outline:0}.pfe-navigation__dropdown li{margin:0 0 16px;-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}.pfe-navigation__dropdown li a{display:inline-block;margin:0 -12px;padding:0 12px;color:#06c;color:var(--pfe-navigation__dropdown--link--Color,#06c);border:1px solid transparent}.pfe-navigation__dropdown li a:focus,.pfe-navigation__dropdown li a:hover{color:#036;color:var(--pfe-navigation__dropdown--link--Color--hover,#036);text-decoration:underline}.pfe-navigation__dropdown li a:focus{border:1px dashed currentColor;border-top:1px dashed currentColor;outline:0}.pfe-navigation__dropdown [role=heading][aria-heading-level]+ul,.pfe-navigation__dropdown ul+h2,.pfe-navigation__dropdown ul+h3,.pfe-navigation__dropdown ul+h4,.pfe-navigation__dropdown ul+h5,.pfe-navigation__dropdown ul+h6{margin-top:32px;margin-top:var(--pfe-navigation--gutter,32px)}.pfe-navigation__dropdown a,.pfe-navigation__dropdown pfe-card,.pfe-navigation__dropdown pfe-cta{-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}.pfe-navigation__dropdown pfe-cta{margin-top:32px;margin-top:var(--pfe-navigation--gutter,32px)}.pfe-navigation__dropdown pfe-card pfe-cta{margin-top:0}.pfe-navigation__dropdown pfe-card pfe-cta+pfe-cta{margin-top:16px}.user-info[class]{-webkit-box-ordinal-group:-9;-webkit-order:-10;-ms-flex-order:-10;order:-10;position:relative;min-height:64px;margin-bottom:24px;padding-left:76px;font-size:18px}@media (min-width:768px){.user-info[class]{-ms-grid-column:1;-ms-grid-column-span:2;grid-column:1/3;margin-bottom:32px}}:host(.pfe-navigation--collapse-secondary-links) .user-info[class]{margin-bottom:24px}.user-info[class] pfe-avatar{position:absolute;top:0;left:0;width:64px;height:64px;border-radius:50%;overflow:hidden;background:rgba(122,122,122,.2)}.user-info[class] .user-info__edit-avatar{font-size:16px;text-decoration:none;color:#06c;color:var(--pfe-navigation__dropdown--link--Color,#06c)}.user-info[class] .user-info__edit-avatar:focus,.user-info[class] .user-info__edit-avatar:hover{color:#036;color:var(--pfe-navigation__dropdown--link--Color--hover,#036)}.account-links{-ms-grid-row:2;grid-row:2;-ms-grid-column:1;-ms-grid-column-span:2;grid-column:1/3;font-size:14px}@media (min-width:768px){.account-links{display:-ms-grid;display:grid;-ms-grid-columns:minmax(0,1fr) var(--pfe-navigation--gutter,32px) minmax(0,1fr);grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;gap:var(--pfe-navigation--gutter,32px);grid-auto-flow:row}}:host(.pfe-navigation--collapse-secondary-links) .account-links{display:block}.account-links li{margin-bottom:.57143em;max-width:19.28571em}@media (min-width:768px){.account-links li{margin-bottom:1.5em}}:host(.pfe-navigation--collapse-secondary-links) .account-links li{margin-bottom:.57143em}.account-links[class] a{text-decoration:none}.account-links[class] a:focus,.account-links[class] a:hover{color:#036;color:var(--pfe-navigation__dropdown--link--Color--hover,#036);text-decoration:none}.account-links .account-link__title[class]{font-size:1.14286em;color:#06c;color:var(--pfe-navigation__dropdown--link--Color,#06c)}@media (min-width:768px){.account-links .account-link__title[class]{margin-bottom:8px}}:host(.pfe-navigation--collapse-secondary-links) .account-links .account-link__title[class]{margin-bottom:0}.account-links a:focus .account-link__title,.account-links a:hover .account-link__title{text-decoration:underline}.account-links .account-link__description{display:none;color:#6a6e73;color:var(--pfe-navigation__dropdown--Color--secondary,#6a6e73)}@media (min-width:768px){.account-links .account-link__description{display:block}}:host(.pfe-navigation--collapse-secondary-links) .account-links .account-link__description{display:none}@media (min-width:768px){.account-metadata{-ms-grid-row:1;-ms-grid-row-span:2;grid-row:1/span 2}}.account-metadata--mobile{-webkit-box-ordinal-group:-4;-webkit-order:-5;-ms-flex-order:-5;order:-5;display:block;margin-bottom:24px}@media (min-width:768px){.account-metadata--mobile{display:none}}:host(.pfe-navigation--collapse-secondary-links) .account-metadata--mobile{display:block}.account-metadata__account-number,.account-metadata__email,.account-metadata__login-name,.account-metadata__org-admin,.account-metadata__organization{display:none}@media (min-width:768px){.account-metadata__account-number,.account-metadata__email,.account-metadata__login-name,.account-metadata__org-admin,.account-metadata__organization{display:block}}:host(.pfe-navigation--collapse-secondary-links) .account-metadata__account-number,:host(.pfe-navigation--collapse-secondary-links) .account-metadata__email,:host(.pfe-navigation--collapse-secondary-links) .account-metadata__login-name,:host(.pfe-navigation--collapse-secondary-links) .account-metadata__org-admin,:host(.pfe-navigation--collapse-secondary-links) .account-metadata__organization{display:none}.account-metadata--mobile .account-metadata__account-number,.account-metadata--mobile .account-metadata__email,.account-metadata--mobile .account-metadata__login-name,.account-metadata--mobile .account-metadata__org-admin,.account-metadata--mobile .account-metadata__organization{display:block}.account-metadata__login-name[class]{font-size:16px;margin-bottom:1.5em}.account-metadata--org-admin .account-metadata__login-name[class]{margin-bottom:.5em}.account-metadata__account-number[class],.account-metadata__org-admin[class],.account-metadata__organization[class]{font-size:14px;color:#6a6e73;color:var(--pfe-navigation__dropdown--Color--secondary,#6a6e73)}.account-metadata__org-admin{margin-bottom:1.71429em}.account-metadata__email[class]{margin-top:1.5em}.account-metadata__logout-wrapper{margin-top:3em;padding:3em 0 24px;border-top:1px solid #d2d2d2}.account-metadata__logout-wrapper[class] a{padding:.375em 1em;color:#fff;color:var(--pfe-navigation__dropdown--Color--on-highlight,#fff);background:#e00;background:var(--pfe-navigation__dropdown--highlight-color,#e00);text-decoration:none;border-radius:3px} /*# sourceMappingURL=pfe-navigation-account.min.css.map */</style>\n<div id="wrapper">\n</div>'}static get tag(){return"pfe-navigation-account"}static get meta(){return{title:"Navigation account",description:"Be awesome."}}get templateUrl(){return"pfe-navigation-account.html"}get styleUrl(){return"pfe-navigation-account.scss"}static get PfeType(){return a.PfeTypes.Content}static get slots(){return{}}constructor(){super(t,{type:t.PfeType}),this._userData=null,this._avatars=[],this._updateAvatarSrc=this._updateAvatarSrc.bind(this),this._createAccountDropdown=this._createAccountDropdown.bind(this),this._processUserInfo=this._processUserInfo.bind(this);const a=document.querySelector("body");a.addEventListener("user-ready",this._processUserInfo),a.addEventListener("user-update",this._processUserInfo)}connectedCallback(){if(super.connectedCallback(),null===this._userData){const a=document.querySelector("cpx-user");(a&&a.hasAttribute("ready")||"object"==typeof a.user&&a.email)&&this._processUserInfo({target:a})}}disconnectedCallback(){const a=document.querySelector("body");a.removeEventListener("user-ready",this._processUserInfo),a.removeEventListener("user-update",this._processUserInfo)}attributeChangedCallback(a,t,e){super.attributeChangedCallback(a,t,e)}_createPfeAvatar(a,t){let e="";void 0===this.hasSlot&&(e="pfe-");const o=document.createElement("pfe-avatar");return o.setAttribute(`${e}name`,a),o.setAttribute(`${e}shape`,"circle"),"string"==typeof t&&o.setAttribute(`${e}src`,t),o}_getFullName(a){if("string"==typeof a.fullName)return a.fullName;let t="";return"string"==typeof a.firstName&&(t=a.firstName),"string"==typeof a.lastName&&(t=t.length?`${t} ${a.lastName}`:a.lastName),t.length||this.error("Couldn't get full name"),this.setAttribute("full-name",t),t}_updateAvatarSrc(a){if(null===this._userData||"string"==typeof this._userData.REDHAT_LOGIN&&a!==this._userData.REDHAT_LOGIN){let t="//access.redhat.com/api/users/avatar/";(document.domain.includes("access.")||document.domain.includes(".foo."))&&(t="/api/users/avatar/"),fetch(`${t}${a}`).then(a=>{if("object"==typeof a&&"number"==typeof a.status&&200===a.status&&"string"==typeof a.url&&!a.url.includes("blank.png")){this.setAttribute("avatar-url",a.url);for(let t=0;t<this._avatars.length;t++)this._avatars[t].setAttribute("src",a.url)}}).catch(a=>console.error(a))}}_createPfeIcon(a){let t="";void 0===this.hasSlot&&(t="pfe-");const e=document.createElement("pfe-icon");return e.setAttribute("icon",a),e.setAttribute(`${t}size`,"sm"),e.setAttribute("aria-hidden","true"),e}_createAccountMenuToggle(a){const t=this.shadowRoot.querySelector(".pfe-navigation__log-in-link"),e=document.createElement("button");e.classList.add("pfe-navigation__log-in-link","pfe-navigation__log-in-link--logged-in"),e.setAttribute("aria-label","Open user menu");const o=this._createPfeAvatar(a);return e.append(o),e.id="account__toggle",t.replaceWith(e),this._avatars.push(o),e}_createAccountDropdown(a){const t=document.createElement("div");t.id="wrapper",t.classList.add("pfe-navigation__dropdown");const e=document.createElement("h3"),o=this._getFullName(a),n=this._createPfeAvatar(o);e.classList.add("user-info"),this._avatars.push(n),n.classList.add("user-info__avatar");const i=document.createElement("div");i.classList.add("user-info__full-name"),i.innerText=o;const r=document.createElement("a");r.setAttribute("href","https://access.redhat.com/user/edit"),r.classList.add("user-info__edit-avatar"),r.innerText="Edit avatar",r.prepend(this._createPfeIcon("web-caret-right")),e.append(n),e.append(i),e.append(r);const d=[[{text:"Account details",url:"https://www.redhat.com/wapps/ugc/protected/personalInfo.html",description:"Edit your contact info, password, location preferences, and errata notifications."},{text:"Community profile",url:"https://access.redhat.com/user",description:"Fill out your public profile and control what content you follow."},{text:"Training & certification",url:"https://rol.redhat.com/rol/app/",description:"Access your Red Hat Learning Subscription, courses, and exams."}],[{text:"Subscriptions",url:"https://access.redhat.com/management",description:"Manage your subscriptions.",requiresRole:"portal_manage_subscriptions"},{text:"Account team",url:"https://access.redhat.com/account-team",description:"Get help from your Red Hat account team."},{text:"User management",url:"https://www.redhat.com/wapps/ugc/protected/usermgt/userList.html",description:"Manage users in your organization.",requiresRole:"admin:org:all"},{text:"Support",url:"https://access.redhat.com/support/cases/#/troubleshoot/",description:"Get support for your Red Hat products."}]],c=document.createElement("div");c.classList.add("account-links"),c.setAttribute("aria-label","Account managemement links");for(let t=0;t<d.length;t++){const e=d[t],o=document.createElement("ul");o.classList.add("account-links__column");for(let t=0;t<e.length;t++){const n=e[t],i=document.createElement("li"),r=document.createElement("a");let d=!0;void 0!==n.requiresRole&&(a.realm_access.roles.includes(n.requiresRole)||(d=!1)),d&&(r.setAttribute("href",n.url),r.innerHTML=`\n <div class="account-link__title">\n ${n.text}\n </div>`,n.description&&(r.innerHTML=`${r.innerHTML}\n <div class="account-link__description">\n ${n.description}\n </div>`),i.append(r),o.append(i))}c.append(o)}const s=document.createElement("div");s.classList.add("account-metadata");const l=document.createElement("h3");l.classList.add("account-metadata__login-name"),l.innerText=`Login: ${a.REDHAT_LOGIN}`;const p=document.createElement("div");p.classList.add("account-metadata__account-number"),p.innerText=`Account number: ${a.account_number}`;const u=document.createElement("div");u.classList.add("account-metadata__email"),u.innerText=a.email;const m=document.createElement("div");m.classList.add("account-metadata__logout-wrapper");const g=document.createElement("a");if(this.hasAttribute("logout-link")?g.setAttribute("href",this.getAttribute("logout-link")):this.error("Couldn't get logout link"),g.hasAttribute("href")&&(g.innerText="Log out",m.append(g)),s.append(l),a.realm_access.roles.includes("admin:org:all")){const a=document.createElement("div");a.classList.add("account-metadata__org-admin"),a.innerText="Organization administrator",s.classList.add("account-metadata--org-admin"),s.append(a)}s.append(p),s.append(u);const _=s.cloneNode(!0);return _.classList.add("account-metadata--mobile"),s.append(m),t.append(e),t.append(_),t.append(c),t.append(s),this.shadowRoot.getElementById("wrapper").replaceWith(t),t}_processUserInfo(a){const t=a.target.user;"object"==typeof t&&(t.fullName=this._getFullName(t),this.getAttribute("full-name")!==t.fullName&&this.setAttribute("full-name",t.fullName),null===this._userData&&this._createAccountDropdown(t)),"string"==typeof t.REDHAT_LOGIN?this._updateAvatarSrc(t.REDHAT_LOGIN):this.error("Could not find Redhat Login"),this._userData=t}}a.create(t);export default t; | ||
//# sourceMappingURL=pfe-navigation-account.min.js.map |
(function (global, factory) { | ||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../../pfelement/dist/pfelement.umd'), require('../../pfe-avatar/dist/pfe-avatar.umd')) : | ||
typeof define === 'function' && define.amd ? define(['../../pfelement/dist/pfelement.umd', '../../pfe-avatar/dist/pfe-avatar.umd'], factory) : | ||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../../../@patternfly/pfelement/dist/pfelement.umd'), require('../../../@patternfly/pfe-avatar/dist/pfe-avatar.umd')) : | ||
typeof define === 'function' && define.amd ? define(['../../../@patternfly/pfelement/dist/pfelement.umd', '../../../@patternfly/pfe-avatar/dist/pfe-avatar.umd'], factory) : | ||
(global.PfeNavigationAccount = factory(global.PFElement,global.PfeAvatar)); | ||
@@ -93,3 +93,3 @@ }(this, (function (PFElement,pfeAvatar_umd) { 'use strict'; | ||
* Copyright 2020 Red Hat, Inc. | ||
* | ||
* | ||
* Permission is hereby granted, free of charge, to any person obtaining a copy | ||
@@ -101,6 +101,6 @@ * of this software and associated documentation files (the "Software"), to deal | ||
* furnished to do so, subject to the following conditions: | ||
* | ||
* | ||
* The above copyright notice and this permission notice shall be included in | ||
* all copies or substantial portions of the Software. | ||
* | ||
* | ||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
@@ -113,3 +113,3 @@ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
* SOFTWARE. | ||
* | ||
* | ||
*/ | ||
@@ -116,0 +116,0 @@ |
@@ -81,3 +81,3 @@ { | ||
"unpkg": "./dist/pfe-navigation-account.umd.min.js", | ||
"version": "1.0.10" | ||
"version": "1.0.11" | ||
} |
252884