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

Comparing version 1.0.20 to 1.0.21

dist/account-switcher-styles.js

@@ -36,3 +36,23 @@ import { css } from 'lit';
   }
+  .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;
+  }
+  .stick-to-top {
+    position: sticky;
+    top: 0;
+    background-color: rgb(200, 223, 250);
+    z-index: 1;
+  }
 `;
 //# sourceMappingURL=account-switcher-styles.js.map

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=(e,t)=>{var i=e.find(e=>e.id===t);if(i)return i;for(const o of e)if(o.subaccounts){var c=findAccountById(o.subaccounts,t);if(c)return c}return null},mapAccountToTreeNode=(e,t)=>{const i={expanded:!1,id:e.id,label:e.name,parentId:t.id};return i.children=null==(t=e.subaccounts)?void 0:t.map(e=>mapAccountToTreeNode(e,i)),i},mapAccountsToTreeNode=e=>{const t={expanded:!1,id:"root",label:"",parentId:void 0};return t.children=e.map(e=>mapAccountToTreeNode(e,t)),t};class IxAccountSwitcher extends LitElement{constructor(){super(...arguments),this.selectedAccountNumber="",this.accounts=[],this.disabled=!1,this.showDialog=!1}renderDialog(){var e=mapAccountsToTreeNode(this.accounts);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"><ix-tree hasIcons .rootNode="${e}" .selectedNodeId="${this.selectedAccountNumber}" @on-tree-node-selected="${e=>{this.showDialog=!1,this.dispatchEvent(new CustomEvent("account-switched",{detail:e.detail.message.id,bubbles:!0,composed:!0}))}}"></ix-tree></form></ix-dialog>`}getSelectedAccount(){return findAccountById(this.accounts,this.selectedAccountNumber)}renderNestedAccountStructureSelect(){var 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==e?void 0:e.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 e=this.accounts.map(e=>{var t=e.id===(null===i||void 0===i?void 0:i.id);return html`<ix-select-option value="${e.id}" .selected="${t}"><div slot="headline">${e.name}</div><div slot="end">${t?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.renderNestedAccountStructureSelect():this.renderFlatAccountStructureSelect()}</div>${e?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);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}`;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)=>{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};

dist/IxAccountSwitcher.d.ts

@@ -15,2 +15,9 @@ import '@digital-realty/ix-dialog/ix-dialog.js';
     showDialog: boolean;
+    visibleAccounts: NestedAccounts[];
+    currentFilter: string;
+    loading: boolean;
+    displayFilters: boolean;
+    updated(changedProperties: Map<string | symbol, unknown>): void;
+    private filterVisibleAccounts;
+    private renderTree;
     private renderDialog;
@@ -17,0 +24,0 @@ getSelectedAccount(): NestedAccounts | null;

dist/IxAccountSwitcher.js

@@ -13,2 +13,31 @@ import { __decorate } from "tslib";
 import { mapAccountsToTreeNode } from './utils/map-accounts-to-tree.js';
+const filters = [
+    '#',
+    'A',
+    'B',
+    'C',
+    'D',
+    'E',
+    'F',
+    'G',
+    'H',
+    'I',
+    'J',
+    'K',
+    'L',
+    'M',
+    'N',
+    'O',
+    'P',
+    'Q',
+    'R',
+    'S',
+    'T',
+    'U',
+    'V',
+    'W',
+    'X',
+    'Y',
+    'Z',
+];
 export class IxAccountSwitcher extends LitElement {
@@ -21,5 +50,52 @@ constructor() {
         this.showDialog = false;
+        this.visibleAccounts = [];
+        this.currentFilter = '#';
+        this.loading = false;
+        this.displayFilters = false;
     }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('accounts')) {
+            this.displayFilters = this.accounts.length >= 1000;
+        }
+        if (changedProperties.has('currentFilter') ||
+            changedProperties.has('accounts')) {
+            this.filterVisibleAccounts();
+        }
+    }
+    filterVisibleAccounts() {
+        this.loading = true;
+        if (!this.displayFilters) {
+            this.visibleAccounts = this.accounts;
+        }
+        else {
+            this.visibleAccounts =
+                this.currentFilter === '#'
+                    ? this.accounts.filter(account => account.name.length &&
+                        !filters.includes(account.name[0].toUpperCase()))
+                    : this.accounts.filter(account => account.name.length &&
+                        account.name[0].toUpperCase().startsWith(this.currentFilter));
+        }
+        setTimeout(() => {
+            this.loading = false;
+        }, 10);
+    }
+    renderTree() {
+        return html `
+      <ix-tree
+        aria-label="Account Switcher"
+        .rootNode=${mapAccountsToTreeNode(this.visibleAccounts)}
+        selectedNodeId=${this.selectedAccountNumber}
+        @on-tree-node-selected=${(e) => {
+            this.dispatchEvent(new CustomEvent('account-switched', {
+                detail: e.detail.message.id,
+                bubbles: true,
+                composed: true,
+            }));
+            this.showDialog = false;
+        }}
+      ></ix-tree>
+    `;
+    }
     renderDialog() {
-        const rootNode = mapAccountsToTreeNode(this.accounts);
         return html `<ix-dialog
@@ -42,2 +118,3 @@ id="account-switcher-dialog"
       </div>
+
       <form
@@ -49,15 +126,30 @@ id="account-switcher-dialog-form"
       >
-        <ix-tree
-          hasIcons
-          .rootNode=${rootNode}
-          .selectedNodeId=${this.selectedAccountNumber}
-          @on-tree-node-selected=${(e) => {
-            this.showDialog = false;
-            this.dispatchEvent(new CustomEvent('account-switched', {
-                detail: e.detail.message.id,
-                bubbles: true,
-                composed: true,
-            }));
-        }}
-        ></ix-tree>
+        ${this.displayFilters
+            ? html `
+              <div class="padded-container stick-to-top">
+                <div>Filter accounts by:</div>
+
+                ${filters.map(filter => html `
+                    <span
+                      class="account-filter ${this.currentFilter === filter
+                ? 'active'
+                : ''}"
+                      @click=${() => {
+                this.currentFilter = filter;
+            }}
+                      @keydown=${(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    this.currentFilter = filter;
+                    e.preventDefault();
+                }
+            }}
+                      >${filter}</span
+                    >
+                  `)}
+              </div>
+            `
+            : nothing}
+        ${this.loading
+            ? html `<div class="padded-container">Loading...</div>`
+            : this.renderTree()}
       </form>
@@ -138,2 +230,14 @@ </ix-dialog>`;
 ], 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);
 //# sourceMappingURL=IxAccountSwitcher.js.map

package.json

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

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

51845

increased by24.31%

Lines of code

563

increased by31.85%

No dependency changes