@digital-realty/ix-account-switcher 1.0.28 → 1.0.29

package/dist/IxAccountSwitcher.js

@@ -10,6 +10,8 @@ import { html, LitElement, nothing } from 'lit';
 import { property, 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',
@@ -58,6 +60,7 @@ export class IxAccountSwitcher extends LitElement {
         }
         if (changedProperties.has('currentFilter') ||
             changedProperties.has('accounts')) {
+            authedUser.setAccountHierarchy(findAccountHierarchy(this.accounts, this.selectedAccountNumber));
             this.filterVisibleAccounts();
         }
     }

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';\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\">\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\n          ? this.renderNestedAccountStructureSelect()\n          : this.renderFlatAccountStructureSelect()}\n      </div>\n\n      ${hasSubaccounts ? 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-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  @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        @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\">\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\n          ? this.renderNestedAccountStructureSelect()\n          : this.renderFlatAccountStructureSelect()}\n      </div>\n\n      ${hasSubaccounts ? this.renderDialog() : null}\n    `;\n  }\n}\n"]}

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

@@ -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";let findAccountById=(t,e)=>{var i,c=t.find(t=>t.id===e);if(c)return c;for(i of t)if(i.subaccounts){var o=findAccountById(i.subaccounts,e);if(o)return o}return null},mapAccountToTreeNode=(t,e)=>{let i,c,o={expanded:!1,id:t.id,label:null!=(i=t.displayName)?i:t.name,parentId:e.id};return o.children=null==(c=t.subaccounts)?void 0:c.map(t=>mapAccountToTreeNode(t,o)),o},mapAccountsToTreeNode=t=>{let 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(){let 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.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);let AccountSwitcherStyles=css`#account-switcher-dialog{position:relative;z-index:var(--ix-account-switcher-z-index,50)}.subaccount-wrap{display:flex;--ix-icon-font-size:1.6rem}.subaccount-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:0;flex:1}.dd-icon{margin:-2px -5px -5px 0}.headline{display:flex}.title{flex:1}.form{border:1px solid #e0e0e0;border-radius:.25rem;height:calc(488px - 3rem);margin:1rem 1.5rem 1.5rem 1.5rem;padding:0;width:calc(560px - 3rem);overflow:auto}.account-filter{cursor:pointer;padding:2px}.account-filter:hover{text-decoration:underline}.account-filter.active{text-decoration:underline;font-weight:700}.padded-container{padding:12px}.stick-to-top{position:sticky;top:0;background-color:#c8dffa;z-index:1}`;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};
+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";import{makeAutoObservable}from"mobx";import{makePersistable,isHydrated,hydrateStore,clearPersistedStore,getPersistedStore}from"mobx-persist-store";let findAccountById=(t,e)=>{var i,r=t.find(t=>t.id===e);if(r)return r;for(i of t)if(i.subaccounts){var c=findAccountById(i.subaccounts,e);if(c)return c}return null},mapAccountToTreeNode=(t,e)=>{let i,r,c={expanded:!1,id:t.id,label:null!=(i=t.displayName)?i:t.name,parentId:e.id};return c.children=null==(r=t.subaccounts)?void 0:r.map(t=>mapAccountToTreeNode(t,c)),c},mapAccountsToTreeNode=t=>{let e={expanded:!1,id:"root",label:"",parentId:void 0};return e.children=t.map(t=>mapAccountToTreeNode(t,e)),e};class AuthedUserState{constructor(){this.account_number="",this.email="",this.name="",this.auth_time="",this.access_token="",this.id_token="",this.bearer="",this.account_hierarchy=void 0,makeAutoObservable(this),makePersistable(this,{name:"x-auth",properties:["email","account_number","name","auth_time","id_token","access_token","bearer","account_hierarchy"],storage:window.localStorage})}setAccount({accountNumber:t,email:e,name:i,authTime:r=(new Date).getTime().toString(),accessToken:c,idToken:o,bearer:s="Bearer"}){this.account_number=t,this.email=e,this.name=i,this.auth_time=r,this.access_token=c,this.id_token=o,this.bearer=s}getAccount(){return{accountNumber:this.account_number,email:this.email,name:this.name,authTime:this.auth_time}}getAccountNumber(){return this.account_number}getAccessToken(){return this.access_token}getBearer(){return this.bearer}getIdToken(){return this.id_token}setAccountHierarchy(t){this.account_hierarchy=t}getAccountHierarchy(){return this.account_hierarchy}get isHydrated(){return isHydrated(this)}async hydrateStore(){await hydrateStore(this)}async clearStoredDate(){await clearPersistedStore(this)}async getStoredData(){return getPersistedStore(this)}}let authedUser=new AuthedUserState,findAccountHierarchy=(t,c)=>{let o=(t,e)=>{var i,r;for(r of null!=t?t:[]){if(r.id===c)return r;if(0<(null!=(i=r.subaccounts)?i:[]).length)if(o(r.subaccounts))return r}return null};for(var e of t)if(o([e]))return e;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.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"))&&(authedUser.setAccountHierarchy(findAccountHierarchy(this.accounts,this.selectedAccountNumber)),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(){let r=this.getSelectedAccount(),c=html`<ix-label-tag>Active</ix-label-tag>`;var t=this.accounts.map(t=>{var e,i=t.id===(null==r?void 0:r.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?c: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);let AccountSwitcherStyles=css`#account-switcher-dialog{position:relative;z-index:var(--ix-account-switcher-z-index,50)}.subaccount-wrap{display:flex;--ix-icon-font-size:1.6rem}.subaccount-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:0;flex:1}.dd-icon{margin:-2px -5px -5px 0}.headline{display:flex}.title{flex:1}.form{border:1px solid #e0e0e0;border-radius:.25rem;height:calc(488px - 3rem);margin:1rem 1.5rem 1.5rem 1.5rem;padding:0;width:calc(560px - 3rem);overflow:auto}.account-filter{cursor:pointer;padding:2px}.account-filter:hover{text-decoration:underline}.account-filter.active{text-decoration:underline;font-weight:700}.padded-container{padding:12px}.stick-to-top{position:sticky;top:0;background-color:#c8dffa;z-index:1}`;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/state/authedUser.d.ts

@@ -1,3 +1,4 @@
+import { NestedAccounts } from '../types.js';
 declare class AuthedUserState {
     constructor();
     account_number: string;
@@ -7,12 +8,15 @@ declare class AuthedUserState {
     access_token: string;
     id_token: string;
     bearer: string;
+    account_hierarchy?: NestedAccounts;
     setAccount({ accountNumber, email, name, authTime, accessToken, idToken, bearer, }: Record<string, string>): void;
     getAccount(): Record<string, string>;
     getAccountNumber(): string;
     getAccessToken(): string;
     getBearer(): string;
     getIdToken(): string;
+    setAccountHierarchy(accountHierarchy: any): void;
+    getAccountHierarchy(): NestedAccounts | undefined;
     get isHydrated(): boolean;
     hydrateStore(): Promise<void>;
     clearStoredDate(): Promise<void>;

package/dist/state/authedUser.js

@@ -9,6 +9,7 @@ class AuthedUserState {
         this.access_token = '';
         this.id_token = '';
         this.bearer = '';
+        this.account_hierarchy = undefined;
         makeAutoObservable(this);
         makePersistable(this, {
             name: 'x-auth',
@@ -20,6 +21,7 @@ class AuthedUserState {
                 'id_token',
                 'access_token',
                 'bearer',
+                'account_hierarchy',
             ],
             storage: window.localStorage,
         });
@@ -53,6 +55,12 @@ class AuthedUserState {
     getIdToken() {
         return this.id_token;
     }
+    setAccountHierarchy(accountHierarchy) {
+        this.account_hierarchy = accountHierarchy;
+    }
+    getAccountHierarchy() {
+        return this.account_hierarchy;
+    }
     get isHydrated() {
         return isHydrated(this);
     }

package/dist/state/authedUser.js.map

@@ -1 +1 @@
-{"version":3,"file":"authedUser.js","sourceRoot":"","sources":["../../src/state/authedUser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,MAAM,CAAC;AAC1C,OAAO,EACL,eAAe,EACf,UAAU,EACV,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,eAAe;IACnB;QAiBO,mBAAc,GAAW,EAAE,CAAC;QAE5B,UAAK,GAAW,EAAE,CAAC;QAEnB,SAAI,GAAW,EAAE,CAAC;QAElB,cAAS,GAAW,EAAE,CAAC;QAEvB,iBAAY,GAAW,EAAE,CAAC;QAE1B,aAAQ,GAAW,EAAE,CAAC;QAEtB,WAAM,GAAW,EAAE,CAAC;QA5BzB,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,eAAe,CAAC,IAAI,EAAE;YACpB,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,OAAO;gBACP,gBAAgB;gBAChB,MAAM;gBACN,WAAW;gBACX,UAAU;gBACV,cAAc;gBACd,QAAQ;aACT;YACD,OAAO,EAAE,MAAM,CAAC,YAAY;SAC7B,CAAC,CAAC;IACL,CAAC;IAgBM,UAAU,CAAC,EAChB,aAAa,EACb,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,EAC1C,WAAW,EACX,OAAO,EACP,MAAM,GAAG,QAAQ,GACM;QACvB,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;QACpC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC1B,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC;QAChC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAEM,UAAU;QACf,OAAO;YACL,aAAa,EAAE,IAAI,CAAC,cAAc;YAClC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,SAAS;SACzB,CAAC;IACJ,CAAC;IAEM,gBAAgB;QACrB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAEM,cAAc;QACnB,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAEM,SAAS;QACd,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAEM,UAAU;QACf,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,MAAM,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,MAAM,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,KAAK,CAAC,aAAa;QACjB,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;CACF;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC","sourcesContent":["import { makeAutoObservable } from 'mobx';\nimport {\n  makePersistable,\n  isHydrated,\n  hydrateStore,\n  clearPersistedStore,\n  getPersistedStore,\n} from 'mobx-persist-store';\n\nclass AuthedUserState {\n  constructor() {\n    makeAutoObservable(this);\n    makePersistable(this, {\n      name: 'x-auth',\n      properties: [\n        'email',\n        'account_number',\n        'name',\n        'auth_time',\n        'id_token',\n        'access_token',\n        'bearer',\n      ],\n      storage: window.localStorage,\n    });\n  }\n\n  public account_number: string = '';\n\n  public email: string = '';\n\n  public name: string = '';\n\n  public auth_time: string = '';\n\n  public access_token: string = '';\n\n  public id_token: string = '';\n\n  public bearer: string = '';\n\n  public setAccount({\n    accountNumber,\n    email,\n    name,\n    authTime = new Date().getTime().toString(),\n    accessToken,\n    idToken,\n    bearer = 'Bearer',\n  }: Record<string, string>) {\n    this.account_number = accountNumber;\n    this.email = email;\n    this.name = name;\n    this.auth_time = authTime;\n    this.access_token = accessToken;\n    this.id_token = idToken;\n    this.bearer = bearer;\n  }\n\n  public getAccount(): Record<string, string> {\n    return {\n      accountNumber: this.account_number,\n      email: this.email,\n      name: this.name,\n      authTime: this.auth_time,\n    };\n  }\n\n  public getAccountNumber(): string {\n    return this.account_number;\n  }\n\n  public getAccessToken(): string {\n    return this.access_token;\n  }\n\n  public getBearer(): string {\n    return this.bearer;\n  }\n\n  public getIdToken(): string {\n    return this.id_token;\n  }\n\n  get isHydrated() {\n    return isHydrated(this);\n  }\n\n  async hydrateStore() {\n    await hydrateStore(this);\n  }\n\n  async clearStoredDate() {\n    await clearPersistedStore(this);\n  }\n\n  async getStoredData() {\n    return getPersistedStore(this);\n  }\n}\n\nexport const authedUser = new AuthedUserState();\n"]}
+{"version":3,"file":"authedUser.js","sourceRoot":"","sources":["../../src/state/authedUser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,MAAM,CAAC;AAC1C,OAAO,EACL,eAAe,EACf,UAAU,EACV,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAG5B,MAAM,eAAe;IACnB;QAkBO,mBAAc,GAAW,EAAE,CAAC;QAE5B,UAAK,GAAW,EAAE,CAAC;QAEnB,SAAI,GAAW,EAAE,CAAC;QAElB,cAAS,GAAW,EAAE,CAAC;QAEvB,iBAAY,GAAW,EAAE,CAAC;QAE1B,aAAQ,GAAW,EAAE,CAAC;QAEtB,WAAM,GAAW,EAAE,CAAC;QAEpB,sBAAiB,GAAoB,SAAS,CAAC;QA/BpD,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,eAAe,CAAC,IAAI,EAAE;YACpB,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,OAAO;gBACP,gBAAgB;gBAChB,MAAM;gBACN,WAAW;gBACX,UAAU;gBACV,cAAc;gBACd,QAAQ;gBACR,mBAAmB;aACpB;YACD,OAAO,EAAE,MAAM,CAAC,YAAY;SAC7B,CAAC,CAAC;IACL,CAAC;IAkBM,UAAU,CAAC,EAChB,aAAa,EACb,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,EAC1C,WAAW,EACX,OAAO,EACP,MAAM,GAAG,QAAQ,GACM;QACvB,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;QACpC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC1B,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC;QAChC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAEM,UAAU;QACf,OAAO;YACL,aAAa,EAAE,IAAI,CAAC,cAAc;YAClC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,SAAS;SACzB,CAAC;IACJ,CAAC;IAEM,gBAAgB;QACrB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAEM,cAAc;QACnB,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAEM,SAAS;QACd,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAEM,UAAU;QACf,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAEM,mBAAmB,CAAC,gBAAqB;QAC9C,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,CAAC;IAC5C,CAAC;IAEM,mBAAmB;QACxB,OAAO,IAAI,CAAC,iBAAiB,CAAC;IAChC,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,MAAM,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,MAAM,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,KAAK,CAAC,aAAa;QACjB,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;CACF;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC","sourcesContent":["import { makeAutoObservable } from 'mobx';\nimport {\n  makePersistable,\n  isHydrated,\n  hydrateStore,\n  clearPersistedStore,\n  getPersistedStore,\n} from 'mobx-persist-store';\nimport { NestedAccounts } from '../types.js';\n\nclass AuthedUserState {\n  constructor() {\n    makeAutoObservable(this);\n    makePersistable(this, {\n      name: 'x-auth',\n      properties: [\n        'email',\n        'account_number',\n        'name',\n        'auth_time',\n        'id_token',\n        'access_token',\n        'bearer',\n        'account_hierarchy',\n      ],\n      storage: window.localStorage,\n    });\n  }\n\n  public account_number: string = '';\n\n  public email: string = '';\n\n  public name: string = '';\n\n  public auth_time: string = '';\n\n  public access_token: string = '';\n\n  public id_token: string = '';\n\n  public bearer: string = '';\n\n  public account_hierarchy?: NestedAccounts = undefined;\n\n  public setAccount({\n    accountNumber,\n    email,\n    name,\n    authTime = new Date().getTime().toString(),\n    accessToken,\n    idToken,\n    bearer = 'Bearer',\n  }: Record<string, string>) {\n    this.account_number = accountNumber;\n    this.email = email;\n    this.name = name;\n    this.auth_time = authTime;\n    this.access_token = accessToken;\n    this.id_token = idToken;\n    this.bearer = bearer;\n  }\n\n  public getAccount(): Record<string, string> {\n    return {\n      accountNumber: this.account_number,\n      email: this.email,\n      name: this.name,\n      authTime: this.auth_time,\n    };\n  }\n\n  public getAccountNumber(): string {\n    return this.account_number;\n  }\n\n  public getAccessToken(): string {\n    return this.access_token;\n  }\n\n  public getBearer(): string {\n    return this.bearer;\n  }\n\n  public getIdToken(): string {\n    return this.id_token;\n  }\n\n  public setAccountHierarchy(accountHierarchy: any) {\n    this.account_hierarchy = accountHierarchy;\n  }\n\n  public getAccountHierarchy() {\n    return this.account_hierarchy;\n  }\n\n  get isHydrated() {\n    return isHydrated(this);\n  }\n\n  async hydrateStore() {\n    await hydrateStore(this);\n  }\n\n  async clearStoredDate() {\n    await clearPersistedStore(this);\n  }\n\n  async getStoredData() {\n    return getPersistedStore(this);\n  }\n}\n\nexport const authedUser = new AuthedUserState();\n"]}

package/dist/utils/account-hierarchy-util.d.ts

@@ -0,0 +1,2 @@
+import { NestedAccounts } from '../types.js';
+export declare const findAccountHierarchy: (accounts: NestedAccounts[], id: string) => NestedAccounts | null;

package/dist/utils/account-hierarchy-util.js

@@ -0,0 +1,30 @@
+// Function to find the hierarchy given an ID
+export const findAccountHierarchy = (accounts, id) => {
+    // Helper function to recursively search through subAccounts
+    const search = (rootAccounts, rootAccountId) => {
+        var _a;
+        for (const account of rootAccounts !== null && rootAccounts !== void 0 ? rootAccounts : []) {
+            // Check if the current account matches the ID
+            if (account.id === id) {
+                return account;
+            }
+            // If it has subAccounts, search recursively
+            if (((_a = account.subaccounts) !== null && _a !== void 0 ? _a : []).length > 0) {
+                const result = search(account.subaccounts, rootAccountId);
+                if (result) {
+                    return account; // Return the parent account if we found the target in subAccounts
+                }
+            }
+        }
+        return null;
+    };
+    // Iterate over the top-level accounts
+    for (const account of accounts) {
+        const result = search([account], id);
+        if (result) {
+            return account; // Return the top-level account if we found the target
+        }
+    }
+    return null; // If no account is found
+};
+//# sourceMappingURL=account-hierarchy-util.js.map

package/dist/utils/account-hierarchy-util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"account-hierarchy-util.js","sourceRoot":"","sources":["../../src/utils/account-hierarchy-util.ts"],"names":[],"mappings":"AAEA,6CAA6C;AAC7C,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,QAA0B,EAC1B,EAAU,EACa,EAAE;IACzB,4DAA4D;IAC5D,MAAM,MAAM,GAAG,CACb,YAA0C,EAC1C,aAAqB,EACrB,EAAE;;QACF,KAAK,MAAM,OAAO,IAAI,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,EAAE;YACxC,8CAA8C;YAC9C,IAAI,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE;gBACrB,OAAO,OAAO,CAAC;aAChB;YACD,4CAA4C;YAC5C,IAAI,CAAC,MAAA,OAAO,CAAC,WAAW,mCAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC1C,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;gBAC1D,IAAI,MAAM,EAAE;oBACV,OAAO,OAAO,CAAC,CAAC,kEAAkE;iBACnF;aACF;SACF;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,sCAAsC;IACtC,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE;QAC9B,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;QACrC,IAAI,MAAM,EAAE;YACV,OAAO,OAAO,CAAC,CAAC,sDAAsD;SACvE;KACF;IAED,OAAO,IAAI,CAAC,CAAC,yBAAyB;AACxC,CAAC,CAAC","sourcesContent":["import { NestedAccounts } from '../types.js';\n\n// Function to find the hierarchy given an ID\nexport const findAccountHierarchy = (\n  accounts: NestedAccounts[],\n  id: string\n): NestedAccounts | null => {\n  // Helper function to recursively search through subAccounts\n  const search = (\n    rootAccounts: NestedAccounts[] | undefined,\n    rootAccountId: string\n  ) => {\n    for (const account of rootAccounts ?? []) {\n      // Check if the current account matches the ID\n      if (account.id === id) {\n        return account;\n      }\n      // If it has subAccounts, search recursively\n      if ((account.subaccounts ?? []).length > 0) {\n        const result = search(account.subaccounts, rootAccountId);\n        if (result) {\n          return account; // Return the parent account if we found the target in subAccounts\n        }\n      }\n    }\n    return null;\n  };\n\n  // Iterate over the top-level accounts\n  for (const account of accounts) {\n    const result = search([account], id);\n    if (result) {\n      return account; // Return the top-level account if we found the target\n    }\n  }\n\n  return null; // If no account is found\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.0.28",
+  "version": "1.0.29",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -106,5 +106,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "705b8d4a1375a3ce54b1562c65d8636b98b14466"
+  "gitHead": "9a25f9f576fb54406d36300515fb66d5823627a4"
 }