@digital-realty/ix-account-switcher 1.1.32 → 1.2.1

package/dist/IxAccountSwitcher.d.ts

@@ -2,26 +2,49 @@ 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-progress/ix-progress.js';
 import '@digital-realty/ix-select/ix-select.js';
 import '@digital-realty/ix-select/ix-select-option.js';
+import '@digital-realty/ix-textbox/ix-textbox.js';
 import '@digital-realty/ix-tree/ix-tree.js';
 import { LitElement, TemplateResult } from 'lit';
 import type { NestedAccounts } from './types.js';
 export declare class IxAccountSwitcher extends LitElement {
+    readonly accountTree: HTMLElement;
+    readonly searchInput: HTMLElement;
     selectedAccountNumber: string;
     accounts: NestedAccounts[];
+    prevDataAvailable: boolean;
+    nextDataAvailable: boolean;
     disabled: boolean;
     enableFilterDialog: boolean;
     showDialog: boolean;
     visibleAccounts: NestedAccounts[];
-    currentFilter: string;
     loading: boolean;
+    scrollLoading: boolean;
+    prevScrollLoading: boolean;
     displayFilters: boolean;
-    updated(changedProperties: Map<string | symbol, unknown>): void;
+    filterString: string;
+    selectedAccount?: NestedAccounts;
+    scrollTop: number;
+    accountsLength: number;
+    resettingInitialList: boolean;
+    rebuildingTree: boolean;
+    keyValue: string;
+    treeData: any;
+    private enableFetchPage;
+    updated: (changedProperties: Map<string | symbol, unknown>) => Promise<void>;
+    private awaitUpdateComplete;
     private filterVisibleAccounts;
+    filterAccountsBySearchTerm: (filterString: string) => void;
+    getAnchorNode: (position: number) => HTMLElement | null;
+    getMoreAccountsOnScroll: (e: Event) => Promise<void>;
+    openDialog: () => void;
+    scrollSelectedAccountIntoView: () => Promise<void>;
+    closeDialog: () => void;
     private renderTree;
     private renderDialog;
-    getSelectedAccount(): NestedAccounts | null;
+    getSelectedAccount(): NestedAccounts | undefined;
     private renderNestedAccountStructureSelect;
     private renderFlatAccountStructureSelect;
     render(): TemplateResult<1>;

package/dist/IxAccountSwitcher.js

@@ -3,99 +3,271 @@ 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-progress/ix-progress.js';
 import '@digital-realty/ix-select/ix-select.js';
 import '@digital-realty/ix-select/ix-select-option.js';
+import '@digital-realty/ix-textbox/ix-textbox.js';
 import '@digital-realty/ix-tree/ix-tree.js';
 import { html, LitElement, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import findAccountById from './utils/find-account-by-id.js';
 import { mapAccountsToTreeNode } from './utils/map-accounts-to-tree.js';
 import { authedUser } from './state/authedUser.js';
 import { findAccountHierarchy } from './utils/account-hierarchy-util.js';
-const 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',
-];
+// import { IxAccountSwitcherTestIds as TestIds } from './ix-account-switcher-test-ids.js';
+function debounce(func, wait, immediate = false) {
+    let timeout;
+    return function (...args) {
+        const context = this;
+        const later = () => {
+            timeout = null;
+            if (!immediate)
+                func.apply(context, args);
+        };
+        const callNow = immediate && !timeout;
+        if (timeout)
+            clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow)
+            func.apply(context, args);
+    };
+}
 export class IxAccountSwitcher extends LitElement {
     constructor() {
         super(...arguments);
         this.selectedAccountNumber = '';
         this.accounts = [];
+        this.prevDataAvailable = false;
+        this.nextDataAvailable = false;
         this.disabled = false;
         this.enableFilterDialog = false;
         this.showDialog = false;
         this.visibleAccounts = [];
-        this.currentFilter = '#';
         this.loading = false;
+        this.scrollLoading = false;
+        this.prevScrollLoading = false;
         this.displayFilters = false;
+        this.filterString = '';
+        this.scrollTop = 0;
+        this.accountsLength = 0;
+        this.resettingInitialList = false;
+        this.rebuildingTree = false;
+        this.keyValue = '';
+        this.treeData = mapAccountsToTreeNode(this.accounts, '');
+        this.enableFetchPage = false;
+        this.updated = async (changedProperties) => {
+            var _a, _b;
+            super.updated(changedProperties);
+            if (changedProperties.has('accounts')) {
+                this.loading = false;
+                if (!this.selectedAccount) {
+                    // if not yet found from account number
+                    this.selectedAccount = this.getSelectedAccount();
+                }
+                authedUser.setAccountHierarchy(findAccountHierarchy(this.accounts, this.selectedAccountNumber));
+                this.filterVisibleAccounts();
+                if (this.scrollLoading) {
+                    const hasPrevData = this.prevDataAvailable;
+                    this.prevDataAvailable = false;
+                    this.scrollLoading = false;
+                    await this.awaitUpdateComplete();
+                    (_a = this.getAnchorNode(this.accountsLength - 1)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                        block: 'end',
+                    });
+                    this.prevDataAvailable = hasPrevData;
+                    this.accountTree.scrollTop += 20;
+                }
+                else if (this.prevScrollLoading) {
+                    this.prevScrollLoading = false;
+                    const accountIndex = this.accounts.length - this.accountsLength;
+                    await this.awaitUpdateComplete();
+                    (_b = this.getAnchorNode(accountIndex)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'start' });
+                    this.accountTree.scrollTop -= 20;
+                }
+                else if (this.resettingInitialList) {
+                    await this.awaitUpdateComplete();
+                    this.scrollSelectedAccountIntoView();
+                    this.resettingInitialList = false;
+                }
+            }
+        };
+        this.filterAccountsBySearchTerm = debounce(async (filterString) => {
+            if (this.filterString.length < 3 && filterString.length < 3) {
+                this.filterString = filterString;
+                // no need to update tree
+                return;
+            }
+            this.filterString = filterString;
+            if (filterString.length < 3) {
+                this.resettingInitialList = true;
+            }
+            this.dispatchEvent(new CustomEvent('account-fetch', {
+                detail: {
+                    id: this.selectedAccountNumber,
+                    filterString: filterString.length < 3 ? '' : filterString,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+            this.loading = true;
+        }, 300);
+        this.getAnchorNode = (position) => {
+            const tree = this.accountTree.querySelector('ix-tree');
+            if (tree === null || tree === void 0 ? void 0 : tree.shadowRoot) {
+                const treeContainer = tree.shadowRoot.querySelector('.ix-tree-container');
+                return treeContainer.children[position];
+            }
+            return null;
+        };
+        this.getMoreAccountsOnScroll = async (e) => {
+            if (!this.enableFetchPage) {
+                this.enableFetchPage = true;
+                return;
+            }
+            if (this.scrollLoading || this.prevScrollLoading || this.loading)
+                return;
+            const target = e.currentTarget;
+            const distanceToBottom = this.accountTree.scrollHeight -
+                (target.clientHeight + this.accountTree.scrollTop);
+            if (this.accountTree.scrollTop < this.scrollTop &&
+                this.accountTree.scrollTop < 12) {
+                if (!this.prevDataAvailable)
+                    return;
+                this.prevScrollLoading = true;
+                this.accountsLength = this.accounts.length;
+                this.dispatchEvent(new CustomEvent('account-fetch', {
+                    detail: {
+                        id: this.selectedAccountNumber,
+                        filterString: this.filterString,
+                        prev: true,
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
+                this.enableFetchPage = false;
+            }
+            if (this.accountTree.scrollTop > this.scrollTop && distanceToBottom < 2) {
+                if (!this.nextDataAvailable)
+                    return;
+                this.scrollLoading = true;
+                await this.updateComplete;
+                this.scrollTop = this.accountTree.scrollTop;
+                this.accountsLength = this.accounts.length;
+                this.dispatchEvent(new CustomEvent('account-fetch', {
+                    detail: {
+                        id: this.selectedAccountNumber,
+                        filterString: this.filterString,
+                        next: true,
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
+                this.enableFetchPage = false;
+            }
+            this.scrollTop = this.accountTree.scrollTop;
+        };
+        this.openDialog = () => {
+            var _a, _b;
+            if (this.disabled)
+                return;
+            if (this.accounts.length === 0) {
+                this.loading = true;
+                this.dispatchEvent(new CustomEvent('account-fetch', {
+                    detail: {
+                        id: this.selectedAccountNumber,
+                        filterString: '',
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+            this.showDialog = true;
+            const el = this.searchInput;
+            if (el) {
+                const inner = el.querySelector('md-filled-text-field');
+                const field = (_a = inner === null || inner === void 0 ? void 0 : inner.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('md-filled-field');
+                const icon = (_b = field === null || field === void 0 ? void 0 : field.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.start');
+                if (icon) {
+                    icon.style.minWidth = '32px';
+                    icon.style.color = 'rgba(9, 34, 65, 0.7)';
+                }
+                if (field) {
+                    const input = field.querySelector('input');
+                    input.style.lineHeight = '24px';
+                    setTimeout(() => {
+                        input.focus();
+                    }, 50);
+                }
+            }
+            this.scrollSelectedAccountIntoView();
+        };
+        this.scrollSelectedAccountIntoView = async () => {
+            var _a;
+            await this.awaitUpdateComplete();
+            // scroll selected account into view
+            const accountIndex = this.accounts.findIndex(i => i.id === this.selectedAccountNumber);
+            const tree = this.accountTree.querySelector('ix-tree');
+            if (tree.shadowRoot) {
+                const treeContainer = tree.shadowRoot.querySelector('.ix-tree-container');
+                (_a = treeContainer.children[accountIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                    block: 'start',
+                });
+                // Adjust scroll position slightly to ensure can scroll
+                this.accountTree.scrollTop -= 4;
+                this.scrollTop = this.accountTree.scrollTop;
+            }
+        };
+        this.closeDialog = () => {
+            this.showDialog = false;
+            if (this.filterString.length > 0) {
+                this.filterString = '';
+                this.dispatchEvent(new CustomEvent('account-fetch', {
+                    detail: {
+                        id: this.selectedAccountNumber,
+                        filterString: '',
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        };
     }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('accounts')) {
-            this.displayFilters = this.accounts.length >= 1000;
-        }
-        if (changedProperties.has('currentFilter') ||
-            changedProperties.has('accounts')) {
-            authedUser.setAccountHierarchy(findAccountHierarchy(this.accounts, this.selectedAccountNumber));
-            this.filterVisibleAccounts();
-        }
+    async awaitUpdateComplete() {
+        await this.updateComplete;
+        await new Promise(requestAnimationFrame);
+        await new Promise(requestAnimationFrame);
     }
-    filterVisibleAccounts() {
-        this.loading = true;
-        if (!this.displayFilters) {
-            this.visibleAccounts = this.accounts;
-        }
-        else {
-            this.visibleAccounts =
-                this.currentFilter === '#'
-                    ? this.accounts.filter(account => account.name.length &&
-                        !filters.includes(account.name[0].toUpperCase()))
-                    : this.accounts.filter(account => account.name.length &&
-                        account.name[0].toUpperCase().startsWith(this.currentFilter));
-        }
-        setTimeout(() => {
-            this.loading = false;
-        }, 10);
+    async filterVisibleAccounts() {
+        this.treeData = mapAccountsToTreeNode(this.accounts, this.filterString.length > 2 ? this.filterString : undefined);
+        this.rebuildingTree = true;
+        await this.awaitUpdateComplete();
+        this.rebuildingTree = false;
     }
     renderTree() {
+        if (!this.accounts.length)
+            return html `<div class="padded-container">
+        <p class="no-results">No Results Found</p>
+      </div>`;
+        if (this.rebuildingTree) {
+            return html ``;
+        }
         return html `
       <ix-tree
         aria-label="Account Switcher"
-        .rootNode=${mapAccountsToTreeNode(this.visibleAccounts)}
+        .rootNode=${this.treeData}
         selectedNodeId=${this.selectedAccountNumber}
         ?allowMultiline=${true}
         @on-tree-node-selected=${(e) => {
+            if (e.detail.message.id === this.selectedAccountNumber) {
+                this.closeDialog();
+                return;
+            }
             this.dispatchEvent(new CustomEvent('account-switched', {
                 detail: e.detail.message.id,
                 bubbles: true,
                 composed: true,
             }));
-            this.showDialog = false;
+            this.loading = true;
         }}
       ></ix-tree>
     `;
@@ -104,18 +276,12 @@ export class IxAccountSwitcher extends LitElement {
         return html `<ix-dialog
       id="account-switcher-dialog"
       ?open=${this.showDialog}
-      @closed=${() => {
-            this.showDialog = false;
-        }}
+      @closed=${this.closeDialog}
+      disableNextClickIsFromContent="true"
     >
       <div class="headline" slot="headline">
         <span class="title">Switch Account</span>
-        <ix-icon-button
-          @click=${() => {
-            this.showDialog = false;
-        }}
-          icon="close"
-        >
+        <ix-icon-button @click=${this.closeDialog} icon="close">
         </ix-icon-button>
       </div>
 
@@ -125,57 +291,74 @@ export class IxAccountSwitcher extends LitElement {
         method="dialog"
         slot="content"
       >
-        ${this.displayFilters
-            ? html `
-              <div class="padded-container stick-to-top">
-                <div>Filter accounts by:</div>
+        <ix-textbox
+          id="searchInput"
+          filled
+          leading-icon="Search"
+          has-leading-icon
+          placeholder="Search"
+          .value=${this.filterString}
+          @input=${(e) => {
+            const input = e.target;
+            this.filterAccountsBySearchTerm(input.value);
+        }}
+        ></ix-textbox>
 
-                ${filters.map(filter => html `
-                    <span
-                      class="account-filter ${this.currentFilter === filter
-                ? 'active'
-                : ''}"
-                      @click=${() => {
-                this.currentFilter = filter;
-            }}
-                      @keydown=${(e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    this.currentFilter = filter;
-                    e.preventDefault();
-                }
-            }}
-                      >${filter}</span
-                    >
-                  `)}
-              </div>
-            `
+        <div
+          id="accountTree"
+          style="${this.loading ? 'loading-container-switch' : ''}"
+          @scroll=${this.getMoreAccountsOnScroll}
+        >
+          <div id="scroll-inner">
+            ${this.prevDataAvailable
+            ? html `
+                  <div id="loadPrevious">
+                    ${this.prevScrollLoading
+                ? html `<div>
+                          <ix-progress
+                            .linear=${false}
+                            .indeterminate=${true}
+                          ></ix-progress>
+                        </div>`
+                : nothing}
+                  </div>
+                `
             : nothing}
-        ${this.loading
-            ? html `<div class="padded-container">Loading...</div>`
+            ${this.loading
+            ? html `<div class="loading-container-switch">
+                  <ix-progress
+                    .linear=${false}
+                    .indeterminate=${true}
+                  ></ix-progress>
+                </div>`
             : this.renderTree()}
+            <div id="loadMore">
+              ${this.scrollLoading
+            ? html `<div>
+                    <ix-progress
+                      .linear=${false}
+                      .indeterminate=${true}
+                    ></ix-progress>
+                  </div>`
+            : nothing}
+            </div>
+          </div>
+        </div>
       </form>
     </ix-dialog>`;
     }
     getSelectedAccount() {
         const selectedAccount = findAccountById(this.accounts, this.selectedAccountNumber);
-        authedUser.setSelectedAccount(selectedAccount);
+        authedUser.setSelectedAccount(selectedAccount !== null && selectedAccount !== void 0 ? selectedAccount : undefined);
         return selectedAccount;
     }
     renderNestedAccountStructureSelect() {
         var _a;
-        const selectedAccount = this.getSelectedAccount();
         return html `
-      <ix-field
-        ?disabled=${this.disabled}
-        @click=${() => {
-            if (!this.disabled) {
-                this.showDialog = true;
-            }
-        }}
-      >
+      <ix-field ?disabled=${this.disabled} @click=${this.openDialog}>
         <div class="subaccount-wrap">
           <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}
+            ${(_a = this.selectedAccount) === null || _a === void 0 ? void 0 : _a.displayName}
           </span>
           <ix-icon class="dd-icon">arrow_drop_down</ix-icon>
         </div>
@@ -222,12 +405,24 @@ export class IxAccountSwitcher extends LitElement {
     `;
     }
 }
+__decorate([
+    query('#accountTree')
+], IxAccountSwitcher.prototype, "accountTree", void 0);
+__decorate([
+    query('#searchInput')
+], IxAccountSwitcher.prototype, "searchInput", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], IxAccountSwitcher.prototype, "selectedAccountNumber", void 0);
 __decorate([
     property({ type: Array })
 ], IxAccountSwitcher.prototype, "accounts", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxAccountSwitcher.prototype, "prevDataAvailable", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxAccountSwitcher.prototype, "nextDataAvailable", void 0);
 __decorate([
     property({ type: Boolean })
 ], IxAccountSwitcher.prototype, "disabled", void 0);
@@ -240,13 +435,43 @@ __decorate([
 __decorate([
     state()
 ], IxAccountSwitcher.prototype, "visibleAccounts", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxAccountSwitcher.prototype, "loading", void 0);
 __decorate([
     state()
-], IxAccountSwitcher.prototype, "currentFilter", void 0);
+], IxAccountSwitcher.prototype, "scrollLoading", void 0);
 __decorate([
     state()
-], IxAccountSwitcher.prototype, "loading", void 0);
+], IxAccountSwitcher.prototype, "prevScrollLoading", void 0);
 __decorate([
     state()
 ], IxAccountSwitcher.prototype, "displayFilters", void 0);
+__decorate([
+    state()
+], IxAccountSwitcher.prototype, "filterString", void 0);
+__decorate([
+    state()
+], IxAccountSwitcher.prototype, "selectedAccount", void 0);
+__decorate([
+    state()
+], IxAccountSwitcher.prototype, "scrollTop", void 0);
+__decorate([
+    state()
+], IxAccountSwitcher.prototype, "accountsLength", void 0);
+__decorate([
+    state()
+], IxAccountSwitcher.prototype, "resettingInitialList", void 0);
+__decorate([
+    state()
+], IxAccountSwitcher.prototype, "rebuildingTree", void 0);
+__decorate([
+    property()
+], IxAccountSwitcher.prototype, "keyValue", void 0);
+__decorate([
+    state()
+], IxAccountSwitcher.prototype, "treeData", void 0);
+__decorate([
+    state()
+], IxAccountSwitcher.prototype, "enableFetchPage", void 0);
 //# sourceMappingURL=IxAccountSwitcher.js.map

package/dist/IxAccountSwitcher.js.map

@@ -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 { 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';\nimport { authedUser } from './state/authedUser.js';\nimport { findAccountHierarchy } from './utils/account-hierarchy-util.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  @property({ type: Boolean }) enableFilterDialog: 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      authedUser.setAccountHierarchy(\n        findAccountHierarchy(this.accounts, this.selectedAccountNumber)\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        ?allowMultiline=${true}\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    const selectedAccount = findAccountById(\n      this.accounts,\n      this.selectedAccountNumber as string\n    );\n    authedUser.setSelectedAccount(selectedAccount!);\n\n    return selectedAccount;\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\">\n            ${selectedAccount?.displayName ?? selectedAccount?.name}\n          </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 || this.enableFilterDialog\n          ? this.renderNestedAccountStructureSelect()\n          : this.renderFlatAccountStructureSelect()}\n      </div>\n\n      ${hasSubaccounts || this.enableFilterDialog ? this.renderDialog() : null}\n    `;\n  }\n}\n"]}
+{"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-progress/ix-progress.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport '@digital-realty/ix-select/ix-select-option.js';\nimport '@digital-realty/ix-textbox/ix-textbox.js';\nimport '@digital-realty/ix-tree/ix-tree.js';\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { property, query, 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';\nimport { authedUser } from './state/authedUser.js';\nimport { findAccountHierarchy } from './utils/account-hierarchy-util.js';\n// import { IxAccountSwitcherTestIds as TestIds } from './ix-account-switcher-test-ids.js';\n\nfunction debounce<T extends (...args: any[]) => void>(\n  func: T,\n  wait: number,\n  immediate = false\n): (...args: Parameters<T>) => void {\n  let timeout: ReturnType<typeof setTimeout> | null;\n\n  return function (this: ThisParameterType<T>, ...args: Parameters<T>) {\n    const context = this;\n\n    const later = () => {\n      timeout = null;\n      if (!immediate) func.apply(context, args);\n    };\n\n    const callNow = immediate && !timeout;\n\n    if (timeout) clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n\n    if (callNow) func.apply(context, args);\n  };\n}\n\nexport class IxAccountSwitcher extends LitElement {\n  @query('#accountTree') readonly accountTree!: HTMLElement;\n\n  @query('#searchInput') readonly searchInput!: HTMLElement;\n\n  @property({ type: String, reflect: true }) selectedAccountNumber: string = '';\n\n  @property({ type: Array }) accounts: NestedAccounts[] = [];\n\n  @property({ type: Boolean }) prevDataAvailable: boolean = false;\n\n  @property({ type: Boolean }) nextDataAvailable: boolean = false;\n\n  @property({ type: Boolean }) disabled: boolean = false;\n\n  @property({ type: Boolean }) enableFilterDialog: boolean = false;\n\n  @state() showDialog: boolean = false;\n\n  @state() visibleAccounts: NestedAccounts[] = [];\n\n  @property({ type: Boolean }) loading: boolean = false;\n\n  @state() scrollLoading: boolean = false;\n\n  @state() prevScrollLoading: boolean = false;\n\n  @state() displayFilters: boolean = false;\n\n  @state() filterString: string = '';\n\n  @state() selectedAccount?: NestedAccounts;\n\n  @state() scrollTop: number = 0;\n\n  @state() accountsLength: number = 0;\n\n  @state() resettingInitialList: boolean = false;\n\n  @state() rebuildingTree: boolean = false;\n\n  @property() keyValue: string = '';\n\n  @state() treeData: any = mapAccountsToTreeNode(this.accounts, '');\n\n  @state() private enableFetchPage: boolean = false;\n\n  updated = async (changedProperties: Map<string | symbol, unknown>) => {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('accounts')) {\n      this.loading = false;\n\n      if (!this.selectedAccount) {\n        // if not yet found from account number\n        this.selectedAccount = this.getSelectedAccount();\n      }\n\n      authedUser.setAccountHierarchy(\n        findAccountHierarchy(this.accounts, this.selectedAccountNumber)\n      );\n      this.filterVisibleAccounts();\n\n      if (this.scrollLoading) {\n        const hasPrevData = this.prevDataAvailable;\n        this.prevDataAvailable = false;\n        this.scrollLoading = false;\n        await this.awaitUpdateComplete();\n        this.getAnchorNode(this.accountsLength - 1)?.scrollIntoView({\n          block: 'end',\n        });\n        this.prevDataAvailable = hasPrevData;\n        this.accountTree.scrollTop += 20;\n      } else if (this.prevScrollLoading) {\n        this.prevScrollLoading = false;\n        const accountIndex = this.accounts.length - this.accountsLength;\n        await this.awaitUpdateComplete();\n        this.getAnchorNode(accountIndex)?.scrollIntoView({ block: 'start' });\n        this.accountTree.scrollTop -= 20;\n      } else if (this.resettingInitialList) {\n        await this.awaitUpdateComplete();\n        this.scrollSelectedAccountIntoView();\n        this.resettingInitialList = false;\n      }\n    }\n  };\n\n  private async awaitUpdateComplete() {\n    await this.updateComplete;\n    await new Promise(requestAnimationFrame);\n    await new Promise(requestAnimationFrame);\n  }\n\n  private async filterVisibleAccounts() {\n    this.treeData = mapAccountsToTreeNode(\n      this.accounts,\n      this.filterString.length > 2 ? this.filterString : undefined\n    );\n\n    this.rebuildingTree = true;\n    await this.awaitUpdateComplete();\n    this.rebuildingTree = false;\n  }\n\n  filterAccountsBySearchTerm = debounce(async (filterString: string) => {\n    if (this.filterString.length < 3 && filterString.length < 3) {\n      this.filterString = filterString;\n      // no need to update tree\n      return;\n    }\n\n    this.filterString = filterString;\n\n    if (filterString.length < 3) {\n      this.resettingInitialList = true;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('account-fetch', {\n        detail: {\n          id: this.selectedAccountNumber,\n          filterString: filterString.length < 3 ? '' : filterString,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    this.loading = true;\n  }, 300);\n\n  getAnchorNode = (position: number) => {\n    const tree = this.accountTree.querySelector('ix-tree') as HTMLElement;\n    if (tree?.shadowRoot) {\n      const treeContainer = tree.shadowRoot.querySelector(\n        '.ix-tree-container'\n      ) as HTMLElement;\n      return treeContainer.children[position] as HTMLElement;\n    }\n    return null;\n  };\n\n  getMoreAccountsOnScroll = async (e: Event) => {\n    if (!this.enableFetchPage) {\n      this.enableFetchPage = true;\n      return;\n    }\n    if (this.scrollLoading || this.prevScrollLoading || this.loading) return;\n\n    const target = e.currentTarget as HTMLElement;\n    const distanceToBottom =\n      this.accountTree.scrollHeight -\n      (target.clientHeight + this.accountTree.scrollTop);\n\n    if (\n      this.accountTree.scrollTop < this.scrollTop &&\n      this.accountTree.scrollTop < 12\n    ) {\n      if (!this.prevDataAvailable) return;\n      this.prevScrollLoading = true;\n      this.accountsLength = this.accounts.length;\n      this.dispatchEvent(\n        new CustomEvent('account-fetch', {\n          detail: {\n            id: this.selectedAccountNumber,\n            filterString: this.filterString,\n            prev: true,\n          },\n          bubbles: true,\n          composed: true,\n        })\n      );\n      this.enableFetchPage = false;\n    }\n\n    if (this.accountTree.scrollTop > this.scrollTop && distanceToBottom < 2) {\n      if (!this.nextDataAvailable) return;\n      this.scrollLoading = true;\n      await this.updateComplete;\n      this.scrollTop = this.accountTree.scrollTop;\n      this.accountsLength = this.accounts.length;\n      this.dispatchEvent(\n        new CustomEvent('account-fetch', {\n          detail: {\n            id: this.selectedAccountNumber,\n            filterString: this.filterString,\n            next: true,\n          },\n          bubbles: true,\n          composed: true,\n        })\n      );\n      this.enableFetchPage = false;\n    }\n\n    this.scrollTop = this.accountTree.scrollTop;\n  };\n\n  openDialog = () => {\n    if (this.disabled) return;\n    if (this.accounts.length === 0) {\n      this.loading = true;\n      this.dispatchEvent(\n        new CustomEvent('account-fetch', {\n          detail: {\n            id: this.selectedAccountNumber,\n            filterString: '',\n          },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n    this.showDialog = true;\n    const el = this.searchInput as HTMLElement;\n    if (el) {\n      const inner = el.querySelector('md-filled-text-field');\n      const field = inner?.shadowRoot?.querySelector('md-filled-field');\n      const icon = field?.shadowRoot?.querySelector('.start') as HTMLElement;\n      if (icon) {\n        icon.style.minWidth = '32px';\n        icon.style.color = 'rgba(9, 34, 65, 0.7)';\n      }\n      if (field) {\n        const input = field.querySelector('input') as HTMLInputElement;\n        input.style.lineHeight = '24px';\n        setTimeout(() => {\n          input.focus();\n        }, 50);\n      }\n    }\n\n    this.scrollSelectedAccountIntoView();\n  };\n\n  scrollSelectedAccountIntoView = async () => {\n    await this.awaitUpdateComplete();\n    // scroll selected account into view\n    const accountIndex = this.accounts.findIndex(\n      i => i.id === this.selectedAccountNumber\n    );\n    const tree = this.accountTree.querySelector('ix-tree') as HTMLElement;\n    if (tree.shadowRoot) {\n      const treeContainer = tree.shadowRoot.querySelector(\n        '.ix-tree-container'\n      ) as HTMLElement;\n      treeContainer.children[accountIndex]?.scrollIntoView({\n        block: 'start',\n      });\n\n      // Adjust scroll position slightly to ensure can scroll\n      this.accountTree.scrollTop -= 4;\n\n      this.scrollTop = this.accountTree.scrollTop;\n    }\n  };\n\n  closeDialog = () => {\n    this.showDialog = false;\n    if (this.filterString.length > 0) {\n      this.filterString = '';\n      this.dispatchEvent(\n        new CustomEvent('account-fetch', {\n          detail: {\n            id: this.selectedAccountNumber,\n            filterString: '',\n          },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  };\n\n  private renderTree(): TemplateResult<1> {\n    if (!this.accounts.length)\n      return html`<div class=\"padded-container\">\n        <p class=\"no-results\">No Results Found</p>\n      </div>`;\n    if (this.rebuildingTree) {\n      return html``;\n    }\n    return html`\n      <ix-tree\n        aria-label=\"Account Switcher\"\n        .rootNode=${this.treeData}\n        selectedNodeId=${this.selectedAccountNumber}\n        ?allowMultiline=${true}\n        @on-tree-node-selected=${(e: CustomEvent) => {\n          if (e.detail.message.id === this.selectedAccountNumber) {\n            this.closeDialog();\n            return;\n          }\n          this.dispatchEvent(\n            new CustomEvent('account-switched', {\n              detail: e.detail.message.id,\n              bubbles: true,\n              composed: true,\n            })\n          );\n          this.loading = true;\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=${this.closeDialog}\n      disableNextClickIsFromContent=\"true\"\n    >\n      <div class=\"headline\" slot=\"headline\">\n        <span class=\"title\">Switch Account</span>\n        <ix-icon-button @click=${this.closeDialog} icon=\"close\">\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        <ix-textbox\n          id=\"searchInput\"\n          filled\n          leading-icon=\"Search\"\n          has-leading-icon\n          placeholder=\"Search\"\n          .value=${this.filterString}\n          @input=${(e: Event) => {\n            const input = e.target as HTMLInputElement;\n            this.filterAccountsBySearchTerm(input.value);\n          }}\n        ></ix-textbox>\n\n        <div\n          id=\"accountTree\"\n          style=\"${this.loading ? 'loading-container-switch' : ''}\"\n          @scroll=${this.getMoreAccountsOnScroll}\n        >\n          <div id=\"scroll-inner\">\n            ${this.prevDataAvailable\n              ? html`\n                  <div id=\"loadPrevious\">\n                    ${this.prevScrollLoading\n                      ? html`<div>\n                          <ix-progress\n                            .linear=${false}\n                            .indeterminate=${true}\n                          ></ix-progress>\n                        </div>`\n                      : nothing}\n                  </div>\n                `\n              : nothing}\n            ${this.loading\n              ? html`<div class=\"loading-container-switch\">\n                  <ix-progress\n                    .linear=${false}\n                    .indeterminate=${true}\n                  ></ix-progress>\n                </div>`\n              : this.renderTree()}\n            <div id=\"loadMore\">\n              ${this.scrollLoading\n                ? html`<div>\n                    <ix-progress\n                      .linear=${false}\n                      .indeterminate=${true}\n                    ></ix-progress>\n                  </div>`\n                : nothing}\n            </div>\n          </div>\n        </div>\n      </form>\n    </ix-dialog>`;\n  }\n\n  getSelectedAccount() {\n    const selectedAccount = findAccountById(\n      this.accounts,\n      this.selectedAccountNumber as string\n    );\n    authedUser.setSelectedAccount(selectedAccount ?? undefined);\n\n    return selectedAccount;\n  }\n\n  private renderNestedAccountStructureSelect(): TemplateResult<1> {\n    return html`\n      <ix-field ?disabled=${this.disabled} @click=${this.openDialog}>\n        <div class=\"subaccount-wrap\">\n          <span class=\"subaccount-name\">\n            ${this.selectedAccount?.displayName}\n          </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 || this.enableFilterDialog\n          ? this.renderNestedAccountStructureSelect()\n          : this.renderFlatAccountStructureSelect()}\n      </div>\n\n      ${hasSubaccounts || this.enableFilterDialog ? this.renderDialog() : null}\n    `;\n  }\n}\n"]}

package/dist/account-switcher-styles.js

@@ -25,16 +25,48 @@ export const AccountSwitcherStyles = css `
   }
   .title {
     flex: 1;
+    font-size: 1.25rem;
+    line-height: 24px;
+    font-family: var(--root-secondary-font, 'Red Hat Display', 'sans-serif');
+    font-weight: 700;
   }
-  .form {
+  #account-switcher-dialog-form {
+    padding: 8px 24px;
+  }
+  #accountTree {
+    overflow: auto;
     border: 1px solid #e0e0e0;
     border-radius: 0.25rem;
-    height: calc(488px - 3rem);
-    margin: 1rem 1.5rem 1.5rem 1.5rem;
+    height: 50vh;
+    margin: 1rem 0;
     padding: 0;
-    width: calc(560px - 3rem);
-    overflow: auto;
+    width: 512px;
+  }
+
+  #loadMore,
+  #loadPrevious {
+    display: flex;
+    justify-content: center;
+    padding: 0.5rem;
+    --md-circular-progress-size: 40px;
   }
+  ix-textbox {
+    --md-filled-text-field-top-space: 6px;
+    --md-filled-text-field-bottom-space: 6px;
+    --md-filled-text-field-container-color: rgba(245, 247, 255, 1);
+    --md-filled-field-hover-state-layer-opacity: 0;
+    --md-filled-field-hover-state-layer-opacity: 0;
+    --md-filled-field-leading-content-color: rgba(9, 34, 65, 1);
+    --md-filled-text-field-container-shape-end-end: 4px;
+    --md-filled-text-field-container-shape-end-start: 4px;
+    --md-filled-text-field-focus-active-indicator-height: 0px;
+    --md-filled-text-field-hover-active-indicator-height: 0px;
+    --md-filled-text-field-active-indicator-height: 0px;
+    --ix-icon-color: rgba(9, 34, 65, 1);
+    --md-filled-text-field-input-text-placeholder-color: rgba(9, 34, 65, 0.7);
+    --md-filled-text-field-input-text-size: 0.875rem;
+  }
+
   .account-filter {
     cursor: pointer;
     padding: 2px;
@@ -49,12 +81,30 @@ export const AccountSwitcherStyles = css `
   .padded-container {
     padding: 12px;
   }
+  .loading-container,
+  .loading-container-switch {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+  }
+  .loading-container-switch {
+    min-height: 300px;
+  }
   .stick-to-top {
     position: sticky;
     top: 0;
     background-color: rgb(200, 223, 250);
     z-index: 1;
   }
+
+  .no-results {
+    padding: 12px 0 0 24px;
+    margin: 0;
+    font-size: 14px;
+    line-height: 24px;
+    color: rgba(9, 34, 65, 0.7);
+  }
   @media only screen and (max-width: 600px) {
     :host {
       --md-outlined-field-container-shape: 0px;
@@ -63,6 +113,10 @@ export const AccountSwitcherStyles = css `
     .subaccount-wrap {
       border-radius: 0;
     }
+
+    #accountTree {
+      max-width: 100%;
+    }
   }
 `;
 //# sourceMappingURL=account-switcher-styles.js.map

package/dist/account-switcher-styles.js.map

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEvC,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    background: var(--clr-surface-container-lowest, #fff);\n    display: flex;\n    border-radius: 5px;\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  @media only screen and (max-width: 600px) {\n    :host {\n      --md-outlined-field-container-shape: 0px;\n    }\n\n    .subaccount-wrap {\n      border-radius: 0;\n    }\n  }\n`;\n"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuHvC,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    background: var(--clr-surface-container-lowest, #fff);\n    display: flex;\n    border-radius: 5px;\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    font-size: 1.25rem;\n    line-height: 24px;\n    font-family: var(--root-secondary-font, 'Red Hat Display', 'sans-serif');\n    font-weight: 700;\n  }\n  #account-switcher-dialog-form {\n    padding: 8px 24px;\n  }\n  #accountTree {\n    overflow: auto;\n    border: 1px solid #e0e0e0;\n    border-radius: 0.25rem;\n    height: 50vh;\n    margin: 1rem 0;\n    padding: 0;\n    width: 512px;\n  }\n\n  #loadMore,\n  #loadPrevious {\n    display: flex;\n    justify-content: center;\n    padding: 0.5rem;\n    --md-circular-progress-size: 40px;\n  }\n  ix-textbox {\n    --md-filled-text-field-top-space: 6px;\n    --md-filled-text-field-bottom-space: 6px;\n    --md-filled-text-field-container-color: rgba(245, 247, 255, 1);\n    --md-filled-field-hover-state-layer-opacity: 0;\n    --md-filled-field-hover-state-layer-opacity: 0;\n    --md-filled-field-leading-content-color: rgba(9, 34, 65, 1);\n    --md-filled-text-field-container-shape-end-end: 4px;\n    --md-filled-text-field-container-shape-end-start: 4px;\n    --md-filled-text-field-focus-active-indicator-height: 0px;\n    --md-filled-text-field-hover-active-indicator-height: 0px;\n    --md-filled-text-field-active-indicator-height: 0px;\n    --ix-icon-color: rgba(9, 34, 65, 1);\n    --md-filled-text-field-input-text-placeholder-color: rgba(9, 34, 65, 0.7);\n    --md-filled-text-field-input-text-size: 0.875rem;\n  }\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  .loading-container,\n  .loading-container-switch {\n    display: flex;\n    flex: 1;\n    justify-content: center;\n    align-items: center;\n  }\n  .loading-container-switch {\n    min-height: 300px;\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  .no-results {\n    padding: 12px 0 0 24px;\n    margin: 0;\n    font-size: 14px;\n    line-height: 24px;\n    color: rgba(9, 34, 65, 0.7);\n  }\n  @media only screen and (max-width: 600px) {\n    :host {\n      --md-outlined-field-container-shape: 0px;\n    }\n\n    .subaccount-wrap {\n      border-radius: 0;\n    }\n\n    #accountTree {\n      max-width: 100%;\n    }\n  }\n`;\n"]}

package/dist/ix-account-switcher-test-ids.d.ts

@@ -0,0 +1,3 @@
+export declare class IxAccountSwitcherTestIds {
+    static readonly NESTED_ACCOUNT_SWITCHER_TRIGGER = "ix-sw-nested-acc-trigger";
+}

package/dist/ix-account-switcher-test-ids.js

@@ -0,0 +1,5 @@
+// == USED IN SITE CONFIDENCE TESTS ==
+export class IxAccountSwitcherTestIds {
+}
+IxAccountSwitcherTestIds.NESTED_ACCOUNT_SWITCHER_TRIGGER = `ix-sw-nested-acc-trigger`;
+//# sourceMappingURL=ix-account-switcher-test-ids.js.map

package/dist/ix-account-switcher-test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-account-switcher-test-ids.js","sourceRoot":"","sources":["../src/ix-account-switcher-test-ids.ts"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,MAAM,OAAO,wBAAwB;;AACZ,wDAA+B,GAAG,0BAA0B,CAAC","sourcesContent":["// == USED IN SITE CONFIDENCE TESTS ==\nexport class IxAccountSwitcherTestIds {\n  public static readonly NESTED_ACCOUNT_SWITCHER_TRIGGER = `ix-sw-nested-acc-trigger`;\n}\n"]}

package/dist/ix-account-switcher.min.js

@@ -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=(e,t)=>{var i,c=e.find(e=>e.id===t);if(c)return c;for(i of e)if(i.subaccounts){var r=findAccountById(i.subaccounts,t);if(r)return r}return null},mapAccountToTreeNode=(e,t)=>{let i,c,r={expanded:!1,id:e.id,label:null!=(i=e.displayName)?i:e.name,parentId:t.id};return r.children=null==(c=e.subaccounts)?void 0:c.map(e=>mapAccountToTreeNode(e,r)),r},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,this.selected_account=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","selected_account"],storage:window.localStorage})}setAccount({accountNumber:e,email:t,name:i,givenName:c,familyName:r,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=c,this.familyName=r,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}setSelectedAccount(e){this.selected_account=e}getSelectedAccount(){return this.selected_account}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,r)=>{let o=(e,t)=>{var i,c;for(c of null!=e?e:[]){if(c.id===r)return c;if(0<(null!=(i=c.subaccounts)?i:[]).length)if(o(c.subaccounts))return c}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(){var e=findAccountById(this.accounts,this.selectedAccountNumber);return authedUser.setSelectedAccount(e),e}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 c=this.getSelectedAccount(),r=html`<ix-label-tag>Active</ix-label-tag>`;var e=this.accounts.map(e=>{var t,i=e.id===(null==c?void 0:c.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?r: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{background:var(--clr-surface-container-lowest,#fff);display:flex;border-radius:5px;--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}.subaccount-wrap{border-radius:0}}`;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};
+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-progress/ix-progress.js";import"@digital-realty/ix-select/ix-select.js";import"@digital-realty/ix-select/ix-select-option.js";import"@digital-realty/ix-textbox/ix-textbox.js";import"@digital-realty/ix-tree/ix-tree.js";import{query,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,o=e.find(e=>e.id===t);if(o)return o;for(i of e)if(i.subaccounts){var c=findAccountById(i.subaccounts,t);if(c)return c}},mapAccountToTreeNode=(e,t,i)=>{var o=null!=(o=e.displayName)?o:e.name;let c={expanded:!1,id:e.id,label:o,parentId:t.id};return i&&2<i.length&&(c.expanded=null==(o=e.subaccounts)?void 0:o.some(e=>e.displayName.toLowerCase().includes(i.toLowerCase()))),c.children=null==(t=e.subaccounts)?void 0:t.map(e=>mapAccountToTreeNode(e,c,i)),(null==(o=c.children)?void 0:o.some(e=>e.expanded))&&(c.expanded=!0),c},mapAccountsToTreeNode=(e,t)=>{let i={expanded:!0,id:"root",label:"",parentId:void 0};return i.children=e.map(e=>mapAccountToTreeNode(e,i,t)),i};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,this.selected_account=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","selected_account"],storage:window.localStorage})}setAccount({accountNumber:e,email:t,name:i,givenName:o,familyName:c,authTime:r=(new Date).getTime().toString(),accessToken:a,idToken:s,bearer:n="Bearer"}){this.account_number=e,this.email=t,this.name=i,this.givenName=o,this.familyName=c,this.auth_time=r,this.access_token=a,this.id_token=s,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}setSelectedAccount(e){this.selected_account=e}getSelectedAccount(){return this.selected_account}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 r=(e,t)=>{var i,o;for(o of null!=e?e:[]){if(o.id===c)return o;if(0<(null!=(i=o.subaccounts)?i:[]).length)if(r(o.subaccounts))return o}return null};for(var t of e)if(r([t]))return t;return null};function debounce(o,c,r=!1){let a;return function(...e){let t=this;var i=r&&!a;a&&clearTimeout(a),a=setTimeout(()=>{a=null,r||o.apply(t,e)},c),i&&o.apply(t,e)}}class IxAccountSwitcher extends LitElement{constructor(){super(...arguments),this.selectedAccountNumber="",this.accounts=[],this.prevDataAvailable=!1,this.nextDataAvailable=!1,this.disabled=!1,this.enableFilterDialog=!1,this.showDialog=!1,this.visibleAccounts=[],this.loading=!1,this.scrollLoading=!1,this.prevScrollLoading=!1,this.displayFilters=!1,this.filterString="",this.scrollTop=0,this.accountsLength=0,this.resettingInitialList=!1,this.rebuildingTree=!1,this.keyValue="",this.treeData=mapAccountsToTreeNode(this.accounts,""),this.enableFetchPage=!1,this.updated=async e=>{var t;super.updated(e),e.has("accounts")&&(this.loading=!1,this.selectedAccount||(this.selectedAccount=this.getSelectedAccount()),authedUser.setAccountHierarchy(findAccountHierarchy(this.accounts,this.selectedAccountNumber)),this.filterVisibleAccounts(),this.scrollLoading?(e=this.prevDataAvailable,this.prevDataAvailable=!1,this.scrollLoading=!1,await this.awaitUpdateComplete(),null!=(t=this.getAnchorNode(this.accountsLength-1))&&t.scrollIntoView({block:"end"}),this.prevDataAvailable=e,this.accountTree.scrollTop+=20):this.prevScrollLoading?(this.prevScrollLoading=!1,t=this.accounts.length-this.accountsLength,await this.awaitUpdateComplete(),null!=(e=this.getAnchorNode(t))&&e.scrollIntoView({block:"start"}),this.accountTree.scrollTop-=20):this.resettingInitialList&&(await this.awaitUpdateComplete(),this.scrollSelectedAccountIntoView(),this.resettingInitialList=!1))},this.filterAccountsBySearchTerm=debounce(async e=>{this.filterString.length<3&&e.length<3?this.filterString=e:((this.filterString=e).length<3&&(this.resettingInitialList=!0),this.dispatchEvent(new CustomEvent("account-fetch",{detail:{id:this.selectedAccountNumber,filterString:e.length<3?"":e},bubbles:!0,composed:!0})),this.loading=!0)},300),this.getAnchorNode=e=>{var t=this.accountTree.querySelector("ix-tree");return null!=t&&t.shadowRoot?t.shadowRoot.querySelector(".ix-tree-container").children[e]:null},this.getMoreAccountsOnScroll=async e=>{if(this.enableFetchPage){if(!(this.scrollLoading||this.prevScrollLoading||this.loading)){e=e.currentTarget,e=this.accountTree.scrollHeight-(e.clientHeight+this.accountTree.scrollTop);if(this.accountTree.scrollTop<this.scrollTop&&this.accountTree.scrollTop<12){if(!this.prevDataAvailable)return;this.prevScrollLoading=!0,this.accountsLength=this.accounts.length,this.dispatchEvent(new CustomEvent("account-fetch",{detail:{id:this.selectedAccountNumber,filterString:this.filterString,prev:!0},bubbles:!0,composed:!0})),this.enableFetchPage=!1}if(this.accountTree.scrollTop>this.scrollTop&&e<2){if(!this.nextDataAvailable)return;this.scrollLoading=!0,await this.updateComplete,this.scrollTop=this.accountTree.scrollTop,this.accountsLength=this.accounts.length,this.dispatchEvent(new CustomEvent("account-fetch",{detail:{id:this.selectedAccountNumber,filterString:this.filterString,next:!0},bubbles:!0,composed:!0})),this.enableFetchPage=!1}this.scrollTop=this.accountTree.scrollTop}}else this.enableFetchPage=!0},this.openDialog=()=>{if(!this.disabled){0===this.accounts.length&&(this.loading=!0,this.dispatchEvent(new CustomEvent("account-fetch",{detail:{id:this.selectedAccountNumber,filterString:""},bubbles:!0,composed:!0}))),this.showDialog=!0;var t=this.searchInput;if(t){var t=t.querySelector("md-filled-text-field"),t=null==(t=null==t?void 0:t.shadowRoot)?void 0:t.querySelector("md-filled-field"),e=null==(e=null==t?void 0:t.shadowRoot)?void 0:e.querySelector(".start");if(e&&(e.style.minWidth="32px",e.style.color="rgba(9, 34, 65, 0.7)"),t){let e=t.querySelector("input");e.style.lineHeight="24px",setTimeout(()=>{e.focus()},50)}}this.scrollSelectedAccountIntoView()}},this.scrollSelectedAccountIntoView=async()=>{await this.awaitUpdateComplete();var e=this.accounts.findIndex(e=>e.id===this.selectedAccountNumber),t=this.accountTree.querySelector("ix-tree");t.shadowRoot&&(null!=(t=t.shadowRoot.querySelector(".ix-tree-container").children[e])&&t.scrollIntoView({block:"start"}),this.accountTree.scrollTop-=4,this.scrollTop=this.accountTree.scrollTop)},this.closeDialog=()=>{this.showDialog=!1,0<this.filterString.length&&(this.filterString="",this.dispatchEvent(new CustomEvent("account-fetch",{detail:{id:this.selectedAccountNumber,filterString:""},bubbles:!0,composed:!0})))}}async awaitUpdateComplete(){await this.updateComplete,await new Promise(requestAnimationFrame),await new Promise(requestAnimationFrame)}async filterVisibleAccounts(){this.treeData=mapAccountsToTreeNode(this.accounts,2<this.filterString.length?this.filterString:void 0),this.rebuildingTree=!0,await this.awaitUpdateComplete(),this.rebuildingTree=!1}renderTree(){return this.accounts.length?this.rebuildingTree?html``:html`<ix-tree aria-label="Account Switcher" .rootNode="${this.treeData}" selectedNodeId="${this.selectedAccountNumber}" ?allowMultiline="${!0}" @on-tree-node-selected="${e=>{e.detail.message.id===this.selectedAccountNumber?this.closeDialog():(this.dispatchEvent(new CustomEvent("account-switched",{detail:e.detail.message.id,bubbles:!0,composed:!0})),this.loading=!0)}}"></ix-tree>`:html`<div class="padded-container"><p class="no-results">No Results Found</p></div>`}renderDialog(){return html`<ix-dialog id="account-switcher-dialog" ?open="${this.showDialog}" @closed="${this.closeDialog}" disableNextClickIsFromContent="true"><div class="headline" slot="headline"><span class="title">Switch Account</span><ix-icon-button @click="${this.closeDialog}" icon="close"></ix-icon-button></div><form id="account-switcher-dialog-form" class="form" method="dialog" slot="content"><ix-textbox id="searchInput" filled leading-icon="Search" has-leading-icon placeholder="Search" .value="${this.filterString}" @input="${e=>{e=e.target;this.filterAccountsBySearchTerm(e.value)}}"></ix-textbox><div id="accountTree" style="${this.loading?"loading-container-switch":""}" @scroll="${this.getMoreAccountsOnScroll}"><div id="scroll-inner">${this.prevDataAvailable?html`<div id="loadPrevious">${this.prevScrollLoading?html`<div><ix-progress .linear="${!1}" .indeterminate="${!0}"></ix-progress></div>`:nothing}</div>`:nothing} ${this.loading?html`<div class="loading-container-switch"><ix-progress .linear="${!1}" .indeterminate="${!0}"></ix-progress></div>`:this.renderTree()}<div id="loadMore">${this.scrollLoading?html`<div><ix-progress .linear="${!1}" .indeterminate="${!0}"></ix-progress></div>`:nothing}</div></div></div></form></ix-dialog>`}getSelectedAccount(){var e=findAccountById(this.accounts,this.selectedAccountNumber);return authedUser.setSelectedAccount(null!=e?e:void 0),e}renderNestedAccountStructureSelect(){var e;return html`<ix-field ?disabled="${this.disabled}" @click="${this.openDialog}"><div class="subaccount-wrap"><span class="subaccount-name">${null==(e=this.selectedAccount)?void 0:e.displayName}</span><ix-icon class="dd-icon">arrow_drop_down</ix-icon></div></ix-field>`}renderFlatAccountStructureSelect(){let o=this.getSelectedAccount(),c=html`<ix-label-tag>Active</ix-label-tag>`;var e=this.accounts.map(e=>{var t,i=e.id===(null==o?void 0:o.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([query("#accountTree")],IxAccountSwitcher.prototype,"accountTree",void 0),__decorate([query("#searchInput")],IxAccountSwitcher.prototype,"searchInput",void 0),__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,"prevDataAvailable",void 0),__decorate([property({type:Boolean})],IxAccountSwitcher.prototype,"nextDataAvailable",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([property({type:Boolean})],IxAccountSwitcher.prototype,"loading",void 0),__decorate([state()],IxAccountSwitcher.prototype,"scrollLoading",void 0),__decorate([state()],IxAccountSwitcher.prototype,"prevScrollLoading",void 0),__decorate([state()],IxAccountSwitcher.prototype,"displayFilters",void 0),__decorate([state()],IxAccountSwitcher.prototype,"filterString",void 0),__decorate([state()],IxAccountSwitcher.prototype,"selectedAccount",void 0),__decorate([state()],IxAccountSwitcher.prototype,"scrollTop",void 0),__decorate([state()],IxAccountSwitcher.prototype,"accountsLength",void 0),__decorate([state()],IxAccountSwitcher.prototype,"resettingInitialList",void 0),__decorate([state()],IxAccountSwitcher.prototype,"rebuildingTree",void 0),__decorate([property()],IxAccountSwitcher.prototype,"keyValue",void 0),__decorate([state()],IxAccountSwitcher.prototype,"treeData",void 0),__decorate([state()],IxAccountSwitcher.prototype,"enableFetchPage",void 0);let AccountSwitcherStyles=css`#account-switcher-dialog{position:relative;z-index:var(--ix-account-switcher-z-index,50)}.subaccount-wrap{background:var(--clr-surface-container-lowest,#fff);display:flex;border-radius:5px;--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;font-size:1.25rem;line-height:24px;font-family:var(--root-secondary-font, 'Red Hat Display', 'sans-serif');font-weight:700}#account-switcher-dialog-form{padding:8px 24px}#accountTree{overflow:auto;border:1px solid #e0e0e0;border-radius:.25rem;height:50vh;margin:1rem 0;padding:0;width:512px}#loadMore,#loadPrevious{display:flex;justify-content:center;padding:.5rem;--md-circular-progress-size:40px}ix-textbox{--md-filled-text-field-top-space:6px;--md-filled-text-field-bottom-space:6px;--md-filled-text-field-container-color:rgba(245, 247, 255, 1);--md-filled-field-hover-state-layer-opacity:0;--md-filled-field-hover-state-layer-opacity:0;--md-filled-field-leading-content-color:rgba(9, 34, 65, 1);--md-filled-text-field-container-shape-end-end:4px;--md-filled-text-field-container-shape-end-start:4px;--md-filled-text-field-focus-active-indicator-height:0px;--md-filled-text-field-hover-active-indicator-height:0px;--md-filled-text-field-active-indicator-height:0px;--ix-icon-color:rgba(9, 34, 65, 1);--md-filled-text-field-input-text-placeholder-color:rgba(9, 34, 65, 0.7);--md-filled-text-field-input-text-size:0.875rem}.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}.loading-container,.loading-container-switch{display:flex;flex:1;justify-content:center;align-items:center}.loading-container-switch{min-height:300px}.stick-to-top{position:sticky;top:0;background-color:#c8dffa;z-index:1}.no-results{padding:12px 0 0 24px;margin:0;font-size:14px;line-height:24px;color:rgba(9,34,65,.7)}@media only screen and (max-width:600px){:host{--md-outlined-field-container-shape:0px}.subaccount-wrap{border-radius:0}#accountTree{max-width:100%}}`;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};

package/dist/utils/find-account-by-id.d.ts

@@ -1,3 +1,3 @@
 import type { NestedAccounts } from '../types.js';
-declare const findAccountById: (accounts: NestedAccounts[], id: string) => NestedAccounts | null;
+declare const findAccountById: (accounts: NestedAccounts[], id: string) => NestedAccounts | undefined;
 export default findAccountById;

package/dist/utils/find-account-by-id.js

@@ -11,7 +11,7 @@ const findAccountById = (accounts, id) => {
             }
         }
     }
-    return null;
+    return undefined;
 };
 export default findAccountById;
 //# sourceMappingURL=find-account-by-id.js.map

package/dist/utils/find-account-by-id.js.map

@@ -1 +1 @@
-{"version":3,"file":"find-account-by-id.js","sourceRoot":"","sources":["../../src/utils/find-account-by-id.ts"],"names":[],"mappings":"AAEA,MAAM,eAAe,GAAG,CACtB,QAA0B,EAC1B,EAAU,EACa,EAAE;IACzB,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAChD,IAAI,OAAO,EAAE;QACX,OAAO,OAAO,CAAC;KAChB;IAED,KAAK,MAAM,CAAC,IAAI,QAAQ,EAAE;QACxB,IAAI,CAAC,CAAC,WAAW,EAAE;YACjB,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;YACxD,IAAI,YAAY,EAAE;gBAChB,OAAO,YAAY,CAAC;aACrB;SACF;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import type { NestedAccounts } from '../types.js';\n\nconst findAccountById = (\n  accounts: NestedAccounts[],\n  id: string\n): NestedAccounts | null => {\n  const account = accounts.find(a => a.id === id);\n  if (account) {\n    return account;\n  }\n\n  for (const a of accounts) {\n    if (a.subaccounts) {\n      const foundAccount = findAccountById(a.subaccounts, id);\n      if (foundAccount) {\n        return foundAccount;\n      }\n    }\n  }\n\n  return null;\n};\n\nexport default findAccountById;\n"]}
+{"version":3,"file":"find-account-by-id.js","sourceRoot":"","sources":["../../src/utils/find-account-by-id.ts"],"names":[],"mappings":"AAEA,MAAM,eAAe,GAAG,CACtB,QAA0B,EAC1B,EAAU,EACkB,EAAE;IAC9B,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAChD,IAAI,OAAO,EAAE;QACX,OAAO,OAAO,CAAC;KAChB;IAED,KAAK,MAAM,CAAC,IAAI,QAAQ,EAAE;QACxB,IAAI,CAAC,CAAC,WAAW,EAAE;YACjB,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;YACxD,IAAI,YAAY,EAAE;gBAChB,OAAO,YAAY,CAAC;aACrB;SACF;KACF;IAED,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import type { NestedAccounts } from '../types.js';\n\nconst findAccountById = (\n  accounts: NestedAccounts[],\n  id: string\n): NestedAccounts | undefined => {\n  const account = accounts.find(a => a.id === id);\n  if (account) {\n    return account;\n  }\n\n  for (const a of accounts) {\n    if (a.subaccounts) {\n      const foundAccount = findAccountById(a.subaccounts, id);\n      if (foundAccount) {\n        return foundAccount;\n      }\n    }\n  }\n\n  return undefined;\n};\n\nexport default findAccountById;\n"]}

package/dist/utils/map-accounts-to-tree.d.ts

@@ -4,5 +4,5 @@ export interface IAccount {
     parentAccountNumber?: string | null;
     name?: string;
 }
-export declare const mapAccountToTreeNode: (account: any, parentNode: IIxTreeNode) => IIxTreeNode;
-export declare const mapAccountsToTreeNode: (accounts: Array<IAccount>) => IIxTreeNode;
+export declare const mapAccountToTreeNode: (account: any, parentNode: IIxTreeNode, filterString?: string) => IIxTreeNode;
+export declare const mapAccountsToTreeNode: (accounts: Array<IAccount>, filterString?: string) => IIxTreeNode;

package/dist/utils/map-accounts-to-tree.js

@@ -1,23 +1,33 @@
 // TODO: Should use correctly typed definition rather than any
-export const mapAccountToTreeNode = (account, parentNode) => {
-    var _a, _b;
+export const mapAccountToTreeNode = (account, parentNode, filterString) => {
+    var _a, _b, _c, _d;
+    const label = (_a = account.displayName) !== null && _a !== void 0 ? _a : account.name;
     const treeNode = {
         expanded: false,
         id: account.id,
-        label: (_a = account.displayName) !== null && _a !== void 0 ? _a : account.name,
+        label,
         parentId: parentNode.id,
     };
-    treeNode.children = (_b = account.subaccounts) === null || _b === void 0 ? void 0 : _b.map((childAccount) => mapAccountToTreeNode(childAccount, treeNode));
+    if (filterString && filterString.length > 2) {
+        treeNode.expanded = (_b = account.subaccounts) === null || _b === void 0 ? void 0 : _b.some((child) => child.displayName.toLowerCase().includes(filterString.toLowerCase()));
+    }
+    treeNode.children = (_c = account.subaccounts) === null || _c === void 0 ? void 0 : _c.map((childAccount) => mapAccountToTreeNode(childAccount, treeNode, filterString));
+    // If any child node is expanded, set the parent node as expanded
+    // to reveal matching nested child nodes
+    const expandedChild = (_d = treeNode.children) === null || _d === void 0 ? void 0 : _d.some((child) => child.expanded);
+    if (expandedChild) {
+        treeNode.expanded = true;
+    }
     return treeNode;
 };
-export const mapAccountsToTreeNode = (accounts) => {
+export const mapAccountsToTreeNode = (accounts, filterString) => {
     const rootNode = {
-        expanded: false,
+        expanded: true,
         id: 'root',
         label: '',
         parentId: undefined,
     };
-    rootNode.children = accounts.map(account => mapAccountToTreeNode(account, rootNode));
+    rootNode.children = accounts.map(account => mapAccountToTreeNode(account, rootNode, filterString));
     return rootNode;
 };
 //# sourceMappingURL=map-accounts-to-tree.js.map

package/dist/utils/map-accounts-to-tree.js.map

@@ -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,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"]}
+{"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,EACvB,YAAqB,EACR,EAAE;;IACf,MAAM,KAAK,GAAG,MAAA,OAAO,CAAC,WAAW,mCAAI,OAAO,CAAC,IAAI,CAAC;IAElD,MAAM,QAAQ,GAAgB;QAC5B,QAAQ,EAAE,KAAK;QACf,EAAE,EAAE,OAAO,CAAC,EAAE;QACd,KAAK;QACL,QAAQ,EAAE,UAAU,CAAC,EAAE;KACxB,CAAC;IAEF,IAAI,YAAY,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;QAC3C,QAAQ,CAAC,QAAQ,GAAG,MAAA,OAAO,CAAC,WAAW,0CAAE,IAAI,CAAC,CAAC,KAAU,EAAE,EAAE,CAC3D,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,CACrE,CAAC;KACH;IAED,QAAQ,CAAC,QAAQ,GAAG,MAAA,OAAO,CAAC,WAAW,0CAAE,GAAG,CAAC,CAAC,YAAiB,EAAE,EAAE,CACjE,oBAAoB,CAAC,YAAY,EAAE,QAAQ,EAAE,YAAY,CAAC,CAC3D,CAAC;IAEF,iEAAiE;IACjE,wCAAwC;IACxC,MAAM,aAAa,GAAG,MAAA,QAAQ,CAAC,QAAQ,0CAAE,IAAI,CAAC,CAAC,KAAU,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE9E,IAAI,aAAa,EAAE;QACjB,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC;KAC1B;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACnC,QAAyB,EACzB,YAAqB,EACR,EAAE;IACf,MAAM,QAAQ,GAAgB;QAC5B,QAAQ,EAAE,IAAI;QACd,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,EAAE,YAAY,CAAC,CACtD,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  filterString?: string\n): IIxTreeNode => {\n  const label = account.displayName ?? account.name;\n\n  const treeNode: IIxTreeNode = {\n    expanded: false,\n    id: account.id,\n    label,\n    parentId: parentNode.id,\n  };\n\n  if (filterString && filterString.length > 2) {\n    treeNode.expanded = account.subaccounts?.some((child: any) =>\n      child.displayName.toLowerCase().includes(filterString.toLowerCase())\n    );\n  }\n\n  treeNode.children = account.subaccounts?.map((childAccount: any) =>\n    mapAccountToTreeNode(childAccount, treeNode, filterString)\n  );\n\n  // If any child node is expanded, set the parent node as expanded\n  // to reveal matching nested child nodes\n  const expandedChild = treeNode.children?.some((child: any) => child.expanded);\n\n  if (expandedChild) {\n    treeNode.expanded = true;\n  }\n\n  return treeNode;\n};\n\nexport const mapAccountsToTreeNode = (\n  accounts: Array<IAccount>,\n  filterString?: string\n): IIxTreeNode => {\n  const rootNode: IIxTreeNode = {\n    expanded: true,\n    id: 'root',\n    label: '',\n    parentId: undefined,\n  };\n\n  rootNode.children = accounts.map(account =>\n    mapAccountToTreeNode(account, rootNode, filterString)\n  );\n\n  return rootNode;\n};\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-account-switcher following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.1.32",
+  "version": "1.2.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -25,12 +25,14 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@digital-realty/ix-dialog": "^1.1.21",
-    "@digital-realty/ix-field": "^1.1.7",
-    "@digital-realty/ix-icon-button": "^1.1.8",
-    "@digital-realty/ix-label-tag": "^2.2.7",
-    "@digital-realty/ix-select": "^1.1.14",
-    "@digital-realty/ix-tree": "^3.2.15",
+    "@digital-realty/ix-dialog": "^1.2.1",
+    "@digital-realty/ix-field": "^1.2.1",
+    "@digital-realty/ix-icon-button": "^1.2.1",
+    "@digital-realty/ix-label-tag": "^2.3.1",
+    "@digital-realty/ix-progress": "^1.3.1",
+    "@digital-realty/ix-select": "^1.2.1",
+    "@digital-realty/ix-textbox": "^2.3.1",
+    "@digital-realty/ix-tree": "^3.3.1",
     "lit": "^3.2.1",
     "mobx": "^6.12.3",
     "mobx-persist-store": "^1.1.5"
@@ -105,5 +107,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "96eee928b7cd382f3b632a8cb2e7e94be6a4bbc8"
+  "gitHead": "0a87dc6e3da94a1375ec43a7ead2bfdec4913821"
 }