@digital-realty/ix-account-switcher 1.1.25 → 1.1.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
import{LitElement,html,nothing,css}from"lit";import{__decorate}from"tslib";import"@digital-realty/ix-dialog/ix-dialog.js";import"@digital-realty/ix-field/ix-field.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-label-tag/ix-label-tag.js";import"@digital-realty/ix-select/ix-select.js";import"@digital-realty/ix-select/ix-select-option.js";import"@digital-realty/ix-tree/ix-tree.js";import{property,state}from"lit/decorators.js";import{makeAutoObservable}from"mobx";import{makePersistable,isHydrated,hydrateStore,clearPersistedStore,getPersistedStore}from"mobx-persist-store";let findAccountById=(t
|
|
1
|
+
import{LitElement,html,nothing,css}from"lit";import{__decorate}from"tslib";import"@digital-realty/ix-dialog/ix-dialog.js";import"@digital-realty/ix-field/ix-field.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-label-tag/ix-label-tag.js";import"@digital-realty/ix-select/ix-select.js";import"@digital-realty/ix-select/ix-select-option.js";import"@digital-realty/ix-tree/ix-tree.js";import{property,state}from"lit/decorators.js";import{makeAutoObservable}from"mobx";import{makePersistable,isHydrated,hydrateStore,clearPersistedStore,getPersistedStore}from"mobx-persist-store";let findAccountById=(e,t)=>{var i,r=e.find(e=>e.id===t);if(r)return r;for(i of e)if(i.subaccounts){var c=findAccountById(i.subaccounts,t);if(c)return c}return null},mapAccountToTreeNode=(e,t)=>{let i,r,c={expanded:!1,id:e.id,label:null!=(i=e.displayName)?i:e.name,parentId:t.id};return c.children=null==(r=e.subaccounts)?void 0:r.map(e=>mapAccountToTreeNode(e,c)),c},mapAccountsToTreeNode=e=>{let t={expanded:!1,id:"root",label:"",parentId:void 0};return t.children=e.map(e=>mapAccountToTreeNode(e,t)),t};class AuthedUserState{constructor(){this.account_number="",this.email="",this.name="",this.givenName="",this.familyName="",this.auth_time="",this.access_token="",this.id_token="",this.bearer="",this.account_hierarchy=void 0,makeAutoObservable(this),makePersistable(this,{name:"x-auth",properties:["email","account_number","name","givenName","familyName","auth_time","id_token","access_token","bearer","account_hierarchy"],storage:window.localStorage})}setAccount({accountNumber:e,email:t,name:i,givenName:r,familyName:c,authTime:o=(new Date).getTime().toString(),accessToken:s,idToken:a,bearer:n="Bearer"}){this.account_number=e,this.email=t,this.name=i,this.givenName=r,this.familyName=c,this.auth_time=o,this.access_token=s,this.id_token=a,this.bearer=n}getAccount(){return{accountNumber:this.account_number,email:this.email,name:this.name,givenName:this.givenName,familyName:this.familyName,authTime:this.auth_time}}getAccountNumber(){return this.account_number}getAccessToken(){return this.access_token}getBearer(){return this.bearer}getIdToken(){return this.id_token}setAccountHierarchy(e){this.account_hierarchy=e}getAccountHierarchy(){return this.account_hierarchy}get isHydrated(){return isHydrated(this)}async hydrateStore(){await hydrateStore(this)}async clearStoredDate(){await clearPersistedStore(this)}async getStoredData(){return getPersistedStore(this)}}let authedUser=new AuthedUserState,findAccountHierarchy=(e,c)=>{let o=(e,t)=>{var i,r;for(r of null!=e?e:[]){if(r.id===c)return r;if(0<(null!=(i=r.subaccounts)?i:[]).length)if(o(r.subaccounts))return r}return null};for(var t of e)if(o([t]))return t;return null},filters=["#","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];class IxAccountSwitcher extends LitElement{constructor(){super(...arguments),this.selectedAccountNumber="",this.accounts=[],this.disabled=!1,this.enableFilterDialog=!1,this.showDialog=!1,this.visibleAccounts=[],this.currentFilter="#",this.loading=!1,this.displayFilters=!1}updated(e){super.updated(e),e.has("accounts")&&(this.displayFilters=1e3<=this.accounts.length),(e.has("currentFilter")||e.has("accounts"))&&(authedUser.setAccountHierarchy(findAccountHierarchy(this.accounts,this.selectedAccountNumber)),this.filterVisibleAccounts())}filterVisibleAccounts(){this.loading=!0,this.displayFilters?this.visibleAccounts="#"===this.currentFilter?this.accounts.filter(e=>e.name.length&&!filters.includes(e.name[0].toUpperCase())):this.accounts.filter(e=>e.name.length&&e.name[0].toUpperCase().startsWith(this.currentFilter)):this.visibleAccounts=this.accounts,setTimeout(()=>{this.loading=!1},10)}renderTree(){return html`<ix-tree aria-label="Account Switcher" .rootNode="${mapAccountsToTreeNode(this.visibleAccounts)}" selectedNodeId="${this.selectedAccountNumber}" ?allowMultiline="${!0}" @on-tree-node-selected="${e=>{this.dispatchEvent(new CustomEvent("account-switched",{detail:e.detail.message.id,bubbles:!0,composed:!0})),this.showDialog=!1}}"></ix-tree>`}renderDialog(){return html`<ix-dialog id="account-switcher-dialog" ?open="${this.showDialog}" @closed="${()=>{this.showDialog=!1}}"><div class="headline" slot="headline"><span class="title">Switch Account</span><ix-icon-button @click="${()=>{this.showDialog=!1}}" icon="close"></ix-icon-button></div><form id="account-switcher-dialog-form" class="form" method="dialog" slot="content">${this.displayFilters?html`<div class="padded-container stick-to-top"><div>Filter accounts by:</div>${filters.map(t=>html`<span class="account-filter ${this.currentFilter===t?"active":""}" @click="${()=>{this.currentFilter=t}}" @keydown="${e=>{"Enter"!==e.key&&" "!==e.key||(this.currentFilter=t,e.preventDefault())}}">${t}</span>`)}</div>`:nothing} ${this.loading?html`<div class="padded-container">Loading...</div>`:this.renderTree()}</form></ix-dialog>`}getSelectedAccount(){return findAccountById(this.accounts,this.selectedAccountNumber)}renderNestedAccountStructureSelect(){var e,t=this.getSelectedAccount();return html`<ix-field ?disabled="${this.disabled}" @click="${()=>{this.disabled||(this.showDialog=!0)}}"><div class="subaccount-wrap"><span class="subaccount-name">${null!=(e=null==t?void 0:t.displayName)?e:null==t?void 0:t.name}</span><ix-icon class="dd-icon">arrow_drop_down</ix-icon></div></ix-field>`}renderFlatAccountStructureSelect(){let r=this.getSelectedAccount(),c=html`<ix-label-tag>Active</ix-label-tag>`;var e=this.accounts.map(e=>{var t,i=e.id===(null==r?void 0:r.id);return html`<ix-select-option value="${e.id}" .selected="${i}"><div slot="headline">${null!=(t=null==e?void 0:e.displayName)?t:e.name}</div><div slot="end">${i?c:nothing}</div></ix-select-option>`});return html`<div class="account-switcher__select"><ix-select ?disabled="${this.disabled}" @request-selection="${e=>{e=e.target;this.dispatchEvent(new CustomEvent("account-switched",{detail:e.value,bubbles:!0,composed:!0}))}}">${e}</ix-select></div>`}render(){var e=this.accounts.some(e=>e.subaccounts&&0<e.subaccounts.length);return html`<div class="account-switcher-container">${e||this.enableFilterDialog?this.renderNestedAccountStructureSelect():this.renderFlatAccountStructureSelect()}</div>${e||this.enableFilterDialog?this.renderDialog():null}`}}__decorate([property({type:String,reflect:!0})],IxAccountSwitcher.prototype,"selectedAccountNumber",void 0),__decorate([property({type:Array})],IxAccountSwitcher.prototype,"accounts",void 0),__decorate([property({type:Boolean})],IxAccountSwitcher.prototype,"disabled",void 0),__decorate([property({type:Boolean})],IxAccountSwitcher.prototype,"enableFilterDialog",void 0),__decorate([state()],IxAccountSwitcher.prototype,"showDialog",void 0),__decorate([state()],IxAccountSwitcher.prototype,"visibleAccounts",void 0),__decorate([state()],IxAccountSwitcher.prototype,"currentFilter",void 0),__decorate([state()],IxAccountSwitcher.prototype,"loading",void 0),__decorate([state()],IxAccountSwitcher.prototype,"displayFilters",void 0);let AccountSwitcherStyles=css`#account-switcher-dialog{position:relative;z-index:var(--ix-account-switcher-z-index,50)}.subaccount-wrap{display:flex;--ix-icon-font-size:1.6rem}.subaccount-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:0;flex:1}.dd-icon{margin:-2px -5px -5px 0}.headline{display:flex}.title{flex:1}.form{border:1px solid #e0e0e0;border-radius:.25rem;height:calc(488px - 3rem);margin:1rem 1.5rem 1.5rem 1.5rem;padding:0;width:calc(560px - 3rem);overflow:auto}.account-filter{cursor:pointer;padding:2px}.account-filter:hover{text-decoration:underline}.account-filter.active{text-decoration:underline;font-weight:700}.padded-container{padding:12px}.stick-to-top{position:sticky;top:0;background-color:#c8dffa;z-index:1}@media only screen and (max-width:600px){:host{--md-outlined-field-container-shape:0px}}`;class IxAccountSwitcherStyled extends IxAccountSwitcher{}IxAccountSwitcherStyled.styles=[AccountSwitcherStyles,css`:host{--md-theme-primary:var(--md-sys-color-primary, blue)}`],window.customElements.define("ix-account-switcher",IxAccountSwitcherStyled);export{IxAccountSwitcherStyled};
|
|
@@ -4,12 +4,14 @@ declare class AuthedUserState {
|
|
|
4
4
|
account_number: string;
|
|
5
5
|
email: string;
|
|
6
6
|
name: string;
|
|
7
|
+
givenName: string;
|
|
8
|
+
familyName: string;
|
|
7
9
|
auth_time: string;
|
|
8
10
|
access_token: string;
|
|
9
11
|
id_token: string;
|
|
10
12
|
bearer: string;
|
|
11
13
|
account_hierarchy?: NestedAccounts;
|
|
12
|
-
setAccount({ accountNumber, email, name, authTime, accessToken, idToken, bearer, }: Record<string, string>): void;
|
|
14
|
+
setAccount({ accountNumber, email, name, givenName, familyName, authTime, accessToken, idToken, bearer, }: Record<string, string>): void;
|
|
13
15
|
getAccount(): Record<string, string>;
|
|
14
16
|
getAccountNumber(): string;
|
|
15
17
|
getAccessToken(): string;
|
package/dist/state/authedUser.js
CHANGED
|
@@ -5,6 +5,8 @@ class AuthedUserState {
|
|
|
5
5
|
this.account_number = '';
|
|
6
6
|
this.email = '';
|
|
7
7
|
this.name = '';
|
|
8
|
+
this.givenName = '';
|
|
9
|
+
this.familyName = '';
|
|
8
10
|
this.auth_time = '';
|
|
9
11
|
this.access_token = '';
|
|
10
12
|
this.id_token = '';
|
|
@@ -17,6 +19,8 @@ class AuthedUserState {
|
|
|
17
19
|
'email',
|
|
18
20
|
'account_number',
|
|
19
21
|
'name',
|
|
22
|
+
'givenName',
|
|
23
|
+
'familyName',
|
|
20
24
|
'auth_time',
|
|
21
25
|
'id_token',
|
|
22
26
|
'access_token',
|
|
@@ -26,10 +30,12 @@ class AuthedUserState {
|
|
|
26
30
|
storage: window.localStorage,
|
|
27
31
|
});
|
|
28
32
|
}
|
|
29
|
-
setAccount({ accountNumber, email, name, authTime = new Date().getTime().toString(), accessToken, idToken, bearer = 'Bearer', }) {
|
|
33
|
+
setAccount({ accountNumber, email, name, givenName, familyName, authTime = new Date().getTime().toString(), accessToken, idToken, bearer = 'Bearer', }) {
|
|
30
34
|
this.account_number = accountNumber;
|
|
31
35
|
this.email = email;
|
|
32
36
|
this.name = name;
|
|
37
|
+
this.givenName = givenName;
|
|
38
|
+
this.familyName = familyName;
|
|
33
39
|
this.auth_time = authTime;
|
|
34
40
|
this.access_token = accessToken;
|
|
35
41
|
this.id_token = idToken;
|
|
@@ -40,6 +46,8 @@ class AuthedUserState {
|
|
|
40
46
|
accountNumber: this.account_number,
|
|
41
47
|
email: this.email,
|
|
42
48
|
name: this.name,
|
|
49
|
+
givenName: this.givenName,
|
|
50
|
+
familyName: this.familyName,
|
|
43
51
|
authTime: this.auth_time,
|
|
44
52
|
};
|
|
45
53
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"authedUser.js","sourceRoot":"","sources":["../../src/state/authedUser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,MAAM,CAAC;AAC1C,OAAO,EACL,eAAe,EACf,UAAU,EACV,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAG5B,MAAM,eAAe;IACnB;
|
|
1
|
+
{"version":3,"file":"authedUser.js","sourceRoot":"","sources":["../../src/state/authedUser.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeAutoObservable } from 'mobx';\nimport {\n makePersistable,\n isHydrated,\n hydrateStore,\n clearPersistedStore,\n getPersistedStore,\n} from 'mobx-persist-store';\nimport { NestedAccounts } from '../types.js';\n\nclass AuthedUserState {\n constructor() {\n makeAutoObservable(this);\n makePersistable(this, {\n name: 'x-auth',\n properties: [\n 'email',\n 'account_number',\n 'name',\n 'givenName',\n 'familyName',\n 'auth_time',\n 'id_token',\n 'access_token',\n 'bearer',\n 'account_hierarchy',\n ],\n storage: window.localStorage,\n });\n }\n\n public account_number: string = '';\n\n public email: string = '';\n\n public name: string = '';\n\n public givenName: string = '';\n\n public familyName: string = '';\n\n public auth_time: string = '';\n\n public access_token: string = '';\n\n public id_token: string = '';\n\n public bearer: string = '';\n\n public account_hierarchy?: NestedAccounts = undefined;\n\n public setAccount({\n accountNumber,\n email,\n name,\n givenName,\n familyName,\n authTime = new Date().getTime().toString(),\n accessToken,\n idToken,\n bearer = 'Bearer',\n }: Record<string, string>) {\n this.account_number = accountNumber;\n this.email = email;\n this.name = name;\n this.givenName = givenName;\n this.familyName = familyName;\n this.auth_time = authTime;\n this.access_token = accessToken;\n this.id_token = idToken;\n this.bearer = bearer;\n }\n\n public getAccount(): Record<string, string> {\n return {\n accountNumber: this.account_number,\n email: this.email,\n name: this.name,\n givenName: this.givenName,\n familyName: this.familyName,\n authTime: this.auth_time,\n };\n }\n\n public getAccountNumber(): string {\n return this.account_number;\n }\n\n public getAccessToken(): string {\n return this.access_token;\n }\n\n public getBearer(): string {\n return this.bearer;\n }\n\n public getIdToken(): string {\n return this.id_token;\n }\n\n public setAccountHierarchy(accountHierarchy: any) {\n this.account_hierarchy = accountHierarchy;\n }\n\n public getAccountHierarchy() {\n return this.account_hierarchy;\n }\n\n get isHydrated() {\n return isHydrated(this);\n }\n\n async hydrateStore() {\n await hydrateStore(this);\n }\n\n async clearStoredDate() {\n await clearPersistedStore(this);\n }\n\n async getStoredData() {\n return getPersistedStore(this);\n }\n}\n\nexport const authedUser = new AuthedUserState();\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-account-switcher following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "1.1.
|
|
6
|
+
"version": "1.1.26",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -105,5 +105,5 @@
|
|
|
105
105
|
"README.md",
|
|
106
106
|
"LICENSE"
|
|
107
107
|
],
|
|
108
|
-
"gitHead": "
|
|
108
|
+
"gitHead": "50a949b6e8f6807b5db6ea0343bb8619259dbd63"
|
|
109
109
|
}
|