@digital-realty/ix-account-switcher - npm Package Compare versions

Comparing version 1.0.21 to 1.0.23

dist/ix-account-switcher.min.js

@@ -1,1 +0,1 @@
-import{LitElement,html,nothing,css}from"lit";import{elementTheme}from"@digital-realty/theme";import{__decorate}from"tslib";import"@digital-realty/ix-dialog/ix-dialog.js";import"@digital-realty/ix-field/ix-field.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-label-tag/ix-label-tag.js";import"@digital-realty/ix-select/ix-select.js";import"@digital-realty/ix-select/ix-select-option.js";import"@digital-realty/ix-tree/ix-tree.js";import{property,state}from"lit/decorators.js";const findAccountById=(t,e)=>{var i=t.find(t=>t.id===e);if(i)return i;for(const o of t)if(o.subaccounts){var c=findAccountById(o.subaccounts,e);if(c)return c}return null},mapAccountToTreeNode=(t,e)=>{const i={expanded:!1,id:t.id,label:t.name,parentId:e.id};return i.children=null==(e=t.subaccounts)?void 0:e.map(t=>mapAccountToTreeNode(t,i)),i},mapAccountsToTreeNode=t=>{const e={expanded:!1,id:"root",label:"",parentId:void 0};return e.children=t.map(t=>mapAccountToTreeNode(t,e)),e},filters=["#","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];class IxAccountSwitcher extends LitElement{constructor(){super(...arguments),this.selectedAccountNumber="",this.accounts=[],this.disabled=!1,this.showDialog=!1,this.visibleAccounts=[],this.currentFilter="#",this.loading=!1,this.displayFilters=!1}updated(t){super.updated(t),t.has("accounts")&&(this.displayFilters=1e3<=this.accounts.length),(t.has("currentFilter")||t.has("accounts"))&&this.filterVisibleAccounts()}filterVisibleAccounts(){this.loading=!0,this.displayFilters?this.visibleAccounts="#"===this.currentFilter?this.accounts.filter(t=>t.name.length&&!filters.includes(t.name[0].toUpperCase())):this.accounts.filter(t=>t.name.length&&t.name[0].toUpperCase().startsWith(this.currentFilter)):this.visibleAccounts=this.accounts,setTimeout(()=>{this.loading=!1},10)}renderTree(){return html`<ix-tree aria-label="Account Switcher" .rootNode="${mapAccountsToTreeNode(this.visibleAccounts)}" selectedNodeId="${this.selectedAccountNumber}" @on-tree-node-selected="${t=>{this.dispatchEvent(new CustomEvent("account-switched",{detail:t.detail.message.id,bubbles:!0,composed:!0})),this.showDialog=!1}}"></ix-tree>`}renderDialog(){return html`<ix-dialog id="account-switcher-dialog" ?open="${this.showDialog}" @closed="${()=>{this.showDialog=!1}}"><div class="headline" slot="headline"><span class="title">Switch Account</span><ix-icon-button @click="${()=>{this.showDialog=!1}}" icon="close"></ix-icon-button></div><form id="account-switcher-dialog-form" class="form" method="dialog" slot="content">${this.displayFilters?html`<div class="padded-container stick-to-top"><div>Filter accounts by:</div>${filters.map(e=>html`<span class="account-filter ${this.currentFilter===e?"active":""}" @click="${()=>{this.currentFilter=e}}" @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||(this.currentFilter=e,t.preventDefault())}}">${e}</span>`)}</div>`:nothing} ${this.loading?html`<div class="padded-container">Loading...</div>`:this.renderTree()}</form></ix-dialog>`}getSelectedAccount(){return findAccountById(this.accounts,this.selectedAccountNumber)}renderNestedAccountStructureSelect(){var t=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?void 0:t.name}</span><ix-icon class="dd-icon">arrow_drop_down</ix-icon></div></ix-field>`}renderFlatAccountStructureSelect(){const i=this.getSelectedAccount(),c=html`<ix-label-tag>Active</ix-label-tag>`;var t=this.accounts.map(t=>{var e=t.id===(null===i||void 0===i?void 0:i.id);return html`<ix-select-option value="${t.id}" .selected="${e}"><div slot="headline">${t.name}</div><div slot="end">${e?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);const AccountSwitcherStyles=css`#account-switcher-dialog{position:relative;z-index:var(--ix-account-switcher-z-index,50)}.subaccount-wrap{display:flex;--ix-icon-font-size:1.6rem}.subaccount-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:0;flex:1}.dd-icon{margin:-2px -5px -5px 0}.headline{display:flex}.title{flex:1}.form{border:1px solid #e0e0e0;border-radius:.25rem;height:calc(488px - 3rem);margin:1rem 1.5rem 1.5rem 1.5rem;padding:0;width:calc(560px - 3rem);overflow:auto}.account-filter{cursor:pointer;padding:2px}.account-filter:hover{text-decoration:underline}.account-filter.active{text-decoration:underline;font-weight:700}.padded-container{padding:12px}.stick-to-top{position:sticky;top:0;background-color:#c8dffa;z-index:1}`;class IxAccountSwitcherStyled extends IxAccountSwitcher{}IxAccountSwitcherStyled.styles=[elementTheme,AccountSwitcherStyles,css`:host{--md-theme-primary:var(--ix-sys-primary, blue)}`],window.customElements.define("ix-account-switcher",IxAccountSwitcherStyled);export{IxAccountSwitcherStyled};
+import{LitElement,html,nothing,css}from"lit";import{elementTheme}from"@digital-realty/theme";import{__decorate}from"tslib";import"@digital-realty/ix-dialog/ix-dialog.js";import"@digital-realty/ix-field/ix-field.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-label-tag/ix-label-tag.js";import"@digital-realty/ix-select/ix-select.js";import"@digital-realty/ix-select/ix-select-option.js";import"@digital-realty/ix-tree/ix-tree.js";import{property,state}from"lit/decorators.js";const findAccountById=(t,e)=>{var i=t.find(t=>t.id===e);if(i)return i;for(const o of t)if(o.subaccounts){var c=findAccountById(o.subaccounts,e);if(c)return c}return null},mapAccountToTreeNode=(t,e)=>{var i;const c={expanded:!1,id:t.id,label:null!=(i=t.displayName)?i:t.name,parentId:e.id};return c.children=null==(i=t.subaccounts)?void 0:i.map(t=>mapAccountToTreeNode(t,c)),c},mapAccountsToTreeNode=t=>{const e={expanded:!1,id:"root",label:"",parentId:void 0};return e.children=t.map(t=>mapAccountToTreeNode(t,e)),e},filters=["#","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];class IxAccountSwitcher extends LitElement{constructor(){super(...arguments),this.selectedAccountNumber="",this.accounts=[],this.disabled=!1,this.showDialog=!1,this.visibleAccounts=[],this.currentFilter="#",this.loading=!1,this.displayFilters=!1}updated(t){super.updated(t),t.has("accounts")&&(this.displayFilters=1e3<=this.accounts.length),(t.has("currentFilter")||t.has("accounts"))&&this.filterVisibleAccounts()}filterVisibleAccounts(){this.loading=!0,this.displayFilters?this.visibleAccounts="#"===this.currentFilter?this.accounts.filter(t=>t.name.length&&!filters.includes(t.name[0].toUpperCase())):this.accounts.filter(t=>t.name.length&&t.name[0].toUpperCase().startsWith(this.currentFilter)):this.visibleAccounts=this.accounts,setTimeout(()=>{this.loading=!1},10)}renderTree(){return html`<ix-tree aria-label="Account Switcher" .rootNode="${mapAccountsToTreeNode(this.visibleAccounts)}" selectedNodeId="${this.selectedAccountNumber}" @on-tree-node-selected="${t=>{this.dispatchEvent(new CustomEvent("account-switched",{detail:t.detail.message.id,bubbles:!0,composed:!0})),this.showDialog=!1}}"></ix-tree>`}renderDialog(){return html`<ix-dialog id="account-switcher-dialog" ?open="${this.showDialog}" @closed="${()=>{this.showDialog=!1}}"><div class="headline" slot="headline"><span class="title">Switch Account</span><ix-icon-button @click="${()=>{this.showDialog=!1}}" icon="close"></ix-icon-button></div><form id="account-switcher-dialog-form" class="form" method="dialog" slot="content">${this.displayFilters?html`<div class="padded-container stick-to-top"><div>Filter accounts by:</div>${filters.map(e=>html`<span class="account-filter ${this.currentFilter===e?"active":""}" @click="${()=>{this.currentFilter=e}}" @keydown="${t=>{"Enter"!==t.key&&" "!==t.key||(this.currentFilter=e,t.preventDefault())}}">${e}</span>`)}</div>`:nothing} ${this.loading?html`<div class="padded-container">Loading...</div>`:this.renderTree()}</form></ix-dialog>`}getSelectedAccount(){return findAccountById(this.accounts,this.selectedAccountNumber)}renderNestedAccountStructureSelect(){var t,e=this.getSelectedAccount();return html`<ix-field ?disabled="${this.disabled}" @click="${()=>{this.disabled||(this.showDialog=!0)}}"><div class="subaccount-wrap"><span class="subaccount-name">${null!=(t=null==e?void 0:e.displayName)?t:null==e?void 0:e.name}</span><ix-icon class="dd-icon">arrow_drop_down</ix-icon></div></ix-field>`}renderFlatAccountStructureSelect(){const c=this.getSelectedAccount(),o=html`<ix-label-tag>Active</ix-label-tag>`;var t=this.accounts.map(t=>{var e,i=t.id===(null===c||void 0===c?void 0:c.id);return html`<ix-select-option value="${t.id}" .selected="${i}"><div slot="headline">${null!=(e=null==t?void 0:t.displayName)?e:t.name}</div><div slot="end">${i?o:nothing}</div></ix-select-option>`});return html`<div class="account-switcher__select"><ix-select ?disabled="${this.disabled}" @request-selection="${t=>{t=t.target;this.dispatchEvent(new CustomEvent("account-switched",{detail:t.value,bubbles:!0,composed:!0}))}}">${t}</ix-select></div>`}render(){var t=this.accounts.some(t=>t.subaccounts&&0<t.subaccounts.length);return html`<div class="account-switcher-container">${t?this.renderNestedAccountStructureSelect():this.renderFlatAccountStructureSelect()}</div>${t?this.renderDialog():null}`}}__decorate([property({type:String,reflect:!0})],IxAccountSwitcher.prototype,"selectedAccountNumber",void 0),__decorate([property({type:Array})],IxAccountSwitcher.prototype,"accounts",void 0),__decorate([property({type:Boolean})],IxAccountSwitcher.prototype,"disabled",void 0),__decorate([state()],IxAccountSwitcher.prototype,"showDialog",void 0),__decorate([state()],IxAccountSwitcher.prototype,"visibleAccounts",void 0),__decorate([state()],IxAccountSwitcher.prototype,"currentFilter",void 0),__decorate([state()],IxAccountSwitcher.prototype,"loading",void 0),__decorate([state()],IxAccountSwitcher.prototype,"displayFilters",void 0);const AccountSwitcherStyles=css`#account-switcher-dialog{position:relative;z-index:var(--ix-account-switcher-z-index,50)}.subaccount-wrap{display:flex;--ix-icon-font-size:1.6rem}.subaccount-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:0;flex:1}.dd-icon{margin:-2px -5px -5px 0}.headline{display:flex}.title{flex:1}.form{border:1px solid #e0e0e0;border-radius:.25rem;height:calc(488px - 3rem);margin:1rem 1.5rem 1.5rem 1.5rem;padding:0;width:calc(560px - 3rem);overflow:auto}.account-filter{cursor:pointer;padding:2px}.account-filter:hover{text-decoration:underline}.account-filter.active{text-decoration:underline;font-weight:700}.padded-container{padding:12px}.stick-to-top{position:sticky;top:0;background-color:#c8dffa;z-index:1}`;class IxAccountSwitcherStyled extends IxAccountSwitcher{}IxAccountSwitcherStyled.styles=[elementTheme,AccountSwitcherStyles,css`:host{--md-theme-primary:var(--ix-sys-primary, blue)}`],window.customElements.define("ix-account-switcher",IxAccountSwitcherStyled);export{IxAccountSwitcherStyled};

dist/IxAccountSwitcher.js

@@ -158,2 +158,3 @@ import { __decorate } from "tslib";
     renderNestedAccountStructureSelect() {
+        var _a;
         const selectedAccount = this.getSelectedAccount();
@@ -170,3 +171,3 @@ return html `
         <div class="subaccount-wrap">
-          <span class="subaccount-name"> ${selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.name} </span>
+          <span class="subaccount-name"> ${(_a = selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.displayName) !== null && _a !== void 0 ? _a : selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.name} </span>
           <ix-icon class="dd-icon">arrow_drop_down</ix-icon>
@@ -181,5 +182,6 @@ </div>
         const options = this.accounts.map(account => {
+            var _a;
             const isSelected = account.id === (selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.id);
             return html `<ix-select-option value=${account.id} .selected=${isSelected}>
-        <div slot="headline">${account.name}</div>
+        <div slot="headline">${(_a = account === null || account === void 0 ? void 0 : account.displayName) !== null && _a !== void 0 ? _a : account.name}</div>
         <div slot="end">${isSelected ? activeLabelTag : nothing}</div>
@@ -186,0 +188,0 @@ </ix-select-option>`;

dist/types.d.ts

@@ -16,2 +16,3 @@ export interface IAccount {
     accountNumber: string;
+    displayName?: string;
     subaccounts?: NestedAccounts[];
@@ -18,0 +19,0 @@ }

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

 // TODO: Should use correctly typed definition rather than any
 export const mapAccountToTreeNode = (account, parentNode) => {
-    var _a;
+    var _a, _b;
     const treeNode = {
         expanded: false,
         id: account.id,
-        label: account.name,
+        label: (_a = account.displayName) !== null && _a !== void 0 ? _a : account.name,
         parentId: parentNode.id,
     };
-    treeNode.children = (_a = account.subaccounts) === null || _a === void 0 ? void 0 : _a.map((childAccount) => mapAccountToTreeNode(childAccount, treeNode));
+    treeNode.children = (_b = account.subaccounts) === null || _b === void 0 ? void 0 : _b.map((childAccount) => mapAccountToTreeNode(childAccount, treeNode));
     return treeNode;
@@ -12,0 +12,0 @@ };

package.json

@@ -6,3 +6,3 @@ {
   "author": "Digital Realty",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "type": "module",
@@ -110,3 +110,3 @@ "main": "dist/index.js",
   ],
-  "gitHead": "3a45ad6ea5dbc39250eac38636356468863ff094"
+  "gitHead": "5f26a1137c65de2d7851a31ec540e0a5b3929182"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52559

increased by1.38%

Lines of code

566

increased by0.53%

No dependency changes