@digital-realty/ix-account-switcher 1.2.17 → 1.3.1

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

@@ -1 +1,228 @@
-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:l="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=l}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};class IxAccountSwitcherTestIds{}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)}}IxAccountSwitcherTestIds.NESTED_ACCOUNT_SWITCHER_TRIGGER="ix-sw-nested-acc-trigger";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.selectedNodeRef=null,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(),this.selectedNodeRef&&this.selectedNodeRef.isConnected&&(this.selectedNodeRef.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}" @selected-node-ref="${e=>{this.selectedNodeRef=e.detail}}" @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}" data-testid="${IxAccountSwitcherTestIds.NESTED_ACCOUNT_SWITCHER_TRIGGER}"><div class="subaccount-wrap"><span class="subaccount-name" data-testid="ix-account-switcher-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),__decorate([state()],IxAccountSwitcher.prototype,"selectedNodeRef",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};
+import{LitElement as e,html as t,nothing as i,css as o}from"lit";import{__decorate as s}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 as a,property as l,state as c}from"lit/decorators.js";import{makeAutoObservable as n}from"mobx";import{makePersistable as r,isHydrated as d,hydrateStore as h,clearPersistedStore as u,getPersistedStore as p}from"mobx-persist-store";const g=(e,t)=>{const i=e.find(e=>e.id===t);if(i)return i;for(const i of e)if(i.subaccounts){const e=g(i.subaccounts,t);if(e)return e}},m=(e,t,i)=>{var o,s,a,l;const c=null!==(o=e.displayName)&&void 0!==o?o:e.name,n={expanded:!1,id:e.id,label:c,parentId:t.id};i&&i.length>2&&(n.expanded=null===(s=e.subaccounts)||void 0===s?void 0:s.some(e=>e.displayName.toLowerCase().includes(i.toLowerCase()))),n.children=null===(a=e.subaccounts)||void 0===a?void 0:a.map(e=>m(e,n,i));return(null===(l=n.children)||void 0===l?void 0:l.some(e=>e.expanded))&&(n.expanded=!0),n},v=(e,t)=>{const i={expanded:!0,id:"root",label:"",parentId:void 0};return i.children=e.map(e=>m(e,i,t)),i};const f=new class{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,n(this),r(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:s,authTime:a=(new Date).getTime().toString(),accessToken:l,idToken:c,bearer:n="Bearer"}){this.account_number=e,this.email=t,this.name=i,this.givenName=o,this.familyName=s,this.auth_time=a,this.access_token=l,this.id_token=c,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 d(this)}async hydrateStore(){await h(this)}async clearStoredDate(){await u(this)}async getStoredData(){return p(this)}};class b{}b.NESTED_ACCOUNT_SWITCHER_TRIGGER="ix-sw-nested-acc-trigger";class x extends e{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=v(this.accounts,""),this.enableFetchPage=!1,this.selectedNodeRef=null,this.updated=async e=>{var t,i;if(super.updated(e),e.has("accounts"))if(this.loading=!1,this.selectedAccount||(this.selectedAccount=this.getSelectedAccount()),f.setAccountHierarchy(((e,t)=>{const i=(e,o)=>{var s;for(const o of null!=e?e:[]){if(o.id===t)return o;if((null!==(s=o.subaccounts)&&void 0!==s?s:[]).length>0&&i(o.subaccounts))return o}return null};for(const t of e)if(i([t]))return t;return null})(this.accounts,this.selectedAccountNumber)),this.filterVisibleAccounts(),this.scrollLoading){const e=this.prevDataAvailable;this.prevDataAvailable=!1,this.scrollLoading=!1,await this.awaitUpdateComplete(),null===(t=this.getAnchorNode(this.accountsLength-1))||void 0===t||t.scrollIntoView({block:"end"}),this.prevDataAvailable=e,this.accountTree.scrollTop+=20}else if(this.prevScrollLoading){this.prevScrollLoading=!1;const e=this.accounts.length-this.accountsLength;await this.awaitUpdateComplete(),null===(i=this.getAnchorNode(e))||void 0===i||i.scrollIntoView({block:"start"}),this.accountTree.scrollTop-=20}else this.resettingInitialList&&(await this.awaitUpdateComplete(),this.scrollSelectedAccountIntoView(),this.resettingInitialList=!1)},this.filterAccountsBySearchTerm=function(e,t,i=!1){let o;return function(...s){const a=this,l=i&&!o;o&&clearTimeout(o),o=setTimeout(()=>{o=null,i||e.apply(a,s)},t),l&&e.apply(a,s)}}(async e=>{this.filterString.length<3&&e.length<3?this.filterString=e:(this.filterString=e,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=>{const t=this.accountTree.querySelector("ix-tree");if(null==t?void 0:t.shadowRoot){return t.shadowRoot.querySelector(".ix-tree-container").children[e]}return null},this.getMoreAccountsOnScroll=async e=>{if(!this.enableFetchPage)return void(this.enableFetchPage=!0);if(this.scrollLoading||this.prevScrollLoading||this.loading)return;const t=e.currentTarget,i=this.accountTree.scrollHeight-(t.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&&i<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},this.openDialog=()=>{var e,t;if(this.disabled)return;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;const i=this.searchInput;if(i){const o=i.querySelector("md-filled-text-field"),s=null===(e=null==o?void 0:o.shadowRoot)||void 0===e?void 0:e.querySelector("md-filled-field"),a=null===(t=null==s?void 0:s.shadowRoot)||void 0===t?void 0:t.querySelector(".start");if(a&&(a.style.minWidth="32px",a.style.color="rgba(9, 34, 65, 0.7)"),s){const e=s.querySelector("input");e.style.lineHeight="24px",setTimeout(()=>{e.focus()},50)}}this.scrollSelectedAccountIntoView()},this.scrollSelectedAccountIntoView=async()=>{await this.awaitUpdateComplete(),this.selectedNodeRef&&this.selectedNodeRef.isConnected&&(this.selectedNodeRef.scrollIntoView({block:"start"}),this.accountTree.scrollTop-=4,this.scrollTop=this.accountTree.scrollTop)},this.closeDialog=()=>{this.showDialog=!1,this.filterString.length>0&&(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=v(this.accounts,this.filterString.length>2?this.filterString:void 0),this.rebuildingTree=!0,await this.awaitUpdateComplete(),this.rebuildingTree=!1}renderTree(){return this.accounts.length?this.rebuildingTree?t``:t`
+      <ix-tree
+        aria-label="Account Switcher"
+        .rootNode=${this.treeData}
+        selectedNodeId=${this.selectedAccountNumber}
+        ?allowMultiline=${!0}
+        @selected-node-ref=${e=>{this.selectedNodeRef=e.detail}}
+        @on-tree-node-selected=${e=>{e.detail.message.id!==this.selectedAccountNumber?(this.dispatchEvent(new CustomEvent("account-switched",{detail:e.detail.message.id,bubbles:!0,composed:!0})),this.loading=!0):this.closeDialog()}}
+      ></ix-tree>
+    `:t`<div class="padded-container">
+        <p class="no-results">No Results Found</p>
+      </div>`}renderDialog(){return t`<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=>{const t=e.target;this.filterAccountsBySearchTerm(t.value)}}
+        ></ix-textbox>
+
+        <div
+          id="accountTree"
+          style="${this.loading?"loading-container-switch":""}"
+          @scroll=${this.getMoreAccountsOnScroll}
+        >
+          <div id="scroll-inner">
+            ${this.prevDataAvailable?t`
+                  <div id="loadPrevious">
+                    ${this.prevScrollLoading?t`<div>
+                          <ix-progress
+                            .linear=${!1}
+                            .indeterminate=${!0}
+                          ></ix-progress>
+                        </div>`:i}
+                  </div>
+                `:i}
+            ${this.loading?t`<div class="loading-container-switch">
+                  <ix-progress
+                    .linear=${!1}
+                    .indeterminate=${!0}
+                  ></ix-progress>
+                </div>`:this.renderTree()}
+            <div id="loadMore">
+              ${this.scrollLoading?t`<div>
+                    <ix-progress
+                      .linear=${!1}
+                      .indeterminate=${!0}
+                    ></ix-progress>
+                  </div>`:i}
+            </div>
+          </div>
+        </div>
+      </form>
+    </ix-dialog>`}getSelectedAccount(){const e=g(this.accounts,this.selectedAccountNumber);return f.setSelectedAccount(null!=e?e:void 0),e}renderNestedAccountStructureSelect(){var e;return t`
+      <ix-field
+        ?disabled=${this.disabled}
+        @click=${this.openDialog}
+        data-testid=${b.NESTED_ACCOUNT_SWITCHER_TRIGGER}
+      >
+        <div class="subaccount-wrap">
+          <span
+            class="subaccount-name"
+            data-testid="ix-account-switcher-subaccount-name"
+          >
+            ${null===(e=this.selectedAccount)||void 0===e?void 0:e.displayName}
+          </span>
+          <ix-icon class="dd-icon">arrow_drop_down</ix-icon>
+        </div>
+      </ix-field>
+    `}renderFlatAccountStructureSelect(){const e=this.getSelectedAccount(),o=t`<ix-label-tag>Active</ix-label-tag>`,s=this.accounts.map(s=>{var a;const l=s.id===(null==e?void 0:e.id);return t`<ix-select-option value=${s.id} .selected=${l}>
+        <div slot="headline">${null!==(a=null==s?void 0:s.displayName)&&void 0!==a?a:s.name}</div>
+        <div slot="end">${l?o:i}</div>
+      </ix-select-option>`});return t`<div class="account-switcher__select">
+      <ix-select
+        ?disabled=${this.disabled}
+        @request-selection=${e=>{const t=e.target;this.dispatchEvent(new CustomEvent("account-switched",{detail:t.value,bubbles:!0,composed:!0}))}}
+      >
+        ${s}
+      </ix-select>
+    </div>`}render(){const e=this.accounts.some(e=>e.subaccounts&&e.subaccounts.length>0);return t`
+      <div class="account-switcher-container">
+        ${e||this.enableFilterDialog?this.renderNestedAccountStructureSelect():this.renderFlatAccountStructureSelect()}
+      </div>
+
+      ${e||this.enableFilterDialog?this.renderDialog():null}
+    `}}s([a("#accountTree")],x.prototype,"accountTree",void 0),s([a("#searchInput")],x.prototype,"searchInput",void 0),s([l({type:String,reflect:!0})],x.prototype,"selectedAccountNumber",void 0),s([l({type:Array})],x.prototype,"accounts",void 0),s([l({type:Boolean})],x.prototype,"prevDataAvailable",void 0),s([l({type:Boolean})],x.prototype,"nextDataAvailable",void 0),s([l({type:Boolean})],x.prototype,"disabled",void 0),s([l({type:Boolean})],x.prototype,"enableFilterDialog",void 0),s([c()],x.prototype,"showDialog",void 0),s([c()],x.prototype,"visibleAccounts",void 0),s([l({type:Boolean})],x.prototype,"loading",void 0),s([c()],x.prototype,"scrollLoading",void 0),s([c()],x.prototype,"prevScrollLoading",void 0),s([c()],x.prototype,"displayFilters",void 0),s([c()],x.prototype,"filterString",void 0),s([c()],x.prototype,"selectedAccount",void 0),s([c()],x.prototype,"scrollTop",void 0),s([c()],x.prototype,"accountsLength",void 0),s([c()],x.prototype,"resettingInitialList",void 0),s([c()],x.prototype,"rebuildingTree",void 0),s([l()],x.prototype,"keyValue",void 0),s([c()],x.prototype,"treeData",void 0),s([c()],x.prototype,"enableFetchPage",void 0),s([c()],x.prototype,"selectedNodeRef",void 0);const y=o`
+  #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 0px;
+  }
+  .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: 0.25rem;
+    height: 50vh;
+    margin: 1rem 0;
+    padding: 0;
+    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;
+  }
+  .account-filter:hover {
+    text-decoration: underline;
+  }
+  .account-filter.active {
+    text-decoration: underline;
+    font-weight: bold;
+  }
+  .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;
+    }
+
+    .subaccount-wrap {
+      border-radius: 0;
+    }
+
+    #accountTree {
+      max-width: 100%;
+    }
+  }
+`;class w extends x{}w.styles=[y,o`
+      :host {
+        --md-theme-primary: var(--md-sys-color-primary, blue);
+      }
+    `],window.customElements.define("ix-account-switcher",w);export{w as IxAccountSwitcherStyled};

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-account-switcher following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.2.17",
+  "version": "1.3.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -19,54 +19,48 @@
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
     "build": "tsc && npm run analyze -- --exclude dist && rollup -c",
     "prepublish": "tsc && npm run analyze -- --exclude dist",
-    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "lint": "eslint --ext .ts,.html . && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "test": "tsc && wtr --coverage",
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@digital-realty/ix-dialog": "^1.2.12",
-    "@digital-realty/ix-field": "^1.2.4",
-    "@digital-realty/ix-icon-button": "^1.2.7",
-    "@digital-realty/ix-label-tag": "^2.3.3",
-    "@digital-realty/ix-progress": "^1.3.4",
-    "@digital-realty/ix-select": "^1.2.8",
-    "@digital-realty/ix-textbox": "^2.3.8",
-    "@digital-realty/ix-tree": "^3.3.9",
+    "@digital-realty/ix-dialog": "^1.3.1",
+    "@digital-realty/ix-field": "^1.3.1",
+    "@digital-realty/ix-icon-button": "^1.3.1",
+    "@digital-realty/ix-label-tag": "^2.4.1",
+    "@digital-realty/ix-progress": "^1.4.1",
+    "@digital-realty/ix-select": "^1.3.1",
+    "@digital-realty/ix-textbox": "^2.4.1",
+    "@digital-realty/ix-tree": "^3.4.1",
     "lit": "^3.2.1",
     "mobx": "^6.12.3",
     "mobx-persist-store": "^1.1.5"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
-    "@open-wc/eslint-config": "^9.2.1",
     "@open-wc/testing": "^3.1.6",
     "@rollup/plugin-replace": "^5.0.5",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "@typescript-eslint/parser": "^5.48.0",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.58.2",
+    "@typescript-eslint/parser": "^8.58.2",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-rollup": "^0.6.2",
     "@web/test-runner": "^0.20.2",
-    "concurrently": "^9.1.0",
-    "eslint": "^8.31.0",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.39.4",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
     "rollup": "^4.29.1",
-    "rollup-plugin-minify-html-literals": "^1.2.6",
     "rollup-plugin-summary": "^2.0.0",
-    "rollup-plugin-uglify": "^6.0.4",
     "tslib": "^2.3.1",
     "typescript": "^4.5.2"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",
-    "extends": [
-      "@open-wc",
-      "prettier"
-    ],
     "plugins": [
       "@typescript-eslint"
     ],
@@ -107,5 +101,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "4cd8803f4c5f3b3833ae6ebb5791f73a057863f8"
+  "gitHead": "da06737d6707fd3d4ef898ba0fa632e7b3ed8019"
 }