@digital-realty/ix-account-switcher 1.0.20 → 1.0.23
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.
- package/dist/IxAccountSwitcher.d.ts +7 -0
- package/dist/IxAccountSwitcher.js +122 -16
- package/dist/IxAccountSwitcher.js.map +1 -1
- package/dist/account-switcher-styles.js +20 -0
- package/dist/account-switcher-styles.js.map +1 -1
- package/dist/ix-account-switcher.min.js +1 -1
- package/dist/types.d.ts +1 -0
- package/dist/types.js.map +1 -1
- package/dist/utils/map-accounts-to-tree.js +3 -3
- package/dist/utils/map-accounts-to-tree.js.map +1 -1
- package/package.json +2 -2
|
@@ -12,6 +12,13 @@ export declare class IxAccountSwitcher extends LitElement {
|
|
|
12
12
|
accounts: NestedAccounts[];
|
|
13
13
|
disabled: boolean;
|
|
14
14
|
showDialog: boolean;
|
|
15
|
+
visibleAccounts: NestedAccounts[];
|
|
16
|
+
currentFilter: string;
|
|
17
|
+
loading: boolean;
|
|
18
|
+
displayFilters: boolean;
|
|
19
|
+
updated(changedProperties: Map<string | symbol, unknown>): void;
|
|
20
|
+
private filterVisibleAccounts;
|
|
21
|
+
private renderTree;
|
|
15
22
|
private renderDialog;
|
|
16
23
|
getSelectedAccount(): NestedAccounts | null;
|
|
17
24
|
private renderNestedAccountStructureSelect;
|
|
@@ -10,6 +10,35 @@ import { html, LitElement, nothing } from 'lit';
|
|
|
10
10
|
import { property, state } from 'lit/decorators.js';
|
|
11
11
|
import findAccountById from './utils/find-account-by-id.js';
|
|
12
12
|
import { mapAccountsToTreeNode } from './utils/map-accounts-to-tree.js';
|
|
13
|
+
const filters = [
|
|
14
|
+
'#',
|
|
15
|
+
'A',
|
|
16
|
+
'B',
|
|
17
|
+
'C',
|
|
18
|
+
'D',
|
|
19
|
+
'E',
|
|
20
|
+
'F',
|
|
21
|
+
'G',
|
|
22
|
+
'H',
|
|
23
|
+
'I',
|
|
24
|
+
'J',
|
|
25
|
+
'K',
|
|
26
|
+
'L',
|
|
27
|
+
'M',
|
|
28
|
+
'N',
|
|
29
|
+
'O',
|
|
30
|
+
'P',
|
|
31
|
+
'Q',
|
|
32
|
+
'R',
|
|
33
|
+
'S',
|
|
34
|
+
'T',
|
|
35
|
+
'U',
|
|
36
|
+
'V',
|
|
37
|
+
'W',
|
|
38
|
+
'X',
|
|
39
|
+
'Y',
|
|
40
|
+
'Z',
|
|
41
|
+
];
|
|
13
42
|
export class IxAccountSwitcher extends LitElement {
|
|
14
43
|
constructor() {
|
|
15
44
|
super(...arguments);
|
|
@@ -17,9 +46,56 @@ export class IxAccountSwitcher extends LitElement {
|
|
|
17
46
|
this.accounts = [];
|
|
18
47
|
this.disabled = false;
|
|
19
48
|
this.showDialog = false;
|
|
49
|
+
this.visibleAccounts = [];
|
|
50
|
+
this.currentFilter = '#';
|
|
51
|
+
this.loading = false;
|
|
52
|
+
this.displayFilters = false;
|
|
53
|
+
}
|
|
54
|
+
updated(changedProperties) {
|
|
55
|
+
super.updated(changedProperties);
|
|
56
|
+
if (changedProperties.has('accounts')) {
|
|
57
|
+
this.displayFilters = this.accounts.length >= 1000;
|
|
58
|
+
}
|
|
59
|
+
if (changedProperties.has('currentFilter') ||
|
|
60
|
+
changedProperties.has('accounts')) {
|
|
61
|
+
this.filterVisibleAccounts();
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
filterVisibleAccounts() {
|
|
65
|
+
this.loading = true;
|
|
66
|
+
if (!this.displayFilters) {
|
|
67
|
+
this.visibleAccounts = this.accounts;
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
this.visibleAccounts =
|
|
71
|
+
this.currentFilter === '#'
|
|
72
|
+
? this.accounts.filter(account => account.name.length &&
|
|
73
|
+
!filters.includes(account.name[0].toUpperCase()))
|
|
74
|
+
: this.accounts.filter(account => account.name.length &&
|
|
75
|
+
account.name[0].toUpperCase().startsWith(this.currentFilter));
|
|
76
|
+
}
|
|
77
|
+
setTimeout(() => {
|
|
78
|
+
this.loading = false;
|
|
79
|
+
}, 10);
|
|
80
|
+
}
|
|
81
|
+
renderTree() {
|
|
82
|
+
return html `
|
|
83
|
+
<ix-tree
|
|
84
|
+
aria-label="Account Switcher"
|
|
85
|
+
.rootNode=${mapAccountsToTreeNode(this.visibleAccounts)}
|
|
86
|
+
selectedNodeId=${this.selectedAccountNumber}
|
|
87
|
+
@on-tree-node-selected=${(e) => {
|
|
88
|
+
this.dispatchEvent(new CustomEvent('account-switched', {
|
|
89
|
+
detail: e.detail.message.id,
|
|
90
|
+
bubbles: true,
|
|
91
|
+
composed: true,
|
|
92
|
+
}));
|
|
93
|
+
this.showDialog = false;
|
|
94
|
+
}}
|
|
95
|
+
></ix-tree>
|
|
96
|
+
`;
|
|
20
97
|
}
|
|
21
98
|
renderDialog() {
|
|
22
|
-
const rootNode = mapAccountsToTreeNode(this.accounts);
|
|
23
99
|
return html `<ix-dialog
|
|
24
100
|
id="account-switcher-dialog"
|
|
25
101
|
?open=${this.showDialog}
|
|
@@ -37,25 +113,41 @@ export class IxAccountSwitcher extends LitElement {
|
|
|
37
113
|
>
|
|
38
114
|
</ix-icon-button>
|
|
39
115
|
</div>
|
|
116
|
+
|
|
40
117
|
<form
|
|
41
118
|
id="account-switcher-dialog-form"
|
|
42
119
|
class="form"
|
|
43
120
|
method="dialog"
|
|
44
121
|
slot="content"
|
|
45
122
|
>
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
123
|
+
${this.displayFilters
|
|
124
|
+
? html `
|
|
125
|
+
<div class="padded-container stick-to-top">
|
|
126
|
+
<div>Filter accounts by:</div>
|
|
127
|
+
|
|
128
|
+
${filters.map(filter => html `
|
|
129
|
+
<span
|
|
130
|
+
class="account-filter ${this.currentFilter === filter
|
|
131
|
+
? 'active'
|
|
132
|
+
: ''}"
|
|
133
|
+
@click=${() => {
|
|
134
|
+
this.currentFilter = filter;
|
|
135
|
+
}}
|
|
136
|
+
@keydown=${(e) => {
|
|
137
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
138
|
+
this.currentFilter = filter;
|
|
139
|
+
e.preventDefault();
|
|
140
|
+
}
|
|
141
|
+
}}
|
|
142
|
+
>${filter}</span
|
|
143
|
+
>
|
|
144
|
+
`)}
|
|
145
|
+
</div>
|
|
146
|
+
`
|
|
147
|
+
: nothing}
|
|
148
|
+
${this.loading
|
|
149
|
+
? html `<div class="padded-container">Loading...</div>`
|
|
150
|
+
: this.renderTree()}
|
|
59
151
|
</form>
|
|
60
152
|
</ix-dialog>`;
|
|
61
153
|
}
|
|
@@ -63,6 +155,7 @@ export class IxAccountSwitcher extends LitElement {
|
|
|
63
155
|
return findAccountById(this.accounts, this.selectedAccountNumber);
|
|
64
156
|
}
|
|
65
157
|
renderNestedAccountStructureSelect() {
|
|
158
|
+
var _a;
|
|
66
159
|
const selectedAccount = this.getSelectedAccount();
|
|
67
160
|
return html `
|
|
68
161
|
<ix-field
|
|
@@ -74,7 +167,7 @@ export class IxAccountSwitcher extends LitElement {
|
|
|
74
167
|
}}
|
|
75
168
|
>
|
|
76
169
|
<div class="subaccount-wrap">
|
|
77
|
-
<span class="subaccount-name"> ${selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.name} </span>
|
|
170
|
+
<span class="subaccount-name"> ${(_a = selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.displayName) !== null && _a !== void 0 ? _a : selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.name} </span>
|
|
78
171
|
<ix-icon class="dd-icon">arrow_drop_down</ix-icon>
|
|
79
172
|
</div>
|
|
80
173
|
</ix-field>
|
|
@@ -84,9 +177,10 @@ export class IxAccountSwitcher extends LitElement {
|
|
|
84
177
|
const selectedAccount = this.getSelectedAccount();
|
|
85
178
|
const activeLabelTag = html `<ix-label-tag>Active</ix-label-tag>`;
|
|
86
179
|
const options = this.accounts.map(account => {
|
|
180
|
+
var _a;
|
|
87
181
|
const isSelected = account.id === (selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.id);
|
|
88
182
|
return html `<ix-select-option value=${account.id} .selected=${isSelected}>
|
|
89
|
-
<div slot="headline">${account.name}</div>
|
|
183
|
+
<div slot="headline">${(_a = account === null || account === void 0 ? void 0 : account.displayName) !== null && _a !== void 0 ? _a : account.name}</div>
|
|
90
184
|
<div slot="end">${isSelected ? activeLabelTag : nothing}</div>
|
|
91
185
|
</ix-select-option>`;
|
|
92
186
|
});
|
|
@@ -131,4 +225,16 @@ __decorate([
|
|
|
131
225
|
__decorate([
|
|
132
226
|
state()
|
|
133
227
|
], IxAccountSwitcher.prototype, "showDialog", void 0);
|
|
228
|
+
__decorate([
|
|
229
|
+
state()
|
|
230
|
+
], IxAccountSwitcher.prototype, "visibleAccounts", void 0);
|
|
231
|
+
__decorate([
|
|
232
|
+
state()
|
|
233
|
+
], IxAccountSwitcher.prototype, "currentFilter", void 0);
|
|
234
|
+
__decorate([
|
|
235
|
+
state()
|
|
236
|
+
], IxAccountSwitcher.prototype, "loading", void 0);
|
|
237
|
+
__decorate([
|
|
238
|
+
state()
|
|
239
|
+
], IxAccountSwitcher.prototype, "displayFilters", void 0);
|
|
134
240
|
//# sourceMappingURL=IxAccountSwitcher.js.map
|
|
@@ -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, LitElement, nothing, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.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 LitElement {\n @property({ type: String, reflect: true }) selectedAccountNumber: string = '';\n\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 ?open=${this.showDialog}\n @closed=${() => {\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 hasIcons\n .rootNode=${rootNode}\n .selectedNodeId=${this.selectedAccountNumber}\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, this.selectedAccountNumber 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
|
+
{"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 { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.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\nconst filters = [\n '#',\n 'A',\n 'B',\n 'C',\n 'D',\n 'E',\n 'F',\n 'G',\n 'H',\n 'I',\n 'J',\n 'K',\n 'L',\n 'M',\n 'N',\n 'O',\n 'P',\n 'Q',\n 'R',\n 'S',\n 'T',\n 'U',\n 'V',\n 'W',\n 'X',\n 'Y',\n 'Z',\n];\n\nexport class IxAccountSwitcher extends LitElement {\n @property({ type: String, reflect: true }) selectedAccountNumber: string = '';\n\n @property({ type: Array }) accounts: NestedAccounts[] = [];\n\n @property({ type: Boolean }) disabled: boolean = false;\n\n @state() showDialog: boolean = false;\n\n @state() visibleAccounts: NestedAccounts[] = [];\n\n @state() currentFilter: string = '#';\n\n @state() loading: boolean = false;\n\n @state() displayFilters: boolean = false;\n\n updated(changedProperties: Map<string | symbol, unknown>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('accounts')) {\n this.displayFilters = this.accounts.length >= 1000;\n }\n\n if (\n changedProperties.has('currentFilter') ||\n changedProperties.has('accounts')\n ) {\n this.filterVisibleAccounts();\n }\n }\n\n private filterVisibleAccounts() {\n this.loading = true;\n\n if (!this.displayFilters) {\n this.visibleAccounts = this.accounts;\n } else {\n this.visibleAccounts =\n this.currentFilter === '#'\n ? this.accounts.filter(\n account =>\n account.name.length &&\n !filters.includes(account.name[0].toUpperCase())\n )\n : this.accounts.filter(\n account =>\n account.name.length &&\n account.name[0].toUpperCase().startsWith(this.currentFilter)\n );\n }\n\n setTimeout(() => {\n this.loading = false;\n }, 10);\n }\n\n private renderTree(): TemplateResult<1> {\n return html`\n <ix-tree\n aria-label=\"Account Switcher\"\n .rootNode=${mapAccountsToTreeNode(this.visibleAccounts)}\n selectedNodeId=${this.selectedAccountNumber}\n @on-tree-node-selected=${(e: CustomEvent) => {\n this.dispatchEvent(\n new CustomEvent('account-switched', {\n detail: e.detail.message.id,\n bubbles: true,\n composed: true,\n })\n );\n this.showDialog = false;\n }}\n ></ix-tree>\n `;\n }\n\n private renderDialog(): TemplateResult<1> {\n return html`<ix-dialog\n id=\"account-switcher-dialog\"\n ?open=${this.showDialog}\n @closed=${() => {\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\n <form\n id=\"account-switcher-dialog-form\"\n class=\"form\"\n method=\"dialog\"\n slot=\"content\"\n >\n ${this.displayFilters\n ? html`\n <div class=\"padded-container stick-to-top\">\n <div>Filter accounts by:</div>\n\n ${filters.map(\n filter => html`\n <span\n class=\"account-filter ${this.currentFilter === filter\n ? 'active'\n : ''}\"\n @click=${() => {\n this.currentFilter = filter;\n }}\n @keydown=${(e: any) => {\n if (e.key === 'Enter' || e.key === ' ') {\n this.currentFilter = filter;\n e.preventDefault();\n }\n }}\n >${filter}</span\n >\n `\n )}\n </div>\n `\n : nothing}\n ${this.loading\n ? html`<div class=\"padded-container\">Loading...</div>`\n : this.renderTree()}\n </form>\n </ix-dialog>`;\n }\n\n getSelectedAccount() {\n return findAccountById(this.accounts, this.selectedAccountNumber 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?.displayName ?? 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?.displayName ?? 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"]}
|
|
@@ -33,5 +33,25 @@ export const AccountSwitcherStyles = css `
|
|
|
33
33
|
width: calc(560px - 3rem);
|
|
34
34
|
overflow: auto;
|
|
35
35
|
}
|
|
36
|
+
.account-filter {
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
padding: 2px;
|
|
39
|
+
}
|
|
40
|
+
.account-filter:hover {
|
|
41
|
+
text-decoration: underline;
|
|
42
|
+
}
|
|
43
|
+
.account-filter.active {
|
|
44
|
+
text-decoration: underline;
|
|
45
|
+
font-weight: bold;
|
|
46
|
+
}
|
|
47
|
+
.padded-container {
|
|
48
|
+
padding: 12px;
|
|
49
|
+
}
|
|
50
|
+
.stick-to-top {
|
|
51
|
+
position: sticky;
|
|
52
|
+
top: 0;
|
|
53
|
+
background-color: rgb(200, 223, 250);
|
|
54
|
+
z-index: 1;
|
|
55
|
+
}
|
|
36
56
|
`;
|
|
37
57
|
//# sourceMappingURL=account-switcher-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"account-switcher-styles.js","sourceRoot":"","sources":["../src/account-switcher-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"account-switcher-styles.js","sourceRoot":"","sources":["../src/account-switcher-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDvC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const AccountSwitcherStyles = css`\n #account-switcher-dialog {\n position: relative;\n z-index: var(--ix-account-switcher-z-index, 50);\n }\n .subaccount-wrap {\n display: flex;\n --ix-icon-font-size: 1.6rem;\n }\n .subaccount-name {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 0;\n flex: 1;\n }\n .dd-icon {\n margin: -2px -5px -5px 0px;\n }\n .headline {\n display: flex;\n }\n .title {\n flex: 1;\n }\n .form {\n border: 1px solid #e0e0e0;\n border-radius: 0.25rem;\n height: calc(488px - 3rem);\n margin: 1rem 1.5rem 1.5rem 1.5rem;\n padding: 0;\n width: calc(560px - 3rem);\n overflow: auto;\n }\n .account-filter {\n cursor: pointer;\n padding: 2px;\n }\n .account-filter:hover {\n text-decoration: underline;\n }\n .account-filter.active {\n text-decoration: underline;\n font-weight: bold;\n }\n .padded-container {\n padding: 12px;\n }\n .stick-to-top {\n position: sticky;\n top: 0;\n background-color: rgb(200, 223, 250);\n z-index: 1;\n }\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{LitElement,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";const findAccountById=(e
|
|
1
|
+
import{LitElement,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";const findAccountById=(t,e)=>{var i=t.find(t=>t.id===e);if(i)return i;for(const o of t)if(o.subaccounts){var c=findAccountById(o.subaccounts,e);if(c)return c}return null},mapAccountToTreeNode=(t,e)=>{var i;const c={expanded:!1,id:t.id,label:null!=(i=t.displayName)?i:t.name,parentId:e.id};return c.children=null==(i=t.subaccounts)?void 0:i.map(t=>mapAccountToTreeNode(t,c)),c},mapAccountsToTreeNode=t=>{const e={expanded:!1,id:"root",label:"",parentId:void 0};return e.children=t.map(t=>mapAccountToTreeNode(t,e)),e},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.showDialog=!1,this.visibleAccounts=[],this.currentFilter="#",this.loading=!1,this.displayFilters=!1}updated(t){super.updated(t),t.has("accounts")&&(this.displayFilters=1e3<=this.accounts.length),(t.has("currentFilter")||t.has("accounts"))&&this.filterVisibleAccounts()}filterVisibleAccounts(){this.loading=!0,this.displayFilters?this.visibleAccounts="#"===this.currentFilter?this.accounts.filter(t=>t.name.length&&!filters.includes(t.name[0].toUpperCase())):this.accounts.filter(t=>t.name.length&&t.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}" @on-tree-node-selected="${t=>{this.dispatchEvent(new CustomEvent("account-switched",{detail:t.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(e=>html`<span class="account-filter ${this.currentFilter===e?"active":""}" @click="${()=>{this.currentFilter=e}}" @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||(this.currentFilter=e,t.preventDefault())}}">${e}</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 t,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!=(t=null==e?void 0:e.displayName)?t:null==e?void 0:e.name}</span><ix-icon class="dd-icon">arrow_drop_down</ix-icon></div></ix-field>`}renderFlatAccountStructureSelect(){const c=this.getSelectedAccount(),o=html`<ix-label-tag>Active</ix-label-tag>`;var t=this.accounts.map(t=>{var e,i=t.id===(null===c||void 0===c?void 0:c.id);return html`<ix-select-option value="${t.id}" .selected="${i}"><div slot="headline">${null!=(e=null==t?void 0:t.displayName)?e:t.name}</div><div slot="end">${i?o:nothing}</div></ix-select-option>`});return html`<div class="account-switcher__select"><ix-select ?disabled="${this.disabled}" @request-selection="${t=>{t=t.target;this.dispatchEvent(new CustomEvent("account-switched",{detail:t.value,bubbles:!0,composed:!0}))}}">${t}</ix-select></div>`}render(){var t=this.accounts.some(t=>t.subaccounts&&0<t.subaccounts.length);return html`<div class="account-switcher-container">${t?this.renderNestedAccountStructureSelect():this.renderFlatAccountStructureSelect()}</div>${t?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([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);const 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}`;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/dist/types.d.ts
CHANGED
package/dist/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface IAccount {\n accountNumber?: string;\n parentAccountNumber?: string | null;\n name?: string;\n}\n\nexport interface Account {\n account_number?: string;\n parent_account_number?: string | null;\n name?: string;\n}\n\nexport interface NestedAccounts {\n id: string;\n name: string;\n status: string;\n accountNumber: string;\n subaccounts?: NestedAccounts[];\n}\n\nexport interface IContactInputAccountsInner {\n id: string;\n name: string;\n status: string;\n accountNumber?: string;\n statusUpdateAt?: string;\n statusUpdateBy?: string;\n}\n\nexport interface IContact {\n id: string;\n firstName: string;\n lastName: string;\n email: string;\n phone: string;\n evacAssistance: boolean;\n accounts: Array<IContactInputAccountsInner>;\n status?: string;\n}\n\nexport type UserPermission = {\n permissionName: string;\n privilege: string;\n};\n\nexport type AccountPermission = {\n accountNumber: string;\n permissions: UserPermission[];\n};\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface IAccount {\n accountNumber?: string;\n parentAccountNumber?: string | null;\n name?: string;\n}\n\nexport interface Account {\n account_number?: string;\n parent_account_number?: string | null;\n name?: string;\n}\n\nexport interface NestedAccounts {\n id: string;\n name: string;\n status: string;\n accountNumber: string;\n displayName?: string;\n subaccounts?: NestedAccounts[];\n}\n\nexport interface IContactInputAccountsInner {\n id: string;\n name: string;\n status: string;\n accountNumber?: string;\n statusUpdateAt?: string;\n statusUpdateBy?: string;\n}\n\nexport interface IContact {\n id: string;\n firstName: string;\n lastName: string;\n email: string;\n phone: string;\n evacAssistance: boolean;\n accounts: Array<IContactInputAccountsInner>;\n status?: string;\n}\n\nexport type UserPermission = {\n permissionName: string;\n privilege: string;\n};\n\nexport type AccountPermission = {\n accountNumber: string;\n permissions: UserPermission[];\n};\n"]}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
// TODO: Should use correctly typed definition rather than any
|
|
2
2
|
export const mapAccountToTreeNode = (account, parentNode) => {
|
|
3
|
-
var _a;
|
|
3
|
+
var _a, _b;
|
|
4
4
|
const treeNode = {
|
|
5
5
|
expanded: false,
|
|
6
6
|
id: account.id,
|
|
7
|
-
label: account.name,
|
|
7
|
+
label: (_a = account.displayName) !== null && _a !== void 0 ? _a : account.name,
|
|
8
8
|
parentId: parentNode.id,
|
|
9
9
|
};
|
|
10
|
-
treeNode.children = (
|
|
10
|
+
treeNode.children = (_b = account.subaccounts) === null || _b === void 0 ? void 0 : _b.map((childAccount) => mapAccountToTreeNode(childAccount, treeNode));
|
|
11
11
|
return treeNode;
|
|
12
12
|
};
|
|
13
13
|
export const mapAccountsToTreeNode = (accounts) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"map-accounts-to-tree.js","sourceRoot":"","sources":["../../src/utils/map-accounts-to-tree.ts"],"names":[],"mappings":"AAQA,8DAA8D;AAC9D,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,OAAY,EACZ,UAAuB,EACV,EAAE;;IACf,MAAM,QAAQ,GAAgB;QAC5B,QAAQ,EAAE,KAAK;QACf,EAAE,EAAE,OAAO,CAAC,EAAE;QACd,KAAK,EAAE,OAAO,CAAC,IAAI;
|
|
1
|
+
{"version":3,"file":"map-accounts-to-tree.js","sourceRoot":"","sources":["../../src/utils/map-accounts-to-tree.ts"],"names":[],"mappings":"AAQA,8DAA8D;AAC9D,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,OAAY,EACZ,UAAuB,EACV,EAAE;;IACf,MAAM,QAAQ,GAAgB;QAC5B,QAAQ,EAAE,KAAK;QACf,EAAE,EAAE,OAAO,CAAC,EAAE;QACd,KAAK,EAAE,MAAA,OAAO,CAAC,WAAW,mCAAI,OAAO,CAAC,IAAI;QAC1C,QAAQ,EAAE,UAAU,CAAC,EAAE;KACxB,CAAC;IAEF,QAAQ,CAAC,QAAQ,GAAG,MAAA,OAAO,CAAC,WAAW,0CAAE,GAAG,CAAC,CAAC,YAAiB,EAAE,EAAE,CACjE,oBAAoB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAC7C,CAAC;IAEF,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACnC,QAAyB,EACZ,EAAE;IACf,MAAM,QAAQ,GAAgB;QAC5B,QAAQ,EAAE,KAAK;QACf,EAAE,EAAE,MAAM;QACV,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE,SAAS;KACpB,CAAC;IAEF,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CACzC,oBAAoB,CAAC,OAAO,EAAE,QAAQ,CAAC,CACxC,CAAC;IAEF,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC","sourcesContent":["import type { IIxTreeNode } from '@digital-realty/ix-tree';\n\nexport interface IAccount {\n accountNumber?: string;\n parentAccountNumber?: string | null;\n name?: string;\n}\n\n// TODO: Should use correctly typed definition rather than any\nexport const mapAccountToTreeNode = (\n account: any,\n parentNode: IIxTreeNode\n): IIxTreeNode => {\n const treeNode: IIxTreeNode = {\n expanded: false,\n id: account.id,\n label: account.displayName ?? account.name,\n parentId: parentNode.id,\n };\n\n treeNode.children = account.subaccounts?.map((childAccount: any) =>\n mapAccountToTreeNode(childAccount, treeNode)\n );\n\n return treeNode;\n};\n\nexport const mapAccountsToTreeNode = (\n accounts: Array<IAccount>\n): IIxTreeNode => {\n const rootNode: IIxTreeNode = {\n expanded: false,\n id: 'root',\n label: '',\n parentId: undefined,\n };\n\n rootNode.children = accounts.map(account =>\n mapAccountToTreeNode(account, rootNode)\n );\n\n return rootNode;\n};\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.0.
|
|
6
|
+
"version": "1.0.23",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -106,5 +106,5 @@
|
|
|
106
106
|
"README.md",
|
|
107
107
|
"LICENSE"
|
|
108
108
|
],
|
|
109
|
-
"gitHead": "
|
|
109
|
+
"gitHead": "5f26a1137c65de2d7851a31ec540e0a5b3929182"
|
|
110
110
|
}
|