@digital-realty/ix-account-switcher 1.0.7 → 1.0.9

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.
@@ -10,6 +10,7 @@ import { MobxLitElement } from '@adobe/lit-mobx';
10
10
  import type { NestedAccounts } from './types.js';
11
11
  export declare class IxAccountSwitcher extends MobxLitElement {
12
12
  accounts: NestedAccounts[];
13
+ disabled: boolean;
13
14
  showDialog: boolean;
14
15
  private renderDialog;
15
16
  getSelectedAccount(): NestedAccounts | null;
@@ -16,6 +16,7 @@ export class IxAccountSwitcher extends MobxLitElement {
16
16
  constructor() {
17
17
  super(...arguments);
18
18
  this.accounts = [];
19
+ this.disabled = false;
19
20
  this.showDialog = false;
20
21
  }
21
22
  renderDialog() {
@@ -66,8 +67,11 @@ export class IxAccountSwitcher extends MobxLitElement {
66
67
  const selectedAccount = this.getSelectedAccount();
67
68
  return html `
68
69
  <ix-field
70
+ ?disabled=${this.disabled}
69
71
  @click=${() => {
70
- this.showDialog = true;
72
+ if (!this.disabled) {
73
+ this.showDialog = true;
74
+ }
71
75
  }}
72
76
  >
73
77
  <div class="subaccount-wrap">
@@ -89,6 +93,7 @@ export class IxAccountSwitcher extends MobxLitElement {
89
93
  });
90
94
  return html `<div class="account-switcher__select">
91
95
  <ix-select
96
+ ?disabled=${this.disabled}
92
97
  @request-selection=${(e) => {
93
98
  const target = e.target;
94
99
  this.dispatchEvent(new CustomEvent('account-switched', {
@@ -118,6 +123,9 @@ export class IxAccountSwitcher extends MobxLitElement {
118
123
  __decorate([
119
124
  property({ type: Array })
120
125
  ], IxAccountSwitcher.prototype, "accounts", void 0);
126
+ __decorate([
127
+ property({ type: Boolean })
128
+ ], IxAccountSwitcher.prototype, "disabled", void 0);
121
129
  __decorate([
122
130
  state()
123
131
  ], IxAccountSwitcher.prototype, "showDialog", void 0);
@@ -1 +1 @@
1
- {"version":3,"file":"IxAccountSwitcher.js","sourceRoot":"","sources":["../src/IxAccountSwitcher.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-dialog/ix-dialog.js';\nimport '@digital-realty/ix-field/ix-field.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-label-tag/ix-label-tag.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport '@digital-realty/ix-select/ix-select-option.js';\nimport '@digital-realty/ix-tree/ix-tree.js';\nimport type { IIxTreeNode } from '@digital-realty/ix-tree';\nimport { html, nothing, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { authedUser } from './state/authedUser.js';\nimport findAccountById from './utils/find-account-by-id.js';\nimport { mapAccountsToTreeNode } from './utils/map-accounts-to-tree.js';\nimport type { NestedAccounts } from './types.js';\n\nexport class IxAccountSwitcher extends MobxLitElement {\n @property({ type: Array }) accounts: NestedAccounts[] = [];\n\n @state() showDialog: boolean = false;\n\n private renderDialog(): TemplateResult<1> {\n const rootNode: IIxTreeNode = mapAccountsToTreeNode(this.accounts);\n\n return html`<ix-dialog\n id=\"account-switcher-dialog\"\n class=\"relative z-50\"\n ?open=${this.showDialog}\n @blur=${() => {\n this.showDialog = false;\n }}\n >\n <div class=\"headline\" slot=\"headline\">\n <span class=\"title\">Switch Account</span>\n <ix-icon-button\n @click=${() => {\n this.showDialog = false;\n }}\n icon=\"close\"\n >\n </ix-icon-button>\n </div>\n <form\n id=\"account-switcher-dialog-form\"\n class=\"form\"\n method=\"dialog\"\n slot=\"content\"\n >\n <ix-tree\n .rootNode=${rootNode}\n .selectedNodeId=${authedUser.account_number}\n @on-tree-node-selected=${(e: CustomEvent) => {\n this.showDialog = false;\n this.dispatchEvent(\n new CustomEvent('account-switched', {\n detail: e.detail.message.id,\n bubbles: true,\n composed: true,\n })\n );\n }}\n ></ix-tree>\n </form>\n </ix-dialog>`;\n }\n\n getSelectedAccount() {\n return findAccountById(this.accounts, authedUser.account_number as string);\n }\n\n private renderNestedAccountStructureSelect(): TemplateResult<1> {\n const selectedAccount = this.getSelectedAccount();\n\n return html`\n <ix-field\n @click=${() => {\n this.showDialog = true;\n }}\n >\n <div class=\"subaccount-wrap\">\n <span class=\"subaccount-name\"> ${selectedAccount?.name} </span>\n <ix-icon class=\"dd-icon\">arrow_drop_down</ix-icon>\n </div>\n </ix-field>\n `;\n }\n\n private renderFlatAccountStructureSelect(): TemplateResult<1> {\n const selectedAccount = this.getSelectedAccount();\n const activeLabelTag = html`<ix-label-tag>Active</ix-label-tag>`;\n\n const options = this.accounts.map(account => {\n const isSelected = account.id === selectedAccount?.id;\n\n return html`<ix-select-option value=${account.id} .selected=${isSelected}>\n <div slot=\"headline\">${account.name}</div>\n <div slot=\"end\">${isSelected ? activeLabelTag : nothing}</div>\n </ix-select-option>`;\n });\n\n return html`<div class=\"account-switcher__select\">\n <ix-select\n @request-selection=${(e: Event) => {\n const target = e.target as HTMLSelectElement;\n this.dispatchEvent(\n new CustomEvent('account-switched', {\n detail: target.value,\n bubbles: true,\n composed: true,\n })\n );\n }}\n >\n ${options}\n </ix-select>\n </div>`;\n }\n\n render(): TemplateResult<1> {\n const hasSubaccounts = this.accounts.some(\n a => a.subaccounts && a.subaccounts.length > 0\n );\n\n return html`\n <div class=\"account-switcher-container\">\n ${hasSubaccounts\n ? this.renderNestedAccountStructureSelect()\n : this.renderFlatAccountStructureSelect()}\n </div>\n\n ${hasSubaccounts ? this.renderDialog() : null}\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"IxAccountSwitcher.js","sourceRoot":"","sources":["../src/IxAccountSwitcher.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-dialog/ix-dialog.js';\nimport '@digital-realty/ix-field/ix-field.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-label-tag/ix-label-tag.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport '@digital-realty/ix-select/ix-select-option.js';\nimport '@digital-realty/ix-tree/ix-tree.js';\nimport type { IIxTreeNode } from '@digital-realty/ix-tree';\nimport { html, nothing, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { MobxLitElement } from '@adobe/lit-mobx';\nimport { authedUser } from './state/authedUser.js';\nimport findAccountById from './utils/find-account-by-id.js';\nimport { mapAccountsToTreeNode } from './utils/map-accounts-to-tree.js';\nimport type { NestedAccounts } from './types.js';\n\nexport class IxAccountSwitcher extends MobxLitElement {\n @property({ type: Array }) accounts: NestedAccounts[] = [];\n\n @property({ type: Boolean }) disabled: boolean = false;\n\n @state() showDialog: boolean = false;\n\n private renderDialog(): TemplateResult<1> {\n const rootNode: IIxTreeNode = mapAccountsToTreeNode(this.accounts);\n\n return html`<ix-dialog\n id=\"account-switcher-dialog\"\n class=\"relative z-50\"\n ?open=${this.showDialog}\n @blur=${() => {\n this.showDialog = false;\n }}\n >\n <div class=\"headline\" slot=\"headline\">\n <span class=\"title\">Switch Account</span>\n <ix-icon-button\n @click=${() => {\n this.showDialog = false;\n }}\n icon=\"close\"\n >\n </ix-icon-button>\n </div>\n <form\n id=\"account-switcher-dialog-form\"\n class=\"form\"\n method=\"dialog\"\n slot=\"content\"\n >\n <ix-tree\n .rootNode=${rootNode}\n .selectedNodeId=${authedUser.account_number}\n @on-tree-node-selected=${(e: CustomEvent) => {\n this.showDialog = false;\n this.dispatchEvent(\n new CustomEvent('account-switched', {\n detail: e.detail.message.id,\n bubbles: true,\n composed: true,\n })\n );\n }}\n ></ix-tree>\n </form>\n </ix-dialog>`;\n }\n\n getSelectedAccount() {\n return findAccountById(this.accounts, authedUser.account_number as string);\n }\n\n private renderNestedAccountStructureSelect(): TemplateResult<1> {\n const selectedAccount = this.getSelectedAccount();\n\n return html`\n <ix-field\n ?disabled=${this.disabled}\n @click=${() => {\n if (!this.disabled) {\n this.showDialog = true;\n }\n }}\n >\n <div class=\"subaccount-wrap\">\n <span class=\"subaccount-name\"> ${selectedAccount?.name} </span>\n <ix-icon class=\"dd-icon\">arrow_drop_down</ix-icon>\n </div>\n </ix-field>\n `;\n }\n\n private renderFlatAccountStructureSelect(): TemplateResult<1> {\n const selectedAccount = this.getSelectedAccount();\n const activeLabelTag = html`<ix-label-tag>Active</ix-label-tag>`;\n\n const options = this.accounts.map(account => {\n const isSelected = account.id === selectedAccount?.id;\n\n return html`<ix-select-option value=${account.id} .selected=${isSelected}>\n <div slot=\"headline\">${account.name}</div>\n <div slot=\"end\">${isSelected ? activeLabelTag : nothing}</div>\n </ix-select-option>`;\n });\n\n return html`<div class=\"account-switcher__select\">\n <ix-select\n ?disabled=${this.disabled}\n @request-selection=${(e: Event) => {\n const target = e.target as HTMLSelectElement;\n this.dispatchEvent(\n new CustomEvent('account-switched', {\n detail: target.value,\n bubbles: true,\n composed: true,\n })\n );\n }}\n >\n ${options}\n </ix-select>\n </div>`;\n }\n\n render(): TemplateResult<1> {\n const hasSubaccounts = this.accounts.some(\n a => a.subaccounts && a.subaccounts.length > 0\n );\n\n return html`\n <div class=\"account-switcher-container\">\n ${hasSubaccounts\n ? this.renderNestedAccountStructureSelect()\n : this.renderFlatAccountStructureSelect()}\n </div>\n\n ${hasSubaccounts ? this.renderDialog() : null}\n `;\n }\n}\n"]}
@@ -1 +1 @@
1
- import{html,nothing,css}from"lit";import{elementTheme}from"@digital-realty/theme";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{MobxLitElement}from"@adobe/lit-mobx";import{makeAutoObservable}from"mobx";import{makePersistable}from"mobx-persist-store";class AuthedUserState{constructor(){this.account_number="",this.email="",this.name="",this.auth_time="",this.access_token="",this.id_token="",makeAutoObservable(this),makePersistable(this,{name:"x-auth",properties:["email","account_number","name","auth_time","id_token","access_token"],storage:window.localStorage})}setAccount({accountNumber:e,email:t,name:i,authTime:o,accessToken:c,idToken:s}){this.account_number=e,this.email=t,this.name=i,this.auth_time=o,this.access_token=c,this.id_token=s}getAccount(){return{accountNumber:this.account_number,email:this.email,name:this.name,authTime:this.auth_time}}getAccessToken(){return this.access_token}getIdToken(){return this.id_token}}const authedUser=new AuthedUserState,findAccountById=(e,t)=>{var i=e.find(e=>e.id===t);if(i)return i;for(const c of e)if(c.subaccounts){var o=findAccountById(c.subaccounts,t);if(o)return o}return null},mapAccountToTreeNode=(e,t)=>{const i={expanded:!1,id:e.id,label:e.name,parentId:t.id};return i.children=null==(t=e.subaccounts)?void 0:t.map(e=>mapAccountToTreeNode(e,i)),i},mapAccountsToTreeNode=e=>{const t={expanded:!1,id:"root",label:"",parentId:void 0};return t.children=e.map(e=>mapAccountToTreeNode(e,t)),t};class IxAccountSwitcher extends MobxLitElement{constructor(){super(...arguments),this.accounts=[],this.showDialog=!1}renderDialog(){var e=mapAccountsToTreeNode(this.accounts);return html`<ix-dialog id="account-switcher-dialog" class="relative z-50" ?open="${this.showDialog}" @blur="${()=>{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"><ix-tree .rootNode="${e}" .selectedNodeId="${authedUser.account_number}" @on-tree-node-selected="${e=>{this.showDialog=!1,this.dispatchEvent(new CustomEvent("account-switched",{detail:e.detail.message.id,bubbles:!0,composed:!0}))}}"></ix-tree></form></ix-dialog>`}getSelectedAccount(){return findAccountById(this.accounts,authedUser.account_number)}renderNestedAccountStructureSelect(){var e=this.getSelectedAccount();return html`<ix-field @click="${()=>{this.showDialog=!0}}"><div class="subaccount-wrap"><span class="subaccount-name">${null==e?void 0:e.name}</span><ix-icon class="dd-icon">arrow_drop_down</ix-icon></div></ix-field>`}renderFlatAccountStructureSelect(){const i=this.getSelectedAccount(),o=html`<ix-label-tag>Active</ix-label-tag>`;var e=this.accounts.map(e=>{var t=e.id===(null===i||void 0===i?void 0:i.id);return html`<ix-select-option value="${e.id}" .selected="${t}"><div slot="headline">${e.name}</div><div slot="end">${t?o:nothing}</div></ix-select-option>`});return html`<div class="account-switcher__select"><ix-select @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.renderNestedAccountStructureSelect():this.renderFlatAccountStructureSelect()}</div>${e?this.renderDialog():null}`}}__decorate([property({type:Array})],IxAccountSwitcher.prototype,"accounts",void 0),__decorate([state()],IxAccountSwitcher.prototype,"showDialog",void 0);const AccountSwitcherStyles=css`.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}`;class IxAccountSwitcherStyled extends IxAccountSwitcher{}IxAccountSwitcherStyled.styles=[elementTheme,AccountSwitcherStyles,css`:host{--md-theme-primary:var(--ix-sys-primary, blue)}`],window.customElements.define("ix-account-switcher",IxAccountSwitcherStyled);export{IxAccountSwitcherStyled};
1
+ import{html,nothing,css}from"lit";import{elementTheme}from"@digital-realty/theme";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{MobxLitElement}from"@adobe/lit-mobx";import{makeAutoObservable}from"mobx";import{makePersistable}from"mobx-persist-store";class AuthedUserState{constructor(){this.account_number="",this.email="",this.name="",this.auth_time="",this.access_token="",this.id_token="",makeAutoObservable(this),makePersistable(this,{name:"x-auth",properties:["email","account_number","name","auth_time","id_token","access_token"],storage:window.localStorage})}setAccount({accountNumber:e,email:t,name:i,authTime:o,accessToken:c,idToken:s}){this.account_number=e,this.email=t,this.name=i,this.auth_time=o,this.access_token=c,this.id_token=s}getAccount(){return{accountNumber:this.account_number,email:this.email,name:this.name,authTime:this.auth_time}}getAccessToken(){return this.access_token}getIdToken(){return this.id_token}}const authedUser=new AuthedUserState,findAccountById=(e,t)=>{var i=e.find(e=>e.id===t);if(i)return i;for(const c of e)if(c.subaccounts){var o=findAccountById(c.subaccounts,t);if(o)return o}return null},mapAccountToTreeNode=(e,t)=>{const i={expanded:!1,id:e.id,label:e.name,parentId:t.id};return i.children=null==(t=e.subaccounts)?void 0:t.map(e=>mapAccountToTreeNode(e,i)),i},mapAccountsToTreeNode=e=>{const t={expanded:!1,id:"root",label:"",parentId:void 0};return t.children=e.map(e=>mapAccountToTreeNode(e,t)),t};class IxAccountSwitcher extends MobxLitElement{constructor(){super(...arguments),this.accounts=[],this.disabled=!1,this.showDialog=!1}renderDialog(){var e=mapAccountsToTreeNode(this.accounts);return html`<ix-dialog id="account-switcher-dialog" class="relative z-50" ?open="${this.showDialog}" @blur="${()=>{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"><ix-tree .rootNode="${e}" .selectedNodeId="${authedUser.account_number}" @on-tree-node-selected="${e=>{this.showDialog=!1,this.dispatchEvent(new CustomEvent("account-switched",{detail:e.detail.message.id,bubbles:!0,composed:!0}))}}"></ix-tree></form></ix-dialog>`}getSelectedAccount(){return findAccountById(this.accounts,authedUser.account_number)}renderNestedAccountStructureSelect(){var e=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?void 0:e.name}</span><ix-icon class="dd-icon">arrow_drop_down</ix-icon></div></ix-field>`}renderFlatAccountStructureSelect(){const i=this.getSelectedAccount(),o=html`<ix-label-tag>Active</ix-label-tag>`;var e=this.accounts.map(e=>{var t=e.id===(null===i||void 0===i?void 0:i.id);return html`<ix-select-option value="${e.id}" .selected="${t}"><div slot="headline">${e.name}</div><div slot="end">${t?o: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.renderNestedAccountStructureSelect():this.renderFlatAccountStructureSelect()}</div>${e?this.renderDialog():null}`}}__decorate([property({type:Array})],IxAccountSwitcher.prototype,"accounts",void 0),__decorate([property({type:Boolean})],IxAccountSwitcher.prototype,"disabled",void 0),__decorate([state()],IxAccountSwitcher.prototype,"showDialog",void 0);const AccountSwitcherStyles=css`.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}`;class IxAccountSwitcherStyled extends IxAccountSwitcher{}IxAccountSwitcherStyled.styles=[elementTheme,AccountSwitcherStyles,css`:host{--md-theme-primary:var(--ix-sys-primary, blue)}`],window.customElements.define("ix-account-switcher",IxAccountSwitcherStyled);export{IxAccountSwitcherStyled};
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.0.7",
6
+ "version": "1.0.9",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -31,7 +31,7 @@
31
31
  "@digital-realty/ix-icon-button": "^1.0.37",
32
32
  "@digital-realty/ix-label-tag": "^2.1.8",
33
33
  "@digital-realty/ix-select": "^1.0.37",
34
- "@digital-realty/ix-tree": "^3.0.2",
34
+ "@digital-realty/ix-tree": "^3.0.3",
35
35
  "@digital-realty/theme": "^1.0.27",
36
36
  "lit": "^2.0.2",
37
37
  "mobx": "^6.12.3",
@@ -106,5 +106,5 @@
106
106
  "README.md",
107
107
  "LICENSE"
108
108
  ],
109
- "gitHead": "a59878f69290a4f76fad90db2657dcb932b4a478"
109
+ "gitHead": "f96a69a86fe44b5aac1d0bbf8a949215aaca2954"
110
110
  }