npm - @digital-realty/ui-user-management - Versions diffs - 11.0.5 → 11.0.6 - Mend

@digital-realty/ui-user-management 11.0.5 → 11.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/sw.js +1 -1
package/dist/sw.js.map +1 -1
package/dist/ui-user-management.js +24 -20
package/dist/ui-user-management6.js +1 -1
package/package.json +3 -3

package/dist/ui-user-management6.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{__decorate as s}from"tslib";import{LitElement as Z,html as c,nothing as h,css as G}from"lit";import{property as l,query as $,queryAsync as L,customElement as U,state as u}from"lit/decorators.js";import{MobxLitElement as j}from"@adobe/lit-mobx";import{reaction as $t}from"mobx";import{elementTheme as X}from"@digital-realty/theme";import{cache as wt}from"lit/directives/cache.js";import{x as tt,U as et,T as k,y as it,z as lt,C as ut,t as ot,q as w,B as ht,d as st,A as K,D as P,E as z,u as A,F as pt,G as It,e as mt,v as Tt,H as vt,I as H,J as St,K as Ot,L as Ut,M as _t,s as at,N as gt,O as Lt,P as B,Q as bt,j as nt,S as xt,V as kt,W as Pt,X as yt,Y as At,h as Mt,c as ct,o as Bt,l as Vt,w as Ft,n as Gt,g as ft,R as rt}from"./ui-user-management.js";import"@digital-realty/ix-tabs/ix-tabs.js";import"@digital-realty/ix-tabs/ix-primary-tab.js";import"@digital-realty/ix-button/ix-button.js";import"@digital-realty/ix-date/ix-date.js";import"@digital-realty/ix-menu/ix-menu.js";import"@digital-realty/ix-menu/ix-menu-item.js";import"@digital-realty/ix-progress/ix-progress.js";import{findChildNodeById as jt,updateNodeCheckedStatus as Ht,isAnyNodeChecked as Kt}from"@digital-realty/ix-generic-tree";import"@digital-realty/ix-phone-input/ix-phone-input.js";import"@digital-realty/ix-dialog/ix-dialog.js";import"@digital-realty/ix-textbox/ix-textbox.js";import"@digital-realty/ix-checkbox/ix-checkbox.js";import"@digital-realty/ix-phone-number/ix-phone-number.js";import"@digital-realty/ix-select/ix-select.js";import"@digital-realty/ix-select/ix-select-option.js";import"@digital-realty/ix-divider/ix-divider.js";import"@digital-realty/ix-tree/ix-tree.js";import{computePosition as zt,offset as qt,flip as Yt,shift as Wt}from"@floating-ui/dom";import"@digital-realty/ix-icon/ix-icon.js";import"./ui-user-management5.js";import"toastify-js";import"@microsoft/applicationinsights-web";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"graphql-request";import"oidc-client-ts";import"i18next";import"lit-i18n";import"@vaadin/router";import"libphonenumber-js";import"lit/directives/class-map.js";import"validator";import"@digital-realty/ix-multi-select/ix-multi-select.js";import"lit/directives/repeat.js";import"@digital-realty/ix-card/ix-card.js";import"lodash.debounce";import"@digital-realty/ix-generic-tree/ix-generic-tree.js";import"@digital-realty/ix-accordion/ix-accordion.js";import"@material/web/icon/icon.js";const Jt={ACTIVE:"Active",DRAFT:"Draft",INVITED:"Invited",REMOVED:"Removed",SUSPENDED:"Suspended",DECLINED:"Declined"},Rt={ACTIVE:"check_circle",DRAFT:"edit",INVITED:"mail",REMOVED:"delete_forever",SUSPENDED:"warning",DECLINED:"do_not_disturb_on"},m={ACTIVE:"ACTIVE",DRAFT:"DRAFT",INVITED:"INVITED",DECLINED:"DECLINED",SUSPENDED:"SUSPENDED",REMOVED:"REMOVED"},dt={ACTIVE:"#4CAF50",DRAFT:"#1456E0",SUSPENDED:"#DB0028",INVITED:"rgb(255, 152, 0)",REMOVED:"rgb(109, 117, 140)",DECLINED:"rgb(109, 117, 140)"},I={ROLES:{key:"roles",text:"ROLES AND PORTAL ACCESS"},USERFLAGS:{key:"flags",text:"USER FLAGS"}};class Nt{}Nt.TAB=t=>`user-details-navigation-tab-${t}`;let T=class extends Z{constructor(){super(...arguments),this.disableEscapeKeyBinding=this.disableEscapeKey.bind(this),this.view=I.ROLES,this.showFlags=!1,this.showRoles=!0}get viewIndex(){return this.view===I.ROLES?0:1}connectedCallback(){super.connectedCallback(),this.tabs&&this.tabs.addEventListener("keydown",this.disableEscapeKeyBinding)}disconnectedCallback(){super.disconnectedCallback(),this.tabs&&this.tabs.removeEventListener("keydown",this.disableEscapeKeyBinding)}disableEscapeKey(t){return t.which===27?!1:null}firstUpdated(){this.tabsAsync.then(t=>{t.activeTabIndex=this.viewIndex})}dispatchNavigationEvent(t){this.navigate&&(this.view=t,this.navigate(t))}renderNavigation(t){return c`<ix-primary-tab @click="${()=>this.dispatchNavigationEvent(t)}" .activeDisabled="${t.key===this.view.key}" data-testid="${Nt.TAB(t.key)}"><span class="font-bold flex items-center uppercase">${t.text}</span> </ix-primary-tab>`}render(){return!this.showRoles&&!this.showFlags?c`${h}`:c`<ix-tabs id="navigation-tabs" hideScrollBar left-align data-testid="ix-tabs-navigation"> ${this.renderNavigation(I.ROLES)} ${this.showFlags?this.renderNavigation(I.USERFLAGS):h} </ix-tabs> <div class="user-detail-navigation"></div>`}};T.styles=[tt,et,k,X],s([l({type:Object})],T.prototype,"navigate",void 0),s([l({type:Object})],T.prototype,"view",void 0),s([l({type:Boolean})],T.prototype,"showFlags",void 0),s([l({type:Boolean})],T.prototype,"showRoles",void 0),s([$("#navigation-tabs")],T.prototype,"tabs",void 0),s([L("#navigation-tabs")],T.prototype,"tabsAsync",void 0),T=s([U("user-details-navigation")],T);var y;(function(t){t[t.hidden=0]="hidden",t[t.disabled=1]="disabled",t[t.enabled=2]="enabled"})(y\|\|(y={}));const q={Active:"ACTIVE",Draft:"DRAFT",Invited:"INVITED",Suspended:"SUSPENDED",Removed:"REMOVED",Declined:"DECLINED"},Qt=async(t,e)=>{const i={contactId:e,accountNumber:t};return await it.create({accountAssociationInput:i})},Y=async(t,e,i)=>{const o=(await it.get({accountNumber:t,contactId:e})).find(a=>a.accountNumber===t);if(!(o!=null&&o.id))throw new Error("Account data not found.");return await it.update({id:o.id,accountAssociationStatusUpdate:{status:i}})},Zt=t=>{const e=Object.keys(m);return t.sort((i,o)=>e.indexOf(i.status)-e.indexOf(o.status))};var V;(function(t){t.Checked="CHECKED",t.Indeterminate="INDETERMINATE",t.Inherited="INHERITED",t.Unchecked="UNCHECKED"})(V\|\|(V={}));const Xt=async(t,e)=>await ut.get({contactId:t,accountNumber:e}),te=async t=>{for(const e of t)ut.delete({id:e.id})},ee=async(t,e,i)=>{const o={accountNumber:e,contactId:t,flagLocations:[]};return i.forEach(a=>{const n={flag:a.key,locations:[]};a.items.forEach(r=>{if(!r.customerKnownSpaceName&&r.label!=="Global")throw new Error("Customer Known Space Name is missing.");n.locations.push({id:r.id,customerKnownName:r.customerKnownSpaceName,permissionStatus:r.checked?V.Checked:V.Unchecked})}),o.flagLocations.push(n)}),lt.saveAccountFlagInventory(o)},Dt=async(t,e)=>await ot.get({contactId:t,accountNumber:e}),Et=async t=>{for(const e of t)ot.delete({id:e.id})},ie=async(t,e,i)=>{const o={accountNumber:e,contactId:t,roleLocations:[]};return i.forEach(a=>{const n={roleId:a.key,locations:[]};a.items.forEach(r=>{if(!r.customerKnownSpaceName&&r.label!=="Global")throw new Error("Customer Known Space Name is missing.");n.locations.push({id:r.id,customerKnownName:r.customerKnownSpaceName,permissionStatus:r.checked?V.Checked:V.Unchecked})}),o.roleLocations.push(n)}),lt.saveAccountRoleInventory(o)};class oe{constructor(e){(this._host=e).addController(this)}hostConnected(){}hostDisconnected(){}hostUpdate(){}async add(e,i){try{const o=await Qt(e,i);if(o)return await Y(e,i,q.Active),w("Account association added.",3e3,"center"),o;throw new Error("Account association could not be created.")}catch(o){return null}}async restore(e,i){try{await Y(e,i,q.Active),w("Account association restored.",3e3,"center")}catch(o){throw new Error("Account association could not be restored.")}}async suspend(e,i){try{await Y(e,i,q.Suspended),w("Account association suspended.",3e3,"center")}catch(o){throw new Error("Account association could not be suspended.")}}async remove(e,i){try{await Y(e,i,q.Removed);const o=(await Dt(i,e)).filter(n=>n.isActive),a=await Xt(i,e);await Et(o),await te(a),w("Account association removed.",3e3,"center")}catch(o){throw new Error("Account association could not be removed.")}}}class se extends ht{async refresh(){const e=await st.get({id:this.get().id});e&&this.set(e)}}const f=new se({});class p{}p.BTN_RESTORE_ACCESS="udc-btn-restore-access",p.BTN_SUSPEND_ACCESS="udc-btn-suspend-access",p.BTN_REMOVE_ACCOUNT="udc-btn-remove-account",p.BTN_RESEND_INVITE="udc-btn-resend-invite",p.BTN_DRAFT_CANCEL="udc-btn-draft-cancel",p.BTN_DRAFT_SAVE="udc-btn-draft-save",p.ACCOUNT_NAME="udc-account-name",p.ACCOUNT_STATUS="udc-account-status",p.BTN_SAVE="udc-btn-save",p.BTN_CANCEL="udc-btn-cancel";let b=class extends j{constructor(){super(...arguments),this.accountAssociationController=new oe(this),this.roles=[],this.saveControls=y.hidden,this.isLoading=!1,this.readonly=!1,this.actionsDisabled=!1,this.removeAccountDialogOpen=!1,this.suspendingAccess=!1,this.restoringAccess=!1,this.removingAccount=!1,this.savingChanges=!1,this.cancellingChanges=!1,this.mobileMenuOpen=!1}statusIcon(t){return Rt[t]}dispatchUpdateEvent(){this.dispatchEvent(new CustomEvent(K.UpdateChanges,{detail:"no-toast"}))}dispatchReloadAccountEvent(t=!1){var e;this.dispatchEvent(new CustomEvent(K.ReloadAccount,{detail:{accountNumber:(e=this.account)===null\|\|e===void 0?void 0:e.accountNumber,overrideUnsavedChanges:t}}))}async addAccount(){var t,e,i;this.actionsDisabled=!0,this.savingChanges=!0,!((t=this.contact)===null\|\|t===void 0)&&t.accounts.some(o=>{var a;return o.accountNumber===((a=this.account)===null\|\|a===void 0?void 0:a.accountNumber)&&o.status==="REMOVED"})?await this.accountAssociationController.restore((e=this.account)===null\|\|e===void 0?void 0:e.accountNumber,this.contact.id):await this.accountAssociationController.add((i=this.account)===null\|\|i===void 0?void 0:i.accountNumber,this.contact.id),this.emitRoleUpdates&&await this.emitRoleUpdates(),await f.refresh(),P.clear(),this.dispatchUpdateEvent(),this.actionsDisabled=!1,this.savingChanges=!1}async restoreAccount(){var t;this.actionsDisabled=!0,this.restoringAccess=!0,await this.accountAssociationController.restore((t=this.account)===null\|\|t===void 0?void 0:t.accountNumber,this.contact.id),await f.refresh(),this.dispatchReloadAccountEvent(!0),this.actionsDisabled=!1,this.restoringAccess=!1}async suspendAccount(){var t;this.actionsDisabled=!0,this.suspendingAccess=!0,await this.accountAssociationController.suspend((t=this.account)===null\|\|t===void 0?void 0:t.accountNumber,this.contact.id),await f.refresh(),this.dispatchReloadAccountEvent(!0),this.actionsDisabled=!1,this.suspendingAccess=!1}async removeAccount(){var t;this.actionsDisabled=!0,this.removingAccount=!0,await this.accountAssociationController.remove((t=this.account)===null\|\|t===void 0?void 0:t.accountNumber,this.contact.id),await f.refresh(),this.actionsDisabled=!1,this.removingAccount=!1,this.removeAccountDialogOpen=!1,this.dispatchReloadAccountEvent()}cancelChanges(){var t,e,i;this.actionsDisabled=!0;const o=`${P.get().accountNumber}:${(t=this.contact)===null\|\|t===void 0?void 0:t.id}`;if(z.remove(o),!(!((e=this.contact)===null\|\|e===void 0)&&e.accounts.find(a=>{var n;return a.accountNumber===((n=this.account)===null\|\|n===void 0?void 0:n.accountNumber)}))){const[a]=((i=this.contact)===null\|\|i===void 0?void 0:i.accounts)\|\|[];a&&(this.account=a)}this.dispatchReloadAccountEvent(!0),this.actionsDisabled=!1}openMobileOptions(){this.mobileMenuOpen=!this.mobileMenuOpen}resendInvite(){w("Invitation has been re-sent.",3e3,"center")}renderRemoveAccountButton(){return c`<ix-button appearance="filled" class="cancel" ?disabled="${this.actionsDisabled}" @click="${()=>{this.removeAccountDialogOpen=!0}}" id="remove-account-button" data-testid="${p.BTN_REMOVE_ACCOUNT}"><span class="remove-account">Remove Account</span></ix-button>`}renderRestoreSuspendRemove(){var t,e,i;return this.isLoading?h:this.saveControls?h:this.readonly?h:((t=this.account)===null\|\|t===void 0?void 0:t.status)===m.SUSPENDED?c`<ix-button @click="${this.restoreAccount}" ?disabled="${this.actionsDisabled&&!this.restoringAccess}" ?submitting="${this.restoringAccess}" id="restore-account-button" class="mr-1" data-testid="${p.BTN_RESTORE_ACCESS}"> <span class="font-bold">Restore Access</span> </ix-button> ${this.renderRemoveAccountButton()}`:((e=this.account)===null\|\|e===void 0?void 0:e.status)===m.ACTIVE?c`<ix-button id="suspend-button" class="suspend-button cancel" appearance="outlined" ?disabled="${this.actionsDisabled&&!this.suspendingAccess}" ?submitting="${this.suspendingAccess}" @click="${this.suspendAccount}" data-testid="${p.BTN_SUSPEND_ACCESS}"> Suspend Access </ix-button> ${this.renderRemoveAccountButton()}`:((i=this.account)===null\|\|i===void 0?void 0:i.status)===m.INVITED?c` ${this.renderRemoveAccountButton()}`:h}renderRestoreSuspendRemoveMobile(){var t,e,i,o,a;return this.isLoading?h:this.saveControls?h:A.isProfileOfLoggedInUser((t=this.contact)===null\|\|t===void 0?void 0:t.email)?h:!A.hasExternalUserUpdate((e=this.account)===null\|\|e===void 0?void 0:e.accountNumber)&&!A.hasExternalUserCreate((i=this.account)===null\|\|i===void 0?void 0:i.accountNumber)?h:((o=this.account)===null\|\|o===void 0?void 0:o.status)===m.SUSPENDED?c`<ix-menu-item @click="${this.restoreAccount}"><span class="font-bold">Restore Access</span> </ix-menu-item> <ix-menu-item @click="${()=>{this.removeAccountDialogOpen=!0}}"><span class="font-bold">Remove Account</span> </ix-menu-item>`:((a=this.account)===null\|\|a===void 0?void 0:a.status)===m.ACTIVE?c`<ix-menu-item @click="${this.suspendAccount}"><span class="font-bold">Suspend Access</span> </ix-menu-item> <ix-menu-item @click="${()=>{this.removeAccountDialogOpen=!0}}"><span class="font-bold">Remove Account</span> </ix-menu-item>`:h}renderResendInviteButton(){var t;return((t=this.account)===null\|\|t===void 0?void 0:t.status)!==m.INVITED\|\|this.isLoading?h:c`<ix-button appearance="filled" @click="${()=>this.resendInvite()}" id="resend-invite-button" data-testid="${p.BTN_RESEND_INVITE}"><span class="font-bold">Resend <br>Invite</span> </ix-button>`}renderButtons(){return this.isLoading\|\|this.saveControls===y.hidden?h:c`<div id="draft-assignment-controls" class="panel-button-container"> <ix-button appearance="outlined" ?disabled="${this.actionsDisabled}" ?submitting="${this.cancellingChanges}" @click="${()=>this.cancelChanges()}" id="cancel-role-button" data-testid="${p.BTN_CANCEL}"> Cancel </ix-button> <ix-button id="save-role-button" ?disabled="${this.saveControls===y.disabled\|\|this.actionsDisabled}" ?submitting="${this.savingChanges}" @click="${this.dispatchUpdateEvent}" data-testid="${p.BTN_SAVE}"> Save </ix-button> </div>`}renderDraftButtons(){return this.isLoading?h:c`<div id="draft-association-controls" class="panel-button-container"> <ix-button id="cancel-role-button" appearance="outlined" ?disabled="${this.actionsDisabled}" @click="${this.cancelChanges}" data-testid="${p.BTN_DRAFT_CANCEL}"> Cancel </ix-button> <ix-button appearance="filled" id="save-role-button" ?disabled="${(this.actionsDisabled\|\|this.saveControls===y.disabled\|\|this.saveControls===y.hidden)&&!this.savingChanges}" ?submitting="${this.actionsDisabled}" @click="${this.addAccount}" data-testid="${p.BTN_DRAFT_SAVE}"> Save </ix-button> </div>`}renderStatus(){var t,e;if(!this.account\|\|this.isLoading)return h;const i=this.account.status;return i===m.REMOVED?c`<div class="panel-status"> <p class="dlr-text-small" data-testid="${p.ACCOUNT_STATUS}">Account Removed</p> <ix-icon filled>${this.statusIcon(i)}</ix-icon> </div>`:i===m.DECLINED?c`<div class="panel-status"> <p class="dlr-text-small" data-testid="${p.ACCOUNT_STATUS}"> Account Invitation Declined By User </p> <ix-icon filled>${this.statusIcon(i)}</ix-icon> </div>`:i===m.SUSPENDED?c`<div class="panel-status"> <p class="dlr-text-small account-status-suspend" data-testid="${p.ACCOUNT_STATUS}"> Suspended on <ix-date type="static" value="${(t=this.account)===null\|\|t===void 0?void 0:t.statusUpdateAt}"></ix-date> </p> <ix-icon filled class="warning text-2xl">${this.statusIcon(i)}</ix-icon> </div>`:this.account.status===m.INVITED?c`<div class="panel-status"> <p class="dlr-text-small" data-testid="${p.ACCOUNT_STATUS}"> Invited on <ix-date type="static" value="${(e=this.account)===null\|\|e===void 0?void 0:e.statusUpdateAt}"></ix-date> </p> <ix-icon filled style="${`color: ${dt[i]}`}">${this.statusIcon(i)}</ix-icon> </div>`:this.account.status===m.DRAFT?c`<div class="panel-status"> <p class="dlr-text-small" data-testid="${p.ACCOUNT_STATUS}">Draft</p> <ix-icon class="text-2xl" filled style="${`color: ${dt[i]}`}">${this.statusIcon(i)}</ix-icon> </div>`:c`<div class="panel-status"> <ix-icon style="color:#4caf50" filled class="mt-1 text-2xl">${this.statusIcon(i)}</ix-icon> <p class="dlr-text-small" data-testid="${p.ACCOUNT_STATUS}">Active</p> </div>`}renderRemoveAccountConfirmation(){return c`<changes-confirmation id="remove-account-dialog" data-testid="remove-account-dialog" class="z-50 relative" ?isOpen="${this.removeAccountDialogOpen}" ?submitting="${this.removingAccount}" .headerText="${"The user will no longer be able to access this account."}" .confirmationButtonText="${"Remove Account"}" @confirm="${()=>{this.removeAccount()}}" @cancel="${()=>{this.removeAccountDialogOpen=!1}}"> </changes-confirmation>`}render(){var t;return this.account?c`<div> <div class="flex items-center p-4 pb-0 lg:p-2 justify-between user-status"> <div class="flex items-center user-status-header"> <h1 class="dlr-text-heading lg:pl-4" data-testid="${p.ACCOUNT_NAME}"> ${(t=this.account.displayName)!==null&&t!==void 0?t:this.account.name} </h1> <span style="position:relative"> <ix-icon id="anchor" filled class="cursor-pointer mobile-options" @click="${this.openMobileOptions}">more_vert</ix-icon> <ix-menu anchor="anchor" ?open="${this.mobileMenuOpen}"> ${this.renderRestoreSuspendRemoveMobile()} </ix-menu> </span> </div> <div class="user-details-controls flex items-center pr-4"> ${this.renderStatus()} ${this.renderResendInviteButton()} ${this.renderRestoreSuspendRemove()} ${this.account.status===m.DRAFT?this.renderDraftButtons():this.renderButtons()} ${this.renderRemoveAccountConfirmation()} </div> </div> </div>`:h}};b.styles=[tt,et,k,X],s([l()],b.prototype,"account",void 0),s([l()],b.prototype,"contact",void 0),s([l()],b.prototype,"roles",void 0),s([l()],b.prototype,"saveControls",void 0),s([l()],b.prototype,"isLoading",void 0),s([l({type:Boolean})],b.prototype,"readonly",void 0),s([u()],b.prototype,"actionsDisabled",void 0),s([u()],b.prototype,"removeAccountDialogOpen",void 0),s([u()],b.prototype,"suspendingAccess",void 0),s([u()],b.prototype,"restoringAccess",void 0),s([u()],b.prototype,"removingAccount",void 0),s([u()],b.prototype,"savingChanges",void 0),s([u()],b.prototype,"cancellingChanges",void 0),s([u()],b.prototype,"mobileMenuOpen",void 0),s([l()],b.prototype,"emitRoleUpdates",void 0),b=s([U("user-details-controls")],b);const ae=G`@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf) format('truetype')}.material-icons{font-family:'Material Icons';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr}ix-dialog{--md-dialog-container-color:#fff}ix-icon-button{--md-sys-color-on-surface-variant:var(--md-sys-color-primary)}ix-select{--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd;--md-menu-container-color:#fff}ix-select.thick{--md-menu-container-shape:10px}ix-select.slim{--md-outlined-field-bottom-space:2px;--md-outlined-field-top-space:2px}ix-button{--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd}ix-button .disabled{color:var(--md-sys-text-color-disabled)}.btn_primary{--md-filled-button-container-color:var(--md-sys-color-primary)}.btn_primary ix-icon{color:var(--md-sys-color-on-primary)}.btn_secondary{--md-filled-button-container-color:var(--md-sys-color-secondary)}.btn_secondary ix-icon{color:var(--md-sys-color-on-secondary)}.btn_tertiary{--md-filled-button-container-color:var(--md-sys-color-tertiary)}.btn_tertiary ix-icon{color:var(--md-sys-color-on-tertiary)}.btn_danger{--md-filled-button-container-color:var(--md-sys-color-error)}.btn_danger ix-icon{color:var(--md-sys-color-on-error)}.icon-btn_primary ix-icon{color:var(--md-sys-color-primary)}.icon-btn_secondary ix-icon{color:var(--md-sys-color-secondary)}.icon-btn_tertiary ix-icon{color:var(--md-sys-color-tertiary)}.icon-btn_danger ix-icon{color:var(--md-sys-color-error)}ix-icon.icon-lg{--ix-icon-font-size:32px}.dialog-form{min-width:500px;display:flex;flex-direction:column;justify-content:space-between;padding:8px 24px 20px}.dialog-form .textfield{width:100%}.dialog-form.sm{min-width:560px}.dialog-form__textbox{padding-top:1rem}.dialog-actions{display:flex;justify-content:flex-end;padding:8px 15px 8px 20px}@media only screen and (min-width:5px) and (max-width:600px){ix-dialog{--md-dialog-container-shape:6px}}@media only screen and (min-width:601px){ix-dialog{--md-dialog-container-shape:3px}}.removed-account-container{padding:1.5rem;display:flex;flex-direction:column;gap:24px}.removed-account-row{display:flex;flex-direction:column;overflow-wrap:anywhere}.removed-account-title{margin:0;text-transform:uppercase;color:rgba(9,34,65,.7)}.removed-account-text{margin:0;color:#092241}`;let E=class extends Z{constructor(){super(...arguments),this.roles=[],this.userRoleAssignments=[]}get dateText(){return this.status==="DECLINED"?"Account Invitation Declined By User On":"Account Removed On"}renderRoles(){var t;return this.roles&&((t=this.role)===null\|\|t===void 0?void 0:t.length)===1?c`${this.roles[0].name}`:this.userRoleAssignments.map(e=>c`${e.name}<br>`)}update(t){(t.has("contactID")\|\|t.has("accountNumber"))&&this.getRoleAssignments(),super.update(t)}async getRoleAssignments(){if(!this.contactID)return;const t=await ot.get({contactId:this.contactID,accountNumber:this.accountNumber}),e=new Set(t.map(i=>i.roleId));this.userRoleAssignments=this.roles.filter(i=>e.has(i.id))}render(){return c`<div class="removed-account-container"> <div class="removed-account-row"> <span class="removed-account-title">${this.dateText}</span> <p class="removed-account-text"> <ix-date type="static" value="${this.changedAt}"></ix-date> </p> </div> ${this.status==="REMOVED"?c`<div class="removed-account-row"> <span class="removed-account-title">Account Removed by</span> <p class="removed-account-text">${this.changedBy}</p> </div>`:h} <div class="removed-account-row"> <span class="removed-account-title">Roles</span> <p class="removed-account-text">${this.renderRoles()}</p> </div> </div>`}};E.styles=[ae],s([l({type:String})],E.prototype,"status",void 0),s([l({type:String})],E.prototype,"accountNumber",void 0),s([l({type:String})],E.prototype,"contactID",void 0),s([l({type:Array,attribute:!1})],E.prototype,"roles",void 0),s([l({type:String,attribute:!1})],E.prototype,"changedBy",void 0),s([l({type:String,attribute:!1})],E.prototype,"changedAt",void 0),s([u()],E.prototype,"userRoleAssignments",void 0),E=s([U("user-account-removed-declined")],E);class ne extends ht{getAsRoles(){return pt(this.get())}removeRole(e){const i=this.get().filter(o=>o.roleId!==e);this.set(i)}}const N=new ne([]);class ce{constructor(e){(this._host=e).addController(this)}hostConnected(){}hostDisconnected(){}hostUpdate(){}async removeRoleAssignment(e){try{await Et(e),w("Role removed.",3e3,"center")}catch(i){throw new Error("Failed to remove role assignment.")}}}class F{}F.DIALOG_ADD_ROLE="user-details-panel-dialog-add-role",F.DIALOG_REMOVE_ROLE="user-details-panel-dialog-remove-role",F.PROGRESS_BAR="user-details-panel-progress-bar";let v=class extends j{constructor(){super(...arguments),this.roleAssignmentController=new ce(this),this.onSuccess=w,this.roles=[],this.userFlagTrees=[],this.assignedRoleTrees=[],this.readonly=!1,this.isPanelLoading=!1,this.roleAssignments=[],this.viewRoute=I.ROLES,this.saveControls=y.hidden,this.flagUpdates=[],this.roleUpdates=[],this.activeRoleId="",this.permissionData=[],this.removeRoleDialogOpen=!1,this.redundantStatuses=["DECLINED","REMOVED"],this.emitRoleUpdates=async()=>{const t=await this.userDetailsAssignments;t&&t.emitUpdates()},this.saveAssignments=async t=>{var e,i,o;const a=`${(e=this.account)===null\|\|e===void 0?void 0:e.accountNumber}:${(i=this.contact)===null\|\|i===void 0?void 0:i.id}`,n=z.capture(a);if(!this.flagUpdates.length&&n){z.lock(a);for(const O of this.userFlagTrees)O.updateService=new It,n.forEach(Ct=>{var J;const Q=jt(O.rootNode,Ct.id);Q&&(Q.checked=!0,Ht(Q,O.rootNode),(J=O.updateService)===null\|\|J===void 0\|\|J.update(O.rootNode))}),O.updateService.updates.length&&this.flagUpdates.push({key:O.label,items:O.updateService.updates})}const r=await this.controlsComponent;if(r.actionsDisabled=!0,r.savingChanges=!0,!this.roleUpdates.length&&!this.flagUpdates.length)return;const g={role:void 0,flag:void 0};this.roleUpdates.length&&(g.role=await ie(this.contact.id,this.account.accountNumber,this.roleUpdates),N.clear(),this.roleUpdates=[]),this.flagUpdates.length&&(g.flag=await ee(this.contact.id,this.account.accountNumber,this.flagUpdates),g.flag&&z.remove(a),this.flagUpdates=[]),this.dispatchReloadAccountEvent((o=this.account)===null\|\|o===void 0?void 0:o.accountNumber,!0),r.actionsDisabled=!1,r.savingChanges=!1,this.isPanelLoading=!1;const W=(t==null?void 0:t.detail)==="no-toast";if(g.role===null&&g.flag===null){mt("Could not save changes.",3e3,"center");return}(g.flag\|\|g.role)&&!W&&w("Changes saved.",3e3,"center"),(g.flag===null\|\|g.role===null)&&mt(`Could not save ${g.flag?"flag":g.role?"":"role"} assignments.`,3e3,"center")},this.dispatchOpenConfirmation=()=>{this.removeRoleDialogOpen=!0},this.dispatchReloadAccountEvent=async(t,e=!1)=>{this.resetForm(),this.dispatchEvent(new CustomEvent(K.ReloadAccount,{detail:{accountNumber:t,overrideUnsavedChanges:e}}))}}updated(t){super.updated(t),window.sessionStorage.setItem(Tt.SessionStorage.HasOutstandingChanges,this.isDirty?"true":"false"),t.has("account")&&(this.viewRoute=I.ROLES)}get fullName(){var t,e;return`${(t=this.contact)===null\|\|t===void 0?void 0:t.firstName} ${(e=this.contact)===null\|\|e===void 0?void 0:e.lastName}`}get canAddRoles(){return!this.readonly&&this.addableRoles.length>0}get canRemoveRoles(){var t;return!this.readonly&&((t=this.assignedRoles)===null\|\|t===void 0?void 0:t.length)}get addRolesDisabled(){var t,e,i,o,a;if(!(!((t=this.account)===null\|\|t===void 0)&&t.accountNumber))return!0;const n=vt(this.account.accountNumber,this.roles,H((e=this.contact)===null\|\|e===void 0?void 0:e.email)&&A.hasAssignInternalRoleCreate((i=this.account)===null\|\|i===void 0?void 0:i.accountNumber)).length;return((a=(o=this.assignedRoles)===null\|\|o===void 0?void 0:o.length)!==null&&a!==void 0?a:0)>=n}get addableRoles(){return this.roles.filter(t=>{var e;return!(!((e=this.assignedRoles)===null\|\|e===void 0)&&e.find(i=>i.id===t.id))})}get isDirty(){return this.roleUpdates.length>0\|\|this.flagUpdates.length>0\|\|N.get().length}get showUserFlags(){var t,e;return A.hasExternalUserRead((t=this.account)===null\|\|t===void 0?void 0:t.accountNumber)&&((e=this.account)===null\|\|e===void 0?void 0:e.status)!=="REMOVED"}get showRoles(){var t;return((t=this.account)===null\|\|t===void 0?void 0:t.status)!=="REMOVED"}firstUpdated(){this.account&&this.loadAccount()}async loadAccount(){const t=await this.userDetailsAssignments;t==null\|\|t.assignmentUpdateManagers.forEach(e=>e.nodeManager.reset()),this.roleUpdates=[],this.flagUpdates=[],this.isPanelLoading=!0,await this.getAssignedRoles(),this.isPanelLoading=!1,this.displayDefaultRole(),this.setShowControls()}async getAssignedRoles(){this.roleAssignments=(await Dt(this.contact.id,this.account.accountNumber)).filter(t=>t.isActive),this.assignedRoles=[...pt(this.roleAssignments),...N.getAsRoles()],await this.getRoleAndFlagTrees()}async getRoleAndFlagTrees(){var t,e,i;if(!(!((t=this.assignedRoles)===null\|\|t===void 0)&&t.length))return;const o=this.assignedRoles.map(r=>r.id),[a,n]=await St(o,this.contact.id,this.account.accountNumber,H((e=this.contact)===null\|\|e===void 0?void 0:e.email));this.assignedRoleTrees=(i=structuredClone(a))===null\|\|i===void 0?void 0:i.filter(r=>r!==void 0),this.userFlagTrees=structuredClone(n)}displayDefaultRole(){var t;!((t=this.assignedRoles)===null\|\|t===void 0)&&t.length&&(this.activeRoleId=this.assignedRoles[0].id,this.selectRole(this.activeRoleId))}async selectRoleEventHandler(t){this.selectRole(t.detail.roleId)}async selectRole(t){this.activeRoleId=t;const e=await this.roleTabComponent;e==null\|\|e.setActiveRole(this.activeRoleId),this.setShowControls()}setShowControls(){var t;if(this.isPanelLoading\|\|((t=this.account)===null\|\|t===void 0?void 0:t.status)===m.REMOVED){this.saveControls=y.hidden;return}const e=this.assignedRoleTrees.filter(i=>i!==void 0).every(i=>Kt(i.rootNode));N.get().length?this.saveControls=this.isDirty&&e?y.enabled:y.disabled:this.saveControls=this.isDirty?e?y.enabled:y.disabled:y.hidden}async addRole(t){const e=await this.addRoleDialog;e&&(e.isOpen=!1),this.isPanelLoading=!0;const i={roleId:t,contactId:this.contact.id,accountNumber:this.account.accountNumber,isActive:!0};N.set([...N.get(),i]);const o=Ot(i.roleId);if(!o\|\|!this.assignedRoles)return;this.assignedRoles=[...this.assignedRoles,o];const[a]=await Ut([t],this.contact.id,this.account.accountNumber,H(this.contact.email));this.assignedRoleTrees.push(a);const n=await this.addRoleDialog;n&&(n.isOpen=!1),this.isPanelLoading=!1,this.selectRole(o.id)}async removeRole(t){var e;const i=await this.userDetailsAssignments,o=this.assignedRoles.find(n=>n.id===t);if(!o)return;if(N.getAsRoles().findIndex(n=>n.id===o.id)>-1){N.removeRole(t);const n=i==null?void 0:i.assignmentUpdateManagers.find(r=>{var g;return r.accountId===((g=this.account)===null\|\|g===void 0?void 0:g.accountNumber)});n&&n.nodeManager.nodeUpdates.find(r=>r.key===t)&&n.nodeManager.remove(t),this.assignedRoles=this.assignedRoles.filter(r=>r.id!==o.id),this.assignedRoleTrees=(e=this.assignedRoleTrees)===null\|\|e===void 0?void 0:e.filter(r=>r!==void 0).filter(r=>r.role!==o.id)}else{this.isPanelLoading=!0;const n=this.roleAssignments.filter(r=>r.roleId===t&&r.isActive);await this.roleAssignmentController.removeRoleAssignment(n),await this.getAssignedRoles(),this.assignedRoles=this.assignedRoles.filter(r=>r.id!==o.id),this.isPanelLoading=!1}this.roleUpdates=this.roleUpdates.filter(n=>n.key!==t),this.assignedRoleTrees=this.assignedRoleTrees.filter(n=>!!n&&n.role!==o.id);const a=await this.roleTabComponent;a==null\|\|a.requestUpdate("assignedRoles",[]),this.displayDefaultRole()}resetForm(){this.displayDefaultRole(),this.roleUpdates=[],this.flagUpdates=[],P.clear(),N.clear(),this.setShowControls()}updateView(t){this.viewRoute=t,t===I.ROLES&&this.selectRole(this.activeRoleId)}async openAddRoleDialog(){const t=await this.addRoleDialog;t&&t.handleOpenDialog()}removeRoleButtonStatus(){var t,e;const i=N.get().map(a=>a.roleId),o=(e=((t=this.assignedRoles)!==null&&t!==void 0?t:[]).filter(a=>!i.includes(a.id)))!==null&&e!==void 0?e:[];return i.find(a=>a===this.activeRoleId)!=null?!1:o.length<2}renderPermissions(){var t,e;return!(!((t=this.assignedRoles)===null\|\|t===void 0)&&t.length)\|\|this.redundantStatuses.includes((e=this.account)===null\|\|e===void 0?void 0:e.status)?h:c` <user-details-permission .activeRoleId="${this.activeRoleId}"> </user-details-permission> `}renderRemovedOrDeclinedAccount(){var t;return this.account?c` <user-account-removed-declined .status="${this.account.status}" .roles="${this.roles}" .accountNumber="${this.account.accountNumber}" .contactID="${(t=this.contact)===null\|\|t===void 0?void 0:t.id}" .changedBy="${this.account.statusUpdateBy}" .changedAt="${this.account.statusUpdateAt}"></user-account-removed-declined> `:h}renderRoles(){return!this.account\|\|!this.contact\|\|!this.assignedRoles?h:this.redundantStatuses.includes(this.account.status)?h:c` <user-details-tab-roles id="role-data-element" .assignedRoles="${this.assignedRoles}" .activeRoleId="${this.activeRoleId}" .canRemoveRoles="${this.canRemoveRoles}" .canAddRoles="${this.canAddRoles}" .removeRolesDisabled="${this.removeRoleButtonStatus()}" .addRolesDisabled="${this.addRolesDisabled}" @role-select="${t=>this.selectRoleEventHandler(t)}" @open-role-menu="${()=>this.openAddRoleDialog()}" @open-remove-role-menu="${()=>this.dispatchOpenConfirmation()}"> </user-details-tab-roles> `}renderLoading(){return this.isPanelLoading?c`<ix-progress aria-label="User details panel" .indeterminate="${!0}" data-testid="${F.PROGRESS_BAR}"> </ix-progress>`:h}renderTree(){var t,e,i;if(!(!((t=this.assignedRoles)===null\|\|t===void 0)&&t.length))return h;let o;if(this.activeRoleId)o=this.assignedRoleTrees.filter(n=>n!==void 0).find(n=>n.role===this.activeRoleId);else{const[n]=this.assignedRoleTrees;o=n}const a=n=>{this.roleUpdates=n.detail.message.updates,this.setShowControls()};return o&&o.rootNode&&!this.redundantStatuses.includes((e=this.account)===null\|\|e===void 0?void 0:e.status)?c`<user-details-assignments .assignment="${o}" .contact="${this.contact}" .accountNumber="${(i=this.account)===null\|\|i===void 0?void 0:i.accountNumber}" .readonly="${this.readonly}" .activeRoleId="${this.activeRoleId}" @check-toggle="${a}"></user-details-assignments>`:h}renderFlags(){const t=e=>{this.flagUpdates=structuredClone(e.detail.message.updates),this.setShowControls()};return!this.account\|\|!this.userFlagTrees?h:c`<user-flags .flags="${this.userFlagTrees}" searchEnabled showCheckboxes .disableCheckboxes="${this.readonly}" .contact="${this.contact}" @check-toggle="${t}"></user-flags>`}renderControls(){return c`<user-details-controls .roles="${this.roles}" .account="${this.account}" .contact="${f.get()}" .saveControls="${this.saveControls}" .readonly="${this.readonly}" .emitRoleUpdates="${this.emitRoleUpdates}" ?isPanelLoading="${this.isPanelLoading}" @reset-changes="${()=>this.resetForm()}" @update-changes="${this.saveAssignments}" @reload-account="${t=>this.dispatchReloadAccountEvent(t.detail.accountNumber,t.detail.overrideUnsavedChanges)}"> </user-details-controls>`}renderRemoveRoleConfirmation(){return c`<changes-confirmation id="data-loss-dialog" class="z-50 relative" .headerText="${"Are you sure you want to remove this role?"}" .bodyText="${"The user will no longer be able to perform the permissions of this role for this account."}" .confirmationButtonText="${"Remove Role"}" ?isOpen="${this.removeRoleDialogOpen}" @confirm="${()=>{this.removeRole(this.activeRoleId),this.removeRoleDialogOpen=!1}}" @cancel="${()=>{this.removeRoleDialogOpen=!1}}" data-testid="${F.DIALOG_REMOVE_ROLE}"> </changes-confirmation>`}renderAddAccountRoleConfirmation(){return this.assignedRoles?c`<add-account-role id="add-role-dialog" .contact="${this.contact}" .account="${this.account}" .roles="${this.roles}" .assignedRoles="${this.assignedRoles}" ?loading="${this.isPanelLoading}" @add-role="${t=>this.addRole(t.detail.roleId)}" data-testid="${F.DIALOG_ADD_ROLE}"> </add-account-role>`:h}renderRoleView(){return c`<div id="roles-view"> <div>${this.renderRoles()}</div> <div class="grid grid-cols-1 xl:grid-cols-2 h-full p-4"> <div class="grow h-full">${this.renderPermissions()}</div> <div class="tree-view grow h-full lg:overflow-auto pl-2">${this.renderTree()}</div> </div> </div>`}renderFlagsView(){return this.showUserFlags===!1?h:c`<div id="flags-view"> <div class="grid grid-cols-1 xl:grid-cols-1 h-full"> <div class="grow h-full mt-6 px-4">${this.renderFlags()}</div> <div class="grow h-full mt-2 flag-text"> Learn more about user flags <a id="flag-text-link" href="#">here.</a> </div> </div> </div>`}renderNavigation(){var t;return this.isPanelLoading\|\|this.redundantStatuses.includes((t=this.account)===null\|\|t===void 0?void 0:t.status)?h:c`<div class="user-details-navigation"> <user-details-navigation .view="${this.viewRoute}" ?showFlags="${this.showUserFlags}" ?showRoles="${this.showRoles}" .navigate="${e=>this.updateView(e)}"></user-details-navigation> </div>`}renderView(){var t;let e=h;return this.showRoles&&this.viewRoute===I.ROLES&&(e=this.renderRoleView()),this.showUserFlags&&this.viewRoute===I.USERFLAGS&&(e=this.renderFlagsView()),this.redundantStatuses.includes((t=this.account)===null\|\|t===void 0?void 0:t.status)&&(e=this.renderRemovedOrDeclinedAccount()),e}render(){return c` <div class="user-details-panel"> ${this.renderControls()} ${this.renderNavigation()} ${wt(this.isPanelLoading?this.renderLoading():this.renderView())} </div> ${this.renderAddAccountRoleConfirmation()} ${this.renderRemoveRoleConfirmation()} `}};v.styles=[tt,et,k,X],s([l({type:Object,attribute:!1})],v.prototype,"account",void 0),s([l({type:Object,attribute:!1})],v.prototype,"contact",void 0),s([l({type:Array,attribute:!1})],v.prototype,"assignedRoles",void 0),s([l({type:Array,attribute:!1})],v.prototype,"roles",void 0),s([l({type:Array,attribute:!1})],v.prototype,"userFlagTrees",void 0),s([l({type:Array,attribute:!1})],v.prototype,"assignedRoleTrees",void 0),s([l({type:Boolean})],v.prototype,"readonly",void 0),s([u()],v.prototype,"isPanelLoading",void 0),s([u()],v.prototype,"roleAssignments",void 0),s([u()],v.prototype,"viewRoute",void 0),s([u()],v.prototype,"saveControls",void 0),s([u()],v.prototype,"flagUpdates",void 0),s([u()],v.prototype,"roleUpdates",void 0),s([u()],v.prototype,"activeRoleId",void 0),s([u()],v.prototype,"permissionData",void 0),s([u()],v.prototype,"removeRoleDialogOpen",void 0),s([L("#role-data-element")],v.prototype,"roleTabComponent",void 0),s([L("user-details-controls")],v.prototype,"controlsComponent",void 0),s([L("#add-role-dialog")],v.prototype,"addRoleDialog",void 0),s([L("user-details-assignments")],v.prototype,"userDetailsAssignments",void 0),s([L("user-flags")],v.prototype,"userFlags",void 0),v=s([U("user-details-panel")],v);class _{}_.FIRST_NAME="user-details-view-first-name",_.LAST_NAME="user-details-view-last-name",_.EMAIL="user-details-view-email",_.PHONE="user-details-view-phone";let R=class extends j{constructor(){super(...arguments),this.allowSave=!0,this.isEditProfileDialogOpen=!1}firstUpdated(){this.allowSave=!1}shouldUpdate(){return!!this.contact}willUpdate(t){t.has("contact")&&this.handleDialogReset()}handleDialogClose(){this.isEditProfileDialogOpen=!1,this.handleDialogReset()}handleDialogOpen(){this.isEditProfileDialogOpen=!0,this.validateDialogFields()}handleDialogReset(){at(this.firstName,this.contact.firstName),at(this.lastName,this.contact.lastName),at(this.email,this.contact.email),gt(this.phoneNumber,this.contact.phone),Lt(this.evacAssistance,this.contact.evacAssistance),this.allowSave=!0}validateDialogFields(){B(this.firstName,this.firstName.value,"Invalid first name"),B(this.lastName,this.lastName.value,"Invalid last name"),B(this.email,this.email.value,"Invalid email"),bt(this.phoneNumber,this.phoneNumber.value)}dispatchUpdateUserEvent(){var t,e,i,o,a;const n={...this.contact};n.firstName=(t=nt(this.firstName))!==null&&t!==void 0?t:this.firstName.value,n.lastName=(e=nt(this.lastName))!==null&&e!==void 0?e:this.lastName.value,n.email=(i=nt(this.email))!==null&&i!==void 0?i:this.email.value,n.phone=(o=xt(this.phoneNumber))!==null&&o!==void 0?o:this.phoneNumber.value,n.evacAssistance=(a=kt(this.evacAssistance))!==null&&a!==void 0?a:this.evacAssistance.checked,f.set({...n});try{this.saveChanges(n),w("Changes saved.",3e3,"center")}catch(r){if(r.statusCode==="400"){Pt([this.firstName,this.lastName,this.email],r.errors),this.phoneNumber.error=!0;const g=r.errors.find(W=>W.field===this.phoneNumber.id);g&&(this.phoneNumber.errorText=g.error)}}finally{this.isEditProfileDialogOpen=!1}}renderEditForm(){var t,e,i,o,a,n,r,g;return c`<ix-dialog class="dialog z-50 relative" id="edit-profile-dialog" ?open="${this.isEditProfileDialogOpen}" @close="${()=>this.handleDialogClose()}"> <div class="dlr-text-heading" slot="headline">Edit Profile</div> <form class="dialog-form min-w-0 max-w-full max-[640px]:w-screen" slot="content" id="edit-profile-id" method="dialog"> <div class="user-profile-name-input-group grid grid-cols-1 sm:grid-cols-2"> <div class="user-profile-input"> <ix-textbox required="true" id="first-name" class="textbox" type="text" pattern="${yt.name}" maxLength="50" label="First Name" placeholder="i.e. First Name" value="${(e=(t=this.contact)===null\|\|t===void 0?void 0:t.firstName)!==null&&e!==void 0?e:""}" @input="${()=>{this.allowSave=B(this.firstName,this.firstName.value,"Invalid first name")}}"></ix-textbox> </div> <div class="user-profile-input"> <ix-textbox required="true" id="last-name" class="textbox" type="text" pattern="${yt.name}" maxLength="50" label="Last Name" placeholder="i.e. Last Name" value="${(o=(i=this.contact)===null\|\|i===void 0?void 0:i.lastName)!==null&&o!==void 0?o:""}" @input="${()=>{this.allowSave=B(this.lastName,this.lastName.value,"Invalid last name")}}"></ix-textbox> </div> </div> <div class="user-profile-input"> <ix-phone-input required id="phone-number" class="single-row-textbox" label="Phone Number" value="${(n=At((a=this.contact)===null\|\|a===void 0?void 0:a.phone))!==null&&n!==void 0?n:""}" @input="${()=>{gt(this.phoneNumber,At(xt(this.phoneNumber))),this.allowSave=bt(this.phoneNumber,"Invalid phone number")}}"></ix-phone-input> </div> <div class="user-profile-input"> <ix-textbox required="true" id="email" class="single-row-textbox" type="email" label="Email Address" value="${(g=(r=this.contact)===null\|\|r===void 0?void 0:r.email)!==null&&g!==void 0?g:""}" @input="${()=>{this.allowSave=B(this.email,this.email.value,"Invalid email")}}"></ix-textbox> </div> </form> <div class="dialog-actions" slot="actions"> <ix-button form="edit-profile-id" appearance="text" text="Cancel" @click="${()=>this.handleDialogClose()}"> Cancel </ix-button> <ix-button id="save-user-button" appearance="text" text="Save Changes" .disabled="${!this.allowSave}" @click="${()=>{this.dispatchUpdateUserEvent()}}"> Save Changes </ix-button> </div> </ix-dialog>`}renderButton(){return A.hasExternalUserUpdate(this.selectedAccountNumber)&&!A.isProfileOfLoggedInUser(this.contact.email)?c`<ix-button id="open-user-button" appearance="text" has-icon @click="${()=>this.handleDialogOpen()}"> <md-icon class="edit-icon" slot="icon">edit</md-icon> Edit Profile </ix-button>`:h}render(){var t,e,i,o;return c` <div class="user-details-card"> <div class="user-details-header"> <h1 class="dlr-text-heading">User Details</h1> </div> <div> <div class="user-details-body grid md:grid-cols-2 gap-x-8 gap-y-4 pb-[1.5rem]"> <div class="first-name-container"> <p class="dlr-text-caption-alt text-on-surface-variant">FIRST NAME</p> <div class="first-name" data-testid="${_.FIRST_NAME}"> ${(t=this.contact)===null\|\|t===void 0?void 0:t.firstName} </div> </div> <div class="last-name-container"> <p class="dlr-text-caption-alt text-on-surface-variant">LAST NAME</p> <div class="last-name" data-testid="${_.LAST_NAME}"> ${(e=this.contact)===null\|\|e===void 0?void 0:e.lastName} </div> </div> <div class="email-container"> <p class="dlr-text-caption-alt text-on-surface-variant">EMAIL ADDRESS</p> <div class="email" data-testid="${_.EMAIL}">${(i=this.contact)===null\|\|i===void 0?void 0:i.email}</div> </div> <div class="phone-number-container"> <p class="dlr-text-caption-alt text-on-surface-variant">PHONE NUMBER</p> <ix-phone-number .number="${(o=this.contact)===null\|\|o===void 0?void 0:o.phone}" data-testid="${_.PHONE}"></ix-phone-number> </div> </div> </div> </div> ${this.renderEditForm()} `}};R.styles=[_t,k],s([l({type:String})],R.prototype,"selectedAccountNumber",void 0),s([l({type:Object})],R.prototype,"contact",void 0),s([l({type:Object})],R.prototype,"saveChanges",void 0),s([u()],R.prototype,"allowSave",void 0),s([u()],R.prototype,"isEditProfileDialogOpen",void 0),s([$("#first-name")],R.prototype,"firstName",void 0),s([$("#last-name")],R.prototype,"lastName",void 0),s([$("#email")],R.prototype,"email",void 0),s([$("#phone-number")],R.prototype,"phoneNumber",void 0),s([$("#evac-assistance")],R.prototype,"evacAssistance",void 0),R=s([U("user-details-view")],R);const re=G`ix-dialog{--md-dialog-container-color:#fff}ix-icon-button{--md-sys-color-on-surface-variant:var(--md-sys-color-primary)}ix-select{--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd;--md-menu-container-color:#fff}ix-select.thick{--md-menu-container-shape:10px}ix-select.slim{--md-outlined-field-bottom-space:2px;--md-outlined-field-top-space:2px}ix-button{--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd}ix-button .disabled{color:var(--md-sys-text-color-disabled)}.btn_primary{--md-filled-button-container-color:var(--md-sys-color-primary)}.btn_primary ix-icon{color:var(--md-sys-color-on-primary)}.btn_secondary{--md-filled-button-container-color:var(--md-sys-color-secondary)}.btn_secondary ix-icon{color:var(--md-sys-color-on-secondary)}.btn_tertiary{--md-filled-button-container-color:var(--md-sys-color-tertiary)}.btn_tertiary ix-icon{color:var(--md-sys-color-on-tertiary)}.btn_danger{--md-filled-button-container-color:var(--md-sys-color-error)}.btn_danger ix-icon{color:var(--md-sys-color-on-error)}.icon-btn_primary ix-icon{color:var(--md-sys-color-primary)}.icon-btn_secondary ix-icon{color:var(--md-sys-color-secondary)}.icon-btn_tertiary ix-icon{color:var(--md-sys-color-tertiary)}.icon-btn_danger ix-icon{color:var(--md-sys-color-error)}ix-icon.icon-lg{--ix-icon-font-size:32px}.dialog-form{min-width:500px;display:flex;flex-direction:column;justify-content:space-between;padding:8px 24px 20px}.dialog-form .textfield{width:100%}.dialog-form.sm{min-width:560px}.dialog-form__textbox{padding-top:1rem}.dialog-actions{display:flex;justify-content:flex-end;padding:8px 15px 8px 20px}@media only screen and (min-width:5px) and (max-width:600px){ix-dialog{--md-dialog-container-shape:6px}}@media only screen and (min-width:601px){ix-dialog{--md-dialog-container-shape:3px}}:host{display:flex;align-items:center;width:100%}.account-rhs-section{display:flex;align-items:center}.check_circle{color:#4caf50}.mail{color:#ff9800}.warning{color:#db0028}.delete_forever{color:#6d758c}.account-name{background:0 0;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left}.account-name-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}`,de=G`.account-name:focus-visible{outline:2px solid var(--md-sys-color-primary,#1456e0);outline-offset:2px;border-radius:2px}.account-name-tooltip{position:fixed;top:0;left:0;z-index:1300;min-width:200px;max-width:480px;width:max-content;padding:6px 10px;border-radius:4px;background-color:#071454;color:#fff;font-size:.75rem;line-height:1rem;white-space:normal;overflow-wrap:anywhere;word-break:break-word;pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.2)}.account-name-tooltip[hidden]{display:none!important}`;class M{}M.STATUS=t=>`dr-account-status-${t!=null?t:""}`,M.ICON=t=>`dr-account-icon-${t!=null?t:""}`,M.NAME=t=>`dr-account-name-${t!=null?t:""}`,M.EVENT_DISPATCH_EL=t=>`dr-account-event-el-${t!=null?t:""}`;const le=300;let C=class extends Z{constructor(){super(...arguments),this.active=!1,this.isSelected=!1,this.tooltipVisible=!1,this.showTooltip=()=>{this.clearTooltipTimer(),this.tooltipShowTimer=setTimeout(()=>{this.tooltipVisible=!0,this.updateComplete.then(()=>this.positionTooltip())},le)},this.hideTooltip=()=>{this.clearTooltipTimer(),this.tooltipVisible=!1},this.handleTooltipKeyDown=t=>{t.key==="Escape"&&this.tooltipVisible&&(t.stopPropagation(),this.hideTooltip())}}get statusText(){return Jt[this.status]}get statusIcon(){return Rt[this.status]}get accountDisplayName(){var t,e,i,o;return(o=(e=(t=this.account)===null\|\|t===void 0?void 0:t.displayName)!==null&&e!==void 0?e:(i=this.account)===null\|\|i===void 0?void 0:i.name)!==null&&o!==void 0?o:""}dispatchChangeAccountEvent(){var t;this.dispatchEvent(new CustomEvent("account-click",{detail:{accountNumber:(t=this.account)===null\|\|t===void 0?void 0:t.accountNumber}}))}disconnectedCallback(){super.disconnectedCallback(),this.clearTooltipTimer()}clearTooltipTimer(){this.tooltipShowTimer&&(clearTimeout(this.tooltipShowTimer),this.tooltipShowTimer=void 0)}positionTooltip(){!this.isConnected\|\|!this.accountNameEl\|\|!this.tooltipEl\|\|zt(this.accountNameEl,this.tooltipEl,{strategy:"fixed",placement:"top",middleware:[qt(8),Yt(),Wt({padding:8})]}).then(({x:t,y:e})=>{!this.isConnected\|\|!this.tooltipVisible\|\|!this.tooltipEl\|\|(this.tooltipEl.style.left=`${t}px`,this.tooltipEl.style.top=`${e}px`)}).catch(()=>{})}render(){var t,e,i;return c` <button type="button" class="${`account-name ${this.active\|\|this.isSelected?"font-bold":""}`}" aria-label="${this.accountDisplayName}, Status: ${this.statusText}" aria-current="${this.active?"true":h}" data-testid="${M.NAME((t=this.account)===null\|\|t===void 0?void 0:t.accountNumber)}" @click="${()=>this.dispatchChangeAccountEvent()}" @mouseenter="${this.showTooltip}" @mouseleave="${this.hideTooltip}" @focus="${this.showTooltip}" @blur="${this.hideTooltip}" @keydown="${this.handleTooltipKeyDown}"> <span class="${`account-name-text ml-4 dlr-text-small ${this.active\|\|this.isSelected?"font-bold":""}`}" aria-hidden="true">${this.accountDisplayName}</span> <div class="flex items-center mr-4" aria-hidden="true"> <div class="account-rhs-section"> <p class="dlr-text-small" data-testid="${M.STATUS((e=this.account)===null\|\|e===void 0?void 0:e.accountNumber)}"> ${this.statusText} </p> </div> <ix-icon filled class="mt-1 ml-2 text-2xl" data-testid="${M.ICON((i=this.account)===null\|\|i===void 0?void 0:i.accountNumber)}" style="${`color: ${dt[this.status]}`}">${this.statusIcon}</ix-icon> </div> </button> <div class="account-name-tooltip" aria-hidden="true" ?hidden="${!this.tooltipVisible}"> ${this.accountDisplayName} </div> `}};C.styles=[re,k,de],s([l({type:Object})],C.prototype,"account",void 0),s([l({type:Boolean,reflect:!0})],C.prototype,"active",void 0),s([l({type:String})],C.prototype,"status",void 0),s([l({type:Boolean})],C.prototype,"isSelected",void 0),s([u()],C.prototype,"tooltipVisible",void 0),s([$(".account-name-tooltip")],C.prototype,"tooltipEl",void 0),s([$(".account-name-text")],C.prototype,"accountNameEl",void 0),C=s([U("dr-account")],C);const ue=G`ix-dialog{--md-dialog-container-color:#fff}ix-icon-button{--md-sys-color-on-surface-variant:var(--md-sys-color-primary)}ix-select{--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd;--md-menu-container-color:#fff}ix-select.thick{--md-menu-container-shape:10px}ix-select.slim{--md-outlined-field-bottom-space:2px;--md-outlined-field-top-space:2px}ix-button{--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd}ix-button .disabled{color:var(--md-sys-text-color-disabled)}.btn_primary{--md-filled-button-container-color:var(--md-sys-color-primary)}.btn_primary ix-icon{color:var(--md-sys-color-on-primary)}.btn_secondary{--md-filled-button-container-color:var(--md-sys-color-secondary)}.btn_secondary ix-icon{color:var(--md-sys-color-on-secondary)}.btn_tertiary{--md-filled-button-container-color:var(--md-sys-color-tertiary)}.btn_tertiary ix-icon{color:var(--md-sys-color-on-tertiary)}.btn_danger{--md-filled-button-container-color:var(--md-sys-color-error)}.btn_danger ix-icon{color:var(--md-sys-color-on-error)}.icon-btn_primary ix-icon{color:var(--md-sys-color-primary)}.icon-btn_secondary ix-icon{color:var(--md-sys-color-secondary)}.icon-btn_tertiary ix-icon{color:var(--md-sys-color-tertiary)}.icon-btn_danger ix-icon{color:var(--md-sys-color-error)}ix-icon.icon-lg{--ix-icon-font-size:32px}.dialog-form{min-width:500px;display:flex;flex-direction:column;justify-content:space-between;padding:8px 24px 20px}.dialog-form .textfield{width:100%}.dialog-form.sm{min-width:560px}.dialog-form__textbox{padding-top:1rem}.dialog-actions{display:flex;justify-content:flex-end;padding:8px 15px 8px 20px}@media only screen and (min-width:5px) and (max-width:600px){ix-dialog{--md-dialog-container-shape:6px}}@media only screen and (min-width:601px){ix-dialog{--md-dialog-container-shape:3px}}.accounts-card{display:flex;flex-direction:column;width:100%;background:0 0;border-radius:20px}.accounts-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.divider{width:100%;display:flex;align-items:center;min-height:40px}.option{display:block;width:100%}.accounts-list{padding-left:0;list-style-type:none;margin:0}.accounts-list li{display:flex;align-items:center;width:100%;height:24px;padding-top:20px;padding-bottom:20px;margin-bottom:8px;color:#092241;border-radius:0 30px 30px 0;cursor:pointer;gap:1rem}.accounts-list li:last-child{margin-bottom:0}.accounts-list li:focus-within,.accounts-list li:has(dr-account[active]),.accounts-list li:hover{background-color:rgba(20,86,224,.1)}.dialog-actions{display:flex;justify-content:flex-end;padding:8px 15px 8px 20px}@media only screen and (max-width:600px){.accounts-card-header{margin-bottom:1.5rem}.dialog-form{min-width:initial}}`;class d{}d.ACCOUNTS_LIST="acc-card-accounts-list",d.ACCOUNT=t=>`acc-card-account-${t!=null?t:""}`,d.ACCOUNT_OPTION=t=>`acc-card-account-option-${t!=null?t:""}`,d.ACCOUNT_DIVIDER="acc-card-account-divider",d.ROLE_OPTION=t=>`acc-card-role-option-${t.replace(/ /g,"_")}`,d.BTN_ADD_ACCOUNT="acc-card-btn-add-account",d.ACCOUNT_DIALOG="acc-card-add-account-dialog",d.ACCOUNT_DIALOG_HEADER="acc-card-add-account-header",d.ACCOUNT_DIALOG_SELECT="acc-card-add-account-select",d.ACCOUNT_DIALOG_CANCEL="acc-card-add-account-cancel",d.ACCOUNT_DIALOG_CONFIRM="acc-card-add-account-confirm",d.ROLE_DIALOG="acc-card-add-role-dialog",d.ROLE_DIALOG_HEADER="acc-card-add-role-header",d.ROLE_DIALOG_SELECT="acc-card-add-role-select",d.ROLE_DIALOG_CANCEL="acc-card-add-role-cancel",d.ROLE_DIALOG_CONFIRM="acc-card-add-role-confirm",d.CARD_HEADER="acc-card-header",d.CARD_BODY="acc-card-body",d.ACCOUNT_DIALOG_ACCOUNT_TREE="acc-card-add-account-tree";let x=class extends j{constructor(){super(...arguments),this.assignableAccounts=[],this.activeAccountNumber="",this.readonly=!1,this.isAddAccountDialogOpen=!1,this.isAddRoleDialogOpen=!1,this.addAccountDisabled=!0,this.addRoleDisabled=!0,this.selectedAccountNumber="",this.selectedRoleName="",this.activeAccountIndex=0,this.addingAccount=!1,this.changeSelectedAccount=async(t,e=!1)=>{this.activeAccountIndex=this.assignedAccounts.findIndex(i=>i.accountNumber===t),!(this.activeAccountNumber===this.assignedAccounts[this.activeAccountIndex].accountNumber&&m.DRAFT!==this.assignedAccounts[this.activeAccountIndex].status)&&this.activeAccountIndex>-1&&this.dispatchEvent(new CustomEvent(K.ChangeAccountAssociation,{detail:{accountNumber:t,overrideUnsavedChanges:e}}))},this.onAccountClick=t=>{this.changeSelectedAccount(t)}}get assignedAccounts(){return[...this.contact.accounts,P.get()]}get assignedAccountNames(){var t,e,i;return(i=(e=(t=this.contact)===null\|\|t===void 0?void 0:t.accounts)===null\|\|e===void 0?void 0:e.filter(o=>o.status!==m.REMOVED))===null\|\|i===void 0?void 0:i.map(o=>o.name)}get selectedAccountName(){var t;const e=this.assignableAccounts.find(i=>i.accountNumber===this.selectedAccountNumber);return(t=e==null?void 0:e.displayName)!==null&&t!==void 0?t:e==null?void 0:e.name}get roleNames(){const t=Mt.getAccounts().find(o=>o.accountNumber===this.selectedAccountNumber)\|\|null,e=H(this.contact.email)&&A.hasAssignInternalRoleCreate(this.selectedAccountNumber),i=vt(t==null?void 0:t.accountNumber,ct.get(),e);return i==null?void 0:i.map(o=>o.name)}get fullName(){var t,e;return`${(t=this.contact)===null\|\|t===void 0?void 0:t.firstName} ${(e=this.contact)===null\|\|e===void 0?void 0:e.lastName}`}firstUpdated(){this.changeSelectedAccount(this.assignedAccounts[this.activeAccountIndex].accountNumber)}willUpdate(){!this.assignedAccounts[this.activeAccountIndex].accountNumber&&this.assignedAccounts.length&&this.changeSelectedAccount(this.assignedAccounts[0].accountNumber)}closeAndOpenAddRoleDialog(){this.handleDialogClose("add-account"),this.handleDialogOpen("add-role")}handleDialogOpen(t){t==="add-account"&&(this.isAddAccountDialogOpen=!0,this.selectedAccountNumber="",this.addAccountDisabled=!0,this.requestUpdate()),t==="add-role"&&(this.handleDialogClose("add-account"),this.rolesMenu&&this.rolesMenu.reset(),this.selectedRoleName="",this.addRoleDisabled=!0,this.isAddRoleDialogOpen=!0)}handleDialogClose(t){t==="add-account"&&(this.isAddAccountDialogOpen=!1),t==="add-role"&&(this.isAddRoleDialogOpen=!1,this.selectedAccountNumber="")}handleDialogReset(){this.handleDialogClose("add-account"),this.handleDialogClose("add-role"),this.rolesMenu&&this.rolesMenu.reset(),this.addAccountDisabled=!0,this.addRoleDisabled=!0,this.selectedAccountNumber="",this.selectedRoleName=""}createDraftAssociation(){const t=ct.get().find(n=>n.name===this.selectedRoleName),e=this.assignableAccounts.find(n=>n.accountNumber===this.selectedAccountNumber);if(!t\|\|!e)return;const i=this.contact.accounts.findIndex(n=>n.accountNumber===e.accountNumber);i>-1&&(this.contact.accounts=this.contact.accounts.filter((n,r)=>r!==i),this.requestUpdate("contact",[]));const o=[{roleId:t.id,contactId:this.contact.id,accountNumber:e.accountNumber,isActive:!0}],a={name:e.name,status:m.DRAFT,accountNumber:e.accountNumber,displayName:e.displayName};P.set(a),N.set(o),this.changeSelectedAccount(this.selectedAccountNumber,!0),this.handleDialogReset()}renderAccounts(){var t;const e=(t=this.assignedAccounts)===null\|\|t===void 0?void 0:t.filter(o=>o.status===m.ACTIVE\|\|o.status===m.INVITED\|\|o.status===m.DRAFT),i=this.assignedAccounts.filter(o=>o.status===m.SUSPENDED\|\|o.status===m.REMOVED\|\|o.status===m.DECLINED).filter(o=>!e.find(a=>a.displayName===o.displayName));return c` <ul class="accounts-list" aria-label="Active accounts" data-testid="${d.ACCOUNTS_LIST}"> ${e==null?void 0:e.map(o=>c` <li> <dr-account data-testid="${d.ACCOUNT(o.accountNumber)}" .account="${o}" .active="${o.accountNumber===this.activeAccountNumber}" .status="${o.status}" @account-click="${a=>this.onAccountClick(a.detail.accountNumber)}"></dr-account> </li> `)} </ul> ${i.length>0?c` <ix-divider class="divider" aria-hidden="true" data-testid="${d.ACCOUNT_DIVIDER}"></ix-divider> <ul class="accounts-list" aria-label="Inactive accounts"> ${i.map(o=>c` <li> <dr-account data-testid="${d.ACCOUNT(o.accountNumber)}" .account="${o}" .active="${o.accountNumber===this.activeAccountNumber}" .status="${o.status}" @account-click="${a=>this.onAccountClick(a.detail.accountNumber)}"></dr-account> </li> `)} </ul> `:h} `}disableAssignedAccountsInTree(t){t&&(Array.isArray(t)?t.forEach(e=>this.disableAssignedAccountsInTree(e)):(t.id&&this.assignedAccounts.some(e=>e.accountNumber===t.id&&e.status.toLowerCase()!==m.REMOVED.toLowerCase())&&(t.disabled=!0,t.children&&t.children.length>0&&(t.expanded=!0)),t.children&&Array.isArray(t.children)&&t.children.forEach(e=>this.disableAssignedAccountsInTree(e))))}renderAccountTree(){const t=Bt(this.assignableAccounts);return this.disableAssignedAccountsInTree(t),c` <p class="text-black font-medium text-base">Select Account</p> <div class="border-solid border-2 rounded-md min-h-[250px] max-h-[250px] max-w-lg overflow-auto"> <ix-tree id="account-select-tree" .rootNode="${t}" @on-tree-node-selected="${e=>this.handleAccountSelection(e)}" data-testid="${d.ACCOUNT_DIALOG_ACCOUNT_TREE}"> </ix-tree> </div> `}handleAccountSelection(t){const e=t.detail.message.node\|\|t.detail.message;e.disabled\|\|(this.addAccountDisabled=!1,this.selectedAccountNumber=e.id)}renderRoleOptions(){return c` ${this.roleNames.map((t,e)=>c` <ix-select-option data-testid="${d.ROLE_OPTION(t)}" value="${e}" @click="${()=>{this.addRoleDisabled=!1,this.selectedRoleName=t}}"> <div slot="headline" class="option">${t}</div> </ix-select-option>`)} `}renderAddAccountDialog(){var t;return c` <ix-dialog class="dialog z-50 relative" data-testid="${d.ACCOUNT_DIALOG}" ?open="${this.isAddAccountDialogOpen}" @closed="${()=>this.handleDialogClose("add-account")}"> <div data-testid="${d.ACCOUNT_DIALOG_HEADER}" class="dlr-text-heading" slot="headline">Add an Account to ${(t=this.fullName)!==null&&t!==void 0?t:"this user"}</div> <div slot="content" style="padding:24px"> ${this.isAddAccountDialogOpen?this.renderAccountTree():h} </div> <div class="dialog-actions" slot="actions"> <ix-button data-testid="${d.ACCOUNT_DIALOG_CANCEL}" form="add-account-id" appearance="text" text="Cancel" @click="${()=>this.handleDialogReset()}"> Cancel </ix-button> <ix-button data-testid="${d.ACCOUNT_DIALOG_CONFIRM}" id="add-account-button" form="add-account-id" appearance="text" text="Add Account" .disabled="${this.addAccountDisabled}" @click="${()=>{this.closeAndOpenAddRoleDialog()}}">Add Account</ix-button> </div> </ix-dialog> `}renderAddRoleDialog(){var t,e;return c` <ix-dialog class="dialog z-50 relative" data-testid="${d.ROLE_DIALOG}" ?open="${this.isAddRoleDialogOpen}" @opened="${()=>this.handleDialogOpen("add-role")}" @closed="${()=>this.handleDialogClose("add-role")}"> <div class="dlr-text-heading" slot="headline" data-testid="${d.ROLE_DIALOG_HEADER}"> Add a Role to ${(t=this.fullName)!==null&&t!==void 0?t:"this user"} for ${(e=this.selectedAccountName)!==null&&e!==void 0?e:"this account"} </div> <form slot="content" id="add-role-to-account-id" method="dialog"> <ix-select data-testid="${d.ROLE_DIALOG_SELECT}" wide-menu class="thick" id="roles-menu" menu-positioning="fixed">${this.renderRoleOptions()}</ix-select> </form> <div class="dialog-actions" slot="actions"> <ix-button data-testid="${d.ROLE_DIALOG_CANCEL}" form="add-role-to-account-id" appearance="text" text="Cancel" ?disabled="${this.addingAccount}" @click="${()=>this.handleDialogReset()}"> <span class="button-label">Cancel</span> </ix-button> <ix-button data-testid="${d.ROLE_DIALOG_CONFIRM}" form="add-role-to-account-id" appearance="text" text="Add Account" ?disabled="${this.addRoleDisabled}" ?submitting="${this.addingAccount}" @click="${()=>this.createDraftAssociation()}"> <span class="button-label">Add Role</span> </ix-button> </div> </ix-dialog> `}renderAccountsCard(){return c` <div class="accounts-card"> <div class="accounts-card-header" data-testid="${d.CARD_HEADER}"> <div class="dlr-text-heading accounts-card-header-text">Accounts</div> ${this.renderButton()} </div> <div class="accounts-card-body" data-testid="${d.CARD_BODY}"> ${this.contact.accounts.length>0?this.renderAccounts():c`You have no accounts`} </div> </div> `}renderButton(){return this.readonly?h:c`<ix-button data-testid="${d.BTN_ADD_ACCOUNT}" appearance="text" text="Add Account" has-icon @click="${()=>this.handleDialogOpen("add-account")}"> <md-icon slot="icon">add</md-icon> Add Account </ix-button>`}render(){return c` ${this.renderAccountsCard()} ${this.renderAddAccountDialog()} ${this.renderAddRoleDialog()} `}};x.styles=[ue,k],s([l()],x.prototype,"contact",void 0),s([l({type:Array,attribute:!1})],x.prototype,"assignableAccounts",void 0),s([l({type:String})],x.prototype,"activeAccountNumber",void 0),s([l({type:Boolean})],x.prototype,"readonly",void 0),s([u()],x.prototype,"isAddAccountDialogOpen",void 0),s([u()],x.prototype,"isAddRoleDialogOpen",void 0),s([u()],x.prototype,"addAccountDisabled",void 0),s([u()],x.prototype,"addRoleDisabled",void 0),s([u()],x.prototype,"selectedAccountNumber",void 0),s([u()],x.prototype,"selectedRoleName",void 0),s([u()],x.prototype,"activeAccountIndex",void 0),s([u()],x.prototype,"addingAccount",void 0),s([$("#roles-menu")],x.prototype,"rolesMenu",void 0),x=s([U("accounts-card")],x);const he=G`ix-dialog{--md-dialog-container-color:#fff}ix-icon-button{--md-sys-color-on-surface-variant:var(--md-sys-color-primary)}ix-select{--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd;--md-menu-container-color:#fff}ix-select.thick{--md-menu-container-shape:10px}ix-select.slim{--md-outlined-field-bottom-space:2px;--md-outlined-field-top-space:2px}ix-button{--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd}ix-button .disabled{color:var(--md-sys-text-color-disabled)}.btn_primary{--md-filled-button-container-color:var(--md-sys-color-primary)}.btn_primary ix-icon{color:var(--md-sys-color-on-primary)}.btn_secondary{--md-filled-button-container-color:var(--md-sys-color-secondary)}.btn_secondary ix-icon{color:var(--md-sys-color-on-secondary)}.btn_tertiary{--md-filled-button-container-color:var(--md-sys-color-tertiary)}.btn_tertiary ix-icon{color:var(--md-sys-color-on-tertiary)}.btn_danger{--md-filled-button-container-color:var(--md-sys-color-error)}.btn_danger ix-icon{color:var(--md-sys-color-on-error)}.icon-btn_primary ix-icon{color:var(--md-sys-color-primary)}.icon-btn_secondary ix-icon{color:var(--md-sys-color-secondary)}.icon-btn_tertiary ix-icon{color:var(--md-sys-color-tertiary)}.icon-btn_danger ix-icon{color:var(--md-sys-color-error)}ix-icon.icon-lg{--ix-icon-font-size:32px}.dialog-form{min-width:500px;display:flex;flex-direction:column;justify-content:space-between;padding:8px 24px 20px}.dialog-form .textfield{width:100%}.dialog-form.sm{min-width:560px}.dialog-form__textbox{padding-top:1rem}.dialog-actions{display:flex;justify-content:flex-end;padding:8px 15px 8px 20px}@media only screen and (min-width:5px) and (max-width:600px){ix-dialog{--md-dialog-container-shape:6px}}@media only screen and (min-width:601px){ix-dialog{--md-dialog-container-shape:3px}}.um-card{padding:.5rem;background:#fff;border-radius:12px 12px 0 0;box-shadow:rgba(0,0,0,.12) 0 12px 20px -12px,#e1e4e8 0 0 0 1px inset}#user-management{color:rgba(9,34,65,.7)}nav{margin-top:2px;margin-bottom:1.5rem}user-details{margin-bottom:16px}.crumbs ol{list-style-type:none;padding-left:0;display:flex}.crumb{display:inline-block}.crumb a::after{display:inline-block;padding:0 3px}.crumbs-separator{display:flex;user-select:none;margin-left:12.5px;margin-right:12.5px}#current-nav{pointer-events:none;cursor:default}@media only screen and (max-width:600px){.um-card.rounded-lg{border-radius:0;box-shadow:none}.user-details{margin:0 .5rem}}@media only screen and (max-width:767px){.user-details-view{margin:0 1rem}}@media only screen and (min-width:601px) and (max-width:1200px){.user-details-view{margin:0 1rem}.user-details-account-panel{display:flex;flex-direction:row}.user-details-account-panel>div{flex:1;width:50px}.user-details-account-panel>div:first-child{margin-top:6px}}`;class pe{constructor(e){(this._host=e).addController(this)}hostConnected(){}hostDisconnected(){}hostUpdate(){}async getContact(e){return await st.get({id:e})}}class S{}S.CRUMBS="user-management-details-view-crumbs",S.USER_DETAILS="user-management-details-view-user-details",S.ACCOUNTS_CARD="user-management-details-view-accounts-card",S.USER_DETAILS_PANEL="user-management-details-view-user-details-panel",S.USER_MANAGEMENT_PANEL="user-management-details-view-user-management-panel";let D=class extends j{constructor(){super(...arguments),this.contactController=new pe(this),this.roles=[],this.isPageLoading=!1,this.confirmationDialogIsOpen=!1}get assignableAccounts(){return Vt().filter(t=>A.hasExternalUserUpdate(t.accountNumber))}get fullName(){var t,e;return`${(t=this.contact)===null\|\|t===void 0?void 0:t.firstName} ${(e=this.contact)===null\|\|e===void 0?void 0:e.lastName}`}get readonly(){var t,e,i,o,a;let n;return Ft().UserManagement.InternalUserRetired?n=A.hasUserUpdate((t=this.account)===null\|\|t===void 0?void 0:t.accountNumber):n=H((e=this.contact)===null\|\|e===void 0?void 0:e.email)?A.hasInternalUserUpdate((i=this.account)===null\|\|i===void 0?void 0:i.accountNumber):A.hasExternalUserUpdate((o=this.account)===null\|\|o===void 0?void 0:o.accountNumber),!n\|\|A.isProfileOfLoggedInUser((a=this.contact)===null\|\|a===void 0?void 0:a.email)}async connectedCallback(){super.connectedCallback(),this.getCurrentContactFromUrl(),await A.refreshAccounts(),this.disposeReaction=$t(()=>f.get(),()=>{this.contact=f.get()})}disconnectedCallback(){super.disconnectedCallback(),this.disposeReaction()}async firstUpdated(){N.clear(),P.clear(),this.roles=ct.get(),this.contact=await this.contactController.getContact(this.contactId),this.contact.accounts=Zt(this.contact.accounts),f.set(this.contact)}async saveUser(){await st.update({id:this.contact.id,contactInput:{...this.contact}}),f.refresh()}async getCurrentContactFromUrl(){this.contactId=new URL(window.location.href).searchParams.get("id")\|\|void 0,this.contactId\|\|Gt(rt.UserManagement)}openDirtyPageWarning(t){this.confirmationDialogIsOpen=!0,this.requestedAccount=t}async handleAccountChange(t,e=!1){var i,o,a;if(!((i=this.contact)===null\|\|i===void 0)&&i.accounts){if(!e&&!((o=this.userDetailsPanel)===null\|\|o===void 0)&&o.isDirty){this.openDirtyPageWarning(t);return}this.account=[P.get(),...this.contact.accounts].find(n=>n.accountNumber===t),this.userDetailsPanel=await this.userDetailsPanelAsync,(a=this.userDetailsPanel)===null\|\|a===void 0\|\|a.loadAccount()}}renderDialogs(){return c`<changes-confirmation id="confirmation-dialog" ?isOpen="${this.confirmationDialogIsOpen}" headerText="You have unsaved changes." bodyText="If you leave this account, you will lose the changes you made." confirmationButtonText="Discard Changes" cancelButtonText="Dismiss" @confirm="${async()=>{this.handleAccountChange(this.requestedAccount,!0);const t=await this.userDetailsPanel;t==null\|\|t.resetForm(),this.confirmationDialogIsOpen=!1}}" @cancel="${()=>{this.confirmationDialogIsOpen=!1}}"> </changes-confirmation> <before-leave-dialog .isDirtyCallback="${()=>{var t;return(t=this.userDetailsPanel)===null\|\|t===void 0?void 0:t.isDirty}}"> </before-leave-dialog>`}renderLoading(){return c`<ix-progress aria-label="User details panel" indeterminate> </ix-progress>`}renderContent(){var t,e,i;return!this.contact\|\|!this.contact.accounts?this.renderLoading():c` <div class="flex flex-col h-full overflow-hidden lg:flex-row gap-6"> <div class="lg:w-1/3 user-details-view"> <nav class="crumbs" data-testid="${S.CRUMBS}"> <ol> <li class="crumb"> <a id="user-management" href="${ft(rt.UserManagement)}">User Management</a> </li> <li class="crumbs-separator">></li> <li class="crumb"> <a id="current-nav" href="${ft(rt.UserManagementDetails)}">${c`${this.fullName}`}</a> </li> </ol> </nav> <div class="user-details-account-panel"> <div> <user-details-view data-testid="${S.USER_DETAILS}" .contact="${f.get()}" .saveChanges="${()=>this.saveUser()}" .selectedAccountNumber="${(t=this.account)===null\|\|t===void 0?void 0:t.accountNumber}"></user-details-view> </div> <div> <accounts-card data-testid="${S.ACCOUNTS_CARD}" .contact="${f.get()}" .activeAccountNumber="${(i=(e=this.account)===null\|\|e===void 0?void 0:e.accountNumber)!==null&&i!==void 0?i:""}" .assignableAccounts="${this.assignableAccounts}" .readonly="${this.readonly}" @change-account="${o=>this.handleAccountChange(o.detail.accountNumber,o.detail.overrideUnsavedChanges)}"></accounts-card> </div> </div> </div> <div class="rounded-lg um-card grow overflow-auto md:mx-4 lg:mx-0"> <user-details-panel data-testid="${S.USER_MANAGEMENT_PANEL}" id="user-management-panel" .contact="${f.get()}" .account="${this.account}" .roles="${this.roles}" .readonly="${this.readonly}" @reload-account="${o=>this.handleAccountChange(o.detail.accountNumber,o.detail.overrideUnsavedChanges)}"> </user-details-panel> </div> </div> ${this.renderDialogs()} `}render(){return this.isPageLoading?this.renderLoading():this.renderContent()}};D.styles=[he,k],s([u()],D.prototype,"account",void 0),s([u()],D.prototype,"contact",void 0),s([u()],D.prototype,"contactId",void 0),s([u()],D.prototype,"roles",void 0),s([u()],D.prototype,"isPageLoading",void 0),s([u()],D.prototype,"confirmationDialogIsOpen",void 0),s([L("#user-management-panel")],D.prototype,"userDetailsPanelAsync",void 0),D=s([U("user-management-details-view")],D);export{D as UserManagementDetailsView};
1	+ import{__decorate as i}from"tslib";import{LitElement as z,html as c,nothing as u,css as K}from"lit";import{property as d,query as $,queryAsync as q,customElement as D,state as r}from"lit/decorators.js";import{MobxLitElement as W}from"@adobe/lit-mobx";import{reaction as Kt}from"mobx";import{elementTheme as Y,baseTheme as $t}from"@digital-realty/theme";import{cache as qt}from"lit/directives/cache.js";import{x as rt,U as dt,T,y as ut,z as wt,C as Rt,t as ht,q as B,B as Et,d as pt,A as st,D as Z,E as ot,u as w,F as Dt,G as Ht,e as Nt,v as Wt,H as vt,I as J,J as Yt,K as Zt,L as Jt,M as Qt,s as mt,N as Ct,O as Xt,P as Q,Q as St,j as gt,S as Tt,V as te,W as ee,X as It,Y as _t,Z as se,_ as Ut,$ as N,a0 as oe,a1 as ie,a2 as ae,a3 as ne,a4 as ce,a5 as le,a6 as re,a7 as Ot,a8 as de,l as kt,a9 as ue,aa as he,h as bt,ab as pe,c as xt,ac as ve,ad as me,ae as ge,af as be,o as xe,w as ye,n as fe,g as Ft,R as yt}from"./ui-user-management.js";import"@digital-realty/ix-tabs/ix-tabs.js";import"@digital-realty/ix-tabs/ix-primary-tab.js";import"@digital-realty/ix-button/ix-button.js";import"@digital-realty/ix-date/ix-date.js";import"@digital-realty/ix-menu/ix-menu.js";import"@digital-realty/ix-menu/ix-menu-item.js";import"@digital-realty/ix-progress/ix-progress.js";import{findChildNodeById as Ae,updateNodeCheckedStatus as ft,isAnyNodeChecked as $e,calculateCheckedEndNodesCount as we}from"@digital-realty/ix-generic-tree";import"@digital-realty/ix-phone-input/ix-phone-input.js";import"@digital-realty/ix-dialog/ix-dialog.js";import"@digital-realty/ix-textbox/ix-textbox.js";import"@digital-realty/ix-checkbox/ix-checkbox.js";import"@digital-realty/ix-phone-number/ix-phone-number.js";import"@digital-realty/ix-divider/ix-divider.js";import{computePosition as Re,offset as Ee,flip as De,shift as Ne}from"@floating-ui/dom";import"@digital-realty/ix-icon/ix-icon.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-tree/ix-tree.js";import"@digital-realty/ix-multi-select/ix-multi-select.js";import"./ui-user-management5.js";import"toastify-js";import"@microsoft/applicationinsights-web";import"graphql-request";import"oidc-client-ts";import"i18next";import"lit-i18n";import"@vaadin/router";import"libphonenumber-js";import"lit/directives/class-map.js";import"validator";import"lit/directives/repeat.js";import"@digital-realty/ix-card/ix-card.js";import"lodash.debounce";import"@digital-realty/ix-generic-tree/ix-generic-tree.js";import"@digital-realty/ix-accordion/ix-accordion.js";import"@material/web/icon/icon.js";import"@digital-realty/ix-select/ix-select.js";const Ce={ACTIVE:"Active",DRAFT:"Draft",INVITED:"Invited",REMOVED:"Removed",SUSPENDED:"Suspended",DECLINED:"Declined"},Lt={ACTIVE:"check_circle",DRAFT:"edit",INVITED:"mail",REMOVED:"delete_forever",SUSPENDED:"warning",DECLINED:"do_not_disturb_on"},b={ACTIVE:"ACTIVE",DRAFT:"DRAFT",INVITED:"INVITED",DECLINED:"DECLINED",SUSPENDED:"SUSPENDED",REMOVED:"REMOVED"},At={ACTIVE:"#4CAF50",DRAFT:"#1456E0",SUSPENDED:"#DB0028",INVITED:"rgb(255, 152, 0)",REMOVED:"rgb(109, 117, 140)",DECLINED:"rgb(109, 117, 140)"},P={ROLES:{key:"roles",text:"ROLES AND PORTAL ACCESS"},USERFLAGS:{key:"flags",text:"USER FLAGS"}};class Bt{}Bt.TAB=t=>`user-details-navigation-tab-${t}`;let M=class extends z{constructor(){super(...arguments),this.disableEscapeKeyBinding=this.disableEscapeKey.bind(this),this.view=P.ROLES,this.showFlags=!1,this.showRoles=!0}get viewIndex(){return this.view===P.ROLES?0:1}connectedCallback(){super.connectedCallback(),this.tabs&&this.tabs.addEventListener("keydown",this.disableEscapeKeyBinding)}disconnectedCallback(){super.disconnectedCallback(),this.tabs&&this.tabs.removeEventListener("keydown",this.disableEscapeKeyBinding)}disableEscapeKey(t){return t.which===27?!1:null}firstUpdated(){this.tabsAsync.then(t=>{t.activeTabIndex=this.viewIndex})}dispatchNavigationEvent(t){this.navigate&&(this.view=t,this.navigate(t))}renderNavigation(t){return c`<ix-primary-tab @click="${()=>this.dispatchNavigationEvent(t)}" .activeDisabled="${t.key===this.view.key}" data-testid="${Bt.TAB(t.key)}"><span class="font-bold flex items-center uppercase">${t.text}</span> </ix-primary-tab>`}render(){return!this.showRoles&&!this.showFlags?c`${u}`:c`<ix-tabs id="navigation-tabs" hideScrollBar left-align data-testid="ix-tabs-navigation"> ${this.renderNavigation(P.ROLES)} ${this.showFlags?this.renderNavigation(P.USERFLAGS):u} </ix-tabs> <div class="user-detail-navigation"></div>`}};M.styles=[rt,dt,T,Y],i([d({type:Object})],M.prototype,"navigate",void 0),i([d({type:Object})],M.prototype,"view",void 0),i([d({type:Boolean})],M.prototype,"showFlags",void 0),i([d({type:Boolean})],M.prototype,"showRoles",void 0),i([$("#navigation-tabs")],M.prototype,"tabs",void 0),i([q("#navigation-tabs")],M.prototype,"tabsAsync",void 0),M=i([D("user-details-navigation")],M);var R;(function(t){t[t.hidden=0]="hidden",t[t.disabled=1]="disabled",t[t.enabled=2]="enabled"})(R\|\|(R={}));const it={Active:"ACTIVE",Draft:"DRAFT",Invited:"INVITED",Suspended:"SUSPENDED",Removed:"REMOVED",Declined:"DECLINED"},Se=async(t,e)=>{const s={contactId:e,accountNumber:t};return await ut.create({accountAssociationInput:s})},at=async(t,e,s)=>{const o=(await ut.get({accountNumber:t,contactId:e})).find(a=>a.accountNumber===t);if(!(o!=null&&o.id))throw new Error("Account data not found.");return await ut.update({id:o.id,accountAssociationStatusUpdate:{status:s}})},Pt=t=>{const e=Object.keys(b);return t.sort((s,o)=>e.indexOf(s.status)-e.indexOf(o.status))};var X;(function(t){t.Checked="CHECKED",t.Indeterminate="INDETERMINATE",t.Inherited="INHERITED",t.Unchecked="UNCHECKED"})(X\|\|(X={}));const Te=async(t,e)=>await Rt.get({contactId:t,accountNumber:e}),Ie=async t=>{for(const e of t)Rt.delete({id:e.id})},Mt=async(t,e,s)=>{const o={accountNumber:e,contactId:t,flagLocations:[]};return s.forEach(a=>{const n={flag:a.key,locations:[]};a.items.forEach(l=>{if(!l.customerKnownSpaceName&&l.label!=="Global")throw new Error("Customer Known Space Name is missing.");n.locations.push({id:l.id,customerKnownName:l.customerKnownSpaceName,permissionStatus:l.checked?X.Checked:X.Unchecked})}),o.flagLocations.push(n)}),wt.saveAccountFlagInventory(o)},Vt=async(t,e)=>await ht.get({contactId:t,accountNumber:e}),zt=async t=>{for(const e of t)ht.delete({id:e.id})},jt=async(t,e,s)=>{const o={accountNumber:e,contactId:t,roleLocations:[]};return s.forEach(a=>{const n={roleId:a.key,locations:[]};a.items.forEach(l=>{if(!l.customerKnownSpaceName&&l.label!=="Global")throw new Error("Customer Known Space Name is missing.");n.locations.push({id:l.id,customerKnownName:l.customerKnownSpaceName,permissionStatus:l.checked?X.Checked:X.Unchecked})}),o.roleLocations.push(n)}),wt.saveAccountRoleInventory(o)};class Gt{constructor(e){(this._host=e).addController(this)}hostConnected(){}hostDisconnected(){}hostUpdate(){}async add(e,s,o=!0){try{const a=await Se(e,s);if(a)return await at(e,s,it.Active),o&&B("Account association added.",3e3,"center"),a;throw new Error("Account association could not be created.")}catch(a){return null}}async restore(e,s,o=!0){try{await at(e,s,it.Active),o&&B("Account association restored.",3e3,"center")}catch(a){throw new Error("Account association could not be restored.")}}async suspend(e,s){try{await at(e,s,it.Suspended),B("Account association suspended.",3e3,"center")}catch(o){throw new Error("Account association could not be suspended.")}}async remove(e,s){try{await at(e,s,it.Removed);const o=(await Vt(s,e)).filter(n=>n.isActive),a=await Te(s,e);await zt(o),await Ie(a),B("Account association removed.",3e3,"center")}catch(o){throw new Error("Account association could not be removed.")}}}class _e extends Et{async refresh(){const e=await pt.get({id:this.get().id});e&&this.set(e)}}const E=new _e({});class m{}m.BTN_RESTORE_ACCESS="udc-btn-restore-access",m.BTN_SUSPEND_ACCESS="udc-btn-suspend-access",m.BTN_REMOVE_ACCOUNT="udc-btn-remove-account",m.BTN_RESEND_INVITE="udc-btn-resend-invite",m.BTN_DRAFT_CANCEL="udc-btn-draft-cancel",m.BTN_DRAFT_SAVE="udc-btn-draft-save",m.ACCOUNT_NAME="udc-account-name",m.ACCOUNT_STATUS="udc-account-status",m.BTN_SAVE="udc-btn-save",m.BTN_CANCEL="udc-btn-cancel";let y=class extends W{constructor(){super(...arguments),this.accountAssociationController=new Gt(this),this.roles=[],this.saveControls=R.hidden,this.isLoading=!1,this.readonly=!1,this.actionsDisabled=!1,this.removeAccountDialogOpen=!1,this.suspendingAccess=!1,this.restoringAccess=!1,this.removingAccount=!1,this.savingChanges=!1,this.cancellingChanges=!1,this.mobileMenuOpen=!1}statusIcon(t){return Lt[t]}dispatchUpdateEvent(){this.dispatchEvent(new CustomEvent(st.UpdateChanges,{detail:"no-toast"}))}dispatchReloadAccountEvent(t=!1){var e;this.dispatchEvent(new CustomEvent(st.ReloadAccount,{detail:{accountNumber:(e=this.account)===null\|\|e===void 0?void 0:e.accountNumber,overrideUnsavedChanges:t}}))}async addAccount(){var t,e,s;this.actionsDisabled=!0,this.savingChanges=!0,!((t=this.contact)===null\|\|t===void 0)&&t.accounts.some(o=>{var a;return o.accountNumber===((a=this.account)===null\|\|a===void 0?void 0:a.accountNumber)&&o.status==="REMOVED"})?await this.accountAssociationController.restore((e=this.account)===null\|\|e===void 0?void 0:e.accountNumber,this.contact.id):await this.accountAssociationController.add((s=this.account)===null\|\|s===void 0?void 0:s.accountNumber,this.contact.id),this.emitRoleUpdates&&await this.emitRoleUpdates(),await E.refresh(),Z.clear(),this.dispatchUpdateEvent(),this.actionsDisabled=!1,this.savingChanges=!1}async restoreAccount(){var t;this.actionsDisabled=!0,this.restoringAccess=!0,await this.accountAssociationController.restore((t=this.account)===null\|\|t===void 0?void 0:t.accountNumber,this.contact.id),await E.refresh(),this.dispatchReloadAccountEvent(!0),this.actionsDisabled=!1,this.restoringAccess=!1}async suspendAccount(){var t;this.actionsDisabled=!0,this.suspendingAccess=!0,await this.accountAssociationController.suspend((t=this.account)===null\|\|t===void 0?void 0:t.accountNumber,this.contact.id),await E.refresh(),this.dispatchReloadAccountEvent(!0),this.actionsDisabled=!1,this.suspendingAccess=!1}async removeAccount(){var t;this.actionsDisabled=!0,this.removingAccount=!0,await this.accountAssociationController.remove((t=this.account)===null\|\|t===void 0?void 0:t.accountNumber,this.contact.id),await E.refresh(),this.actionsDisabled=!1,this.removingAccount=!1,this.removeAccountDialogOpen=!1,this.dispatchReloadAccountEvent()}cancelChanges(){var t,e,s;this.actionsDisabled=!0;const o=`${Z.get().accountNumber}:${(t=this.contact)===null\|\|t===void 0?void 0:t.id}`;if(ot.remove(o),!(!((e=this.contact)===null\|\|e===void 0)&&e.accounts.find(a=>{var n;return a.accountNumber===((n=this.account)===null\|\|n===void 0?void 0:n.accountNumber)}))){const[a]=((s=this.contact)===null\|\|s===void 0?void 0:s.accounts)\|\|[];a&&(this.account=a)}this.dispatchReloadAccountEvent(!0),this.actionsDisabled=!1}openMobileOptions(){this.mobileMenuOpen=!this.mobileMenuOpen}resendInvite(){B("Invitation has been re-sent.",3e3,"center")}renderRemoveAccountButton(){return c`<ix-button appearance="filled" class="cancel" ?disabled="${this.actionsDisabled}" @click="${()=>{this.removeAccountDialogOpen=!0}}" id="remove-account-button" data-testid="${m.BTN_REMOVE_ACCOUNT}"><span class="remove-account">Remove Account</span></ix-button>`}renderRestoreSuspendRemove(){var t,e,s;return this.isLoading?u:this.saveControls?u:this.readonly?u:((t=this.account)===null\|\|t===void 0?void 0:t.status)===b.SUSPENDED?c`<ix-button @click="${this.restoreAccount}" ?disabled="${this.actionsDisabled&&!this.restoringAccess}" ?submitting="${this.restoringAccess}" id="restore-account-button" class="mr-1" data-testid="${m.BTN_RESTORE_ACCESS}"> <span class="font-bold">Restore Access</span> </ix-button> ${this.renderRemoveAccountButton()}`:((e=this.account)===null\|\|e===void 0?void 0:e.status)===b.ACTIVE?c`<ix-button id="suspend-button" class="suspend-button cancel" appearance="outlined" ?disabled="${this.actionsDisabled&&!this.suspendingAccess}" ?submitting="${this.suspendingAccess}" @click="${this.suspendAccount}" data-testid="${m.BTN_SUSPEND_ACCESS}"> Suspend Access </ix-button> ${this.renderRemoveAccountButton()}`:((s=this.account)===null\|\|s===void 0?void 0:s.status)===b.INVITED?c` ${this.renderRemoveAccountButton()}`:u}renderRestoreSuspendRemoveMobile(){var t,e,s,o,a;return this.isLoading?u:this.saveControls?u:w.isProfileOfLoggedInUser((t=this.contact)===null\|\|t===void 0?void 0:t.email)?u:!w.hasExternalUserUpdate((e=this.account)===null\|\|e===void 0?void 0:e.accountNumber)&&!w.hasExternalUserCreate((s=this.account)===null\|\|s===void 0?void 0:s.accountNumber)?u:((o=this.account)===null\|\|o===void 0?void 0:o.status)===b.SUSPENDED?c`<ix-menu-item @click="${this.restoreAccount}"><span class="font-bold">Restore Access</span> </ix-menu-item> <ix-menu-item @click="${()=>{this.removeAccountDialogOpen=!0}}"><span class="font-bold">Remove Account</span> </ix-menu-item>`:((a=this.account)===null\|\|a===void 0?void 0:a.status)===b.ACTIVE?c`<ix-menu-item @click="${this.suspendAccount}"><span class="font-bold">Suspend Access</span> </ix-menu-item> <ix-menu-item @click="${()=>{this.removeAccountDialogOpen=!0}}"><span class="font-bold">Remove Account</span> </ix-menu-item>`:u}renderResendInviteButton(){var t;return((t=this.account)===null\|\|t===void 0?void 0:t.status)!==b.INVITED\|\|this.isLoading?u:c`<ix-button appearance="filled" @click="${()=>this.resendInvite()}" id="resend-invite-button" data-testid="${m.BTN_RESEND_INVITE}"><span class="font-bold">Resend <br>Invite</span> </ix-button>`}renderButtons(){return this.isLoading\|\|this.saveControls===R.hidden?u:c`<div id="draft-assignment-controls" class="panel-button-container"> <ix-button appearance="outlined" ?disabled="${this.actionsDisabled}" ?submitting="${this.cancellingChanges}" @click="${()=>this.cancelChanges()}" id="cancel-role-button" data-testid="${m.BTN_CANCEL}"> Cancel </ix-button> <ix-button id="save-role-button" ?disabled="${this.saveControls===R.disabled\|\|this.actionsDisabled}" ?submitting="${this.savingChanges}" @click="${this.dispatchUpdateEvent}" data-testid="${m.BTN_SAVE}"> Save </ix-button> </div>`}renderDraftButtons(){return this.isLoading?u:c`<div id="draft-association-controls" class="panel-button-container"> <ix-button id="cancel-role-button" appearance="outlined" ?disabled="${this.actionsDisabled}" @click="${this.cancelChanges}" data-testid="${m.BTN_DRAFT_CANCEL}"> Cancel </ix-button> <ix-button appearance="filled" id="save-role-button" ?disabled="${(this.actionsDisabled\|\|this.saveControls===R.disabled\|\|this.saveControls===R.hidden)&&!this.savingChanges}" ?submitting="${this.actionsDisabled}" @click="${this.addAccount}" data-testid="${m.BTN_DRAFT_SAVE}"> Save </ix-button> </div>`}renderStatus(){var t,e;if(!this.account\|\|this.isLoading)return u;const s=this.account.status;return s===b.REMOVED?c`<div class="panel-status"> <p class="dlr-text-small" data-testid="${m.ACCOUNT_STATUS}">Account Removed</p> <ix-icon filled>${this.statusIcon(s)}</ix-icon> </div>`:s===b.DECLINED?c`<div class="panel-status"> <p class="dlr-text-small" data-testid="${m.ACCOUNT_STATUS}"> Account Invitation Declined By User </p> <ix-icon filled>${this.statusIcon(s)}</ix-icon> </div>`:s===b.SUSPENDED?c`<div class="panel-status"> <p class="dlr-text-small account-status-suspend" data-testid="${m.ACCOUNT_STATUS}"> Suspended on <ix-date type="static" value="${(t=this.account)===null\|\|t===void 0?void 0:t.statusUpdateAt}"></ix-date> </p> <ix-icon filled class="warning text-2xl">${this.statusIcon(s)}</ix-icon> </div>`:this.account.status===b.INVITED?c`<div class="panel-status"> <p class="dlr-text-small" data-testid="${m.ACCOUNT_STATUS}"> Invited on <ix-date type="static" value="${(e=this.account)===null\|\|e===void 0?void 0:e.statusUpdateAt}"></ix-date> </p> <ix-icon filled style="${`color: ${At[s]}`}">${this.statusIcon(s)}</ix-icon> </div>`:this.account.status===b.DRAFT?c`<div class="panel-status"> <p class="dlr-text-small" data-testid="${m.ACCOUNT_STATUS}">Draft</p> <ix-icon class="text-2xl" filled style="${`color: ${At[s]}`}">${this.statusIcon(s)}</ix-icon> </div>`:c`<div class="panel-status"> <ix-icon style="color:#4caf50" filled class="mt-1 text-2xl">${this.statusIcon(s)}</ix-icon> <p class="dlr-text-small" data-testid="${m.ACCOUNT_STATUS}">Active</p> </div>`}renderRemoveAccountConfirmation(){return c`<changes-confirmation id="remove-account-dialog" data-testid="remove-account-dialog" class="z-50 relative" ?isOpen="${this.removeAccountDialogOpen}" ?submitting="${this.removingAccount}" .headerText="${"The user will no longer be able to access this account."}" .confirmationButtonText="${"Remove Account"}" @confirm="${()=>{this.removeAccount()}}" @cancel="${()=>{this.removeAccountDialogOpen=!1}}"> </changes-confirmation>`}render(){var t;return this.account?c`<div> <div class="flex items-center p-4 pb-0 lg:p-2 justify-between user-status"> <div class="flex items-center user-status-header"> <h1 class="dlr-text-heading lg:pl-4" data-testid="${m.ACCOUNT_NAME}"> ${(t=this.account.displayName)!==null&&t!==void 0?t:this.account.name} </h1> <span style="position:relative"> <ix-icon id="anchor" filled class="cursor-pointer mobile-options" @click="${this.openMobileOptions}">more_vert</ix-icon> <ix-menu anchor="anchor" ?open="${this.mobileMenuOpen}"> ${this.renderRestoreSuspendRemoveMobile()} </ix-menu> </span> </div> <div class="user-details-controls flex items-center pr-4"> ${this.renderStatus()} ${this.renderResendInviteButton()} ${this.renderRestoreSuspendRemove()} ${this.account.status===b.DRAFT?this.renderDraftButtons():this.renderButtons()} ${this.renderRemoveAccountConfirmation()} </div> </div> </div>`:u}};y.styles=[rt,dt,T,Y],i([d()],y.prototype,"account",void 0),i([d()],y.prototype,"contact",void 0),i([d()],y.prototype,"roles",void 0),i([d()],y.prototype,"saveControls",void 0),i([d()],y.prototype,"isLoading",void 0),i([d({type:Boolean})],y.prototype,"readonly",void 0),i([r()],y.prototype,"actionsDisabled",void 0),i([r()],y.prototype,"removeAccountDialogOpen",void 0),i([r()],y.prototype,"suspendingAccess",void 0),i([r()],y.prototype,"restoringAccess",void 0),i([r()],y.prototype,"removingAccount",void 0),i([r()],y.prototype,"savingChanges",void 0),i([r()],y.prototype,"cancellingChanges",void 0),i([r()],y.prototype,"mobileMenuOpen",void 0),i([d()],y.prototype,"emitRoleUpdates",void 0),y=i([D("user-details-controls")],y);const Ue=K`@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf) format('truetype')}.material-icons{font-family:'Material Icons';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr}ix-dialog{--md-dialog-container-color:#fff}ix-icon-button{--md-sys-color-on-surface-variant:var(--md-sys-color-primary)}ix-select{--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd;--md-menu-container-color:#fff}ix-select.thick{--md-menu-container-shape:10px}ix-select.slim{--md-outlined-field-bottom-space:2px;--md-outlined-field-top-space:2px}ix-button{--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd}ix-button .disabled{color:var(--md-sys-text-color-disabled)}.btn_primary{--md-filled-button-container-color:var(--md-sys-color-primary)}.btn_primary ix-icon{color:var(--md-sys-color-on-primary)}.btn_secondary{--md-filled-button-container-color:var(--md-sys-color-secondary)}.btn_secondary ix-icon{color:var(--md-sys-color-on-secondary)}.btn_tertiary{--md-filled-button-container-color:var(--md-sys-color-tertiary)}.btn_tertiary ix-icon{color:var(--md-sys-color-on-tertiary)}.btn_danger{--md-filled-button-container-color:var(--md-sys-color-error)}.btn_danger ix-icon{color:var(--md-sys-color-on-error)}.icon-btn_primary ix-icon{color:var(--md-sys-color-primary)}.icon-btn_secondary ix-icon{color:var(--md-sys-color-secondary)}.icon-btn_tertiary ix-icon{color:var(--md-sys-color-tertiary)}.icon-btn_danger ix-icon{color:var(--md-sys-color-error)}ix-icon.icon-lg{--ix-icon-font-size:32px}.dialog-form{min-width:500px;display:flex;flex-direction:column;justify-content:space-between;padding:8px 24px 20px}.dialog-form .textfield{width:100%}.dialog-form.sm{min-width:560px}.dialog-form__textbox{padding-top:1rem}.dialog-actions{display:flex;justify-content:flex-end;padding:8px 15px 8px 20px}@media only screen and (min-width:5px) and (max-width:600px){ix-dialog{--md-dialog-container-shape:6px}}@media only screen and (min-width:601px){ix-dialog{--md-dialog-container-shape:3px}}.removed-account-container{padding:1.5rem;display:flex;flex-direction:column;gap:24px}.removed-account-row{display:flex;flex-direction:column;overflow-wrap:anywhere}.removed-account-title{margin:0;text-transform:uppercase;color:rgba(9,34,65,.7)}.removed-account-text{margin:0;color:#092241}`;let F=class extends z{constructor(){super(...arguments),this.roles=[],this.userRoleAssignments=[]}get dateText(){return this.status==="DECLINED"?"Account Invitation Declined By User On":"Account Removed On"}renderRoles(){var t;return this.roles&&((t=this.role)===null\|\|t===void 0?void 0:t.length)===1?c`${this.roles[0].name}`:this.userRoleAssignments.map(e=>c`${e.name}<br>`)}update(t){(t.has("contactID")\|\|t.has("accountNumber"))&&this.getRoleAssignments(),super.update(t)}async getRoleAssignments(){if(!this.contactID)return;const t=await ht.get({contactId:this.contactID,accountNumber:this.accountNumber}),e=new Set(t.map(s=>s.roleId));this.userRoleAssignments=this.roles.filter(s=>e.has(s.id))}render(){return c`<div class="removed-account-container"> <div class="removed-account-row"> <span class="removed-account-title">${this.dateText}</span> <p class="removed-account-text"> <ix-date type="static" value="${this.changedAt}"></ix-date> </p> </div> ${this.status==="REMOVED"?c`<div class="removed-account-row"> <span class="removed-account-title">Account Removed by</span> <p class="removed-account-text">${this.changedBy}</p> </div>`:u} <div class="removed-account-row"> <span class="removed-account-title">Roles</span> <p class="removed-account-text">${this.renderRoles()}</p> </div> </div>`}};F.styles=[Ue],i([d({type:String})],F.prototype,"status",void 0),i([d({type:String})],F.prototype,"accountNumber",void 0),i([d({type:String})],F.prototype,"contactID",void 0),i([d({type:Array,attribute:!1})],F.prototype,"roles",void 0),i([d({type:String,attribute:!1})],F.prototype,"changedBy",void 0),i([d({type:String,attribute:!1})],F.prototype,"changedAt",void 0),i([r()],F.prototype,"userRoleAssignments",void 0),F=i([D("user-account-removed-declined")],F);class Oe extends Et{getAsRoles(){return Dt(this.get())}removeRole(e){const s=this.get().filter(o=>o.roleId!==e);this.set(s)}}const U=new Oe([]);class ke{constructor(e){(this._host=e).addController(this)}hostConnected(){}hostDisconnected(){}hostUpdate(){}async removeRoleAssignment(e){try{await zt(e),B("Role removed.",3e3,"center")}catch(s){throw new Error("Failed to remove role assignment.")}}}class tt{}tt.DIALOG_ADD_ROLE="user-details-panel-dialog-add-role",tt.DIALOG_REMOVE_ROLE="user-details-panel-dialog-remove-role",tt.PROGRESS_BAR="user-details-panel-progress-bar";let g=class extends W{constructor(){super(...arguments),this.roleAssignmentController=new ke(this),this.onSuccess=B,this.roles=[],this.userFlagTrees=[],this.assignedRoleTrees=[],this.readonly=!1,this.isPanelLoading=!1,this.roleAssignments=[],this.viewRoute=P.ROLES,this.saveControls=R.hidden,this.flagUpdates=[],this.roleUpdates=[],this.activeRoleId="",this.permissionData=[],this.removeRoleDialogOpen=!1,this.redundantStatuses=["DECLINED","REMOVED"],this.emitRoleUpdates=async()=>{const t=await this.userDetailsAssignments;t&&t.emitUpdates()},this.saveAssignments=async t=>{var e,s,o;const a=`${(e=this.account)===null\|\|e===void 0?void 0:e.accountNumber}:${(s=this.contact)===null\|\|s===void 0?void 0:s.id}`,n=ot.capture(a);if(!this.flagUpdates.length&&n){ot.lock(a);for(const v of this.userFlagTrees)v.updateService=new Ht,n.forEach(S=>{var ct;const lt=Ae(v.rootNode,S.id);lt&&(lt.checked=!0,ft(lt,v.rootNode),(ct=v.updateService)===null\|\|ct===void 0\|\|ct.update(v.rootNode))}),v.updateService.updates.length&&this.flagUpdates.push({key:v.label,items:v.updateService.updates})}const l=await this.controlsComponent;if(l.actionsDisabled=!0,l.savingChanges=!0,!this.roleUpdates.length&&!this.flagUpdates.length)return;const h={role:void 0,flag:void 0};this.roleUpdates.length&&(h.role=await jt(this.contact.id,this.account.accountNumber,this.roleUpdates),U.clear(),this.roleUpdates=[]),this.flagUpdates.length&&(h.flag=await Mt(this.contact.id,this.account.accountNumber,this.flagUpdates),h.flag&&ot.remove(a),this.flagUpdates=[]),this.dispatchReloadAccountEvent((o=this.account)===null\|\|o===void 0?void 0:o.accountNumber,!0),l.actionsDisabled=!1,l.savingChanges=!1,this.isPanelLoading=!1;const A=(t==null?void 0:t.detail)==="no-toast";if(h.role===null&&h.flag===null){Nt("Could not save changes.",3e3,"center");return}(h.flag\|\|h.role)&&!A&&B("Changes saved.",3e3,"center"),(h.flag===null\|\|h.role===null)&&Nt(`Could not save ${h.flag?"flag":h.role?"":"role"} assignments.`,3e3,"center")},this.dispatchOpenConfirmation=()=>{this.removeRoleDialogOpen=!0},this.dispatchReloadAccountEvent=async(t,e=!1)=>{this.resetForm(),this.dispatchEvent(new CustomEvent(st.ReloadAccount,{detail:{accountNumber:t,overrideUnsavedChanges:e}}))}}updated(t){super.updated(t),window.sessionStorage.setItem(Wt.SessionStorage.HasOutstandingChanges,this.isDirty?"true":"false"),t.has("account")&&(this.viewRoute=P.ROLES)}get fullName(){var t,e;return`${(t=this.contact)===null\|\|t===void 0?void 0:t.firstName} ${(e=this.contact)===null\|\|e===void 0?void 0:e.lastName}`}get canAddRoles(){return!this.readonly&&this.addableRoles.length>0}get canRemoveRoles(){var t;return!this.readonly&&((t=this.assignedRoles)===null\|\|t===void 0?void 0:t.length)}get addRolesDisabled(){var t,e,s,o,a;if(!(!((t=this.account)===null\|\|t===void 0)&&t.accountNumber))return!0;const n=vt(this.account.accountNumber,this.roles,J((e=this.contact)===null\|\|e===void 0?void 0:e.email)&&w.hasAssignInternalRoleCreate((s=this.account)===null\|\|s===void 0?void 0:s.accountNumber)).length;return((a=(o=this.assignedRoles)===null\|\|o===void 0?void 0:o.length)!==null&&a!==void 0?a:0)>=n}get addableRoles(){return this.roles.filter(t=>{var e;return!(!((e=this.assignedRoles)===null\|\|e===void 0)&&e.find(s=>s.id===t.id))})}get isDirty(){return this.roleUpdates.length>0\|\|this.flagUpdates.length>0\|\|U.get().length}get showUserFlags(){var t,e;return w.hasExternalUserRead((t=this.account)===null\|\|t===void 0?void 0:t.accountNumber)&&((e=this.account)===null\|\|e===void 0?void 0:e.status)!=="REMOVED"}get showRoles(){var t;return((t=this.account)===null\|\|t===void 0?void 0:t.status)!=="REMOVED"}firstUpdated(){this.account&&this.loadAccount()}async loadAccount(){const t=await this.userDetailsAssignments;t==null\|\|t.assignmentUpdateManagers.forEach(e=>e.nodeManager.reset()),this.roleUpdates=[],this.flagUpdates=[],this.isPanelLoading=!0,await this.getAssignedRoles(),this.isPanelLoading=!1,this.displayDefaultRole(),this.setShowControls()}async getAssignedRoles(){this.roleAssignments=(await Vt(this.contact.id,this.account.accountNumber)).filter(t=>t.isActive),this.assignedRoles=[...Dt(this.roleAssignments),...U.getAsRoles()],await this.getRoleAndFlagTrees()}async getRoleAndFlagTrees(){var t,e,s;if(!(!((t=this.assignedRoles)===null\|\|t===void 0)&&t.length))return;const o=this.assignedRoles.map(l=>l.id),[a,n]=await Yt(o,this.contact.id,this.account.accountNumber,J((e=this.contact)===null\|\|e===void 0?void 0:e.email));this.assignedRoleTrees=(s=structuredClone(a))===null\|\|s===void 0?void 0:s.filter(l=>l!==void 0),this.userFlagTrees=structuredClone(n)}displayDefaultRole(){var t;!((t=this.assignedRoles)===null\|\|t===void 0)&&t.length&&(this.activeRoleId=this.assignedRoles[0].id,this.selectRole(this.activeRoleId))}async selectRoleEventHandler(t){this.selectRole(t.detail.roleId)}async selectRole(t){this.activeRoleId=t;const e=await this.roleTabComponent;e==null\|\|e.setActiveRole(this.activeRoleId),this.setShowControls()}setShowControls(){var t;if(this.isPanelLoading\|\|((t=this.account)===null\|\|t===void 0?void 0:t.status)===b.REMOVED){this.saveControls=R.hidden;return}const e=this.assignedRoleTrees.filter(s=>s!==void 0).every(s=>$e(s.rootNode));U.get().length?this.saveControls=this.isDirty&&e?R.enabled:R.disabled:this.saveControls=this.isDirty?e?R.enabled:R.disabled:R.hidden}async addRole(t){const e=await this.addRoleDialog;e&&(e.isOpen=!1),this.isPanelLoading=!0;const s={roleId:t,contactId:this.contact.id,accountNumber:this.account.accountNumber,isActive:!0};U.set([...U.get(),s]);const o=Zt(s.roleId);if(!o\|\|!this.assignedRoles)return;this.assignedRoles=[...this.assignedRoles,o];const[a]=await Jt([t],this.contact.id,this.account.accountNumber,J(this.contact.email));this.assignedRoleTrees.push(a);const n=await this.addRoleDialog;n&&(n.isOpen=!1),this.isPanelLoading=!1,this.selectRole(o.id)}async removeRole(t){var e;const s=await this.userDetailsAssignments,o=this.assignedRoles.find(n=>n.id===t);if(!o)return;if(U.getAsRoles().findIndex(n=>n.id===o.id)>-1){U.removeRole(t);const n=s==null?void 0:s.assignmentUpdateManagers.find(l=>{var h;return l.accountId===((h=this.account)===null\|\|h===void 0?void 0:h.accountNumber)});n&&n.nodeManager.nodeUpdates.find(l=>l.key===t)&&n.nodeManager.remove(t),this.assignedRoles=this.assignedRoles.filter(l=>l.id!==o.id),this.assignedRoleTrees=(e=this.assignedRoleTrees)===null\|\|e===void 0?void 0:e.filter(l=>l!==void 0).filter(l=>l.role!==o.id)}else{this.isPanelLoading=!0;const n=this.roleAssignments.filter(l=>l.roleId===t&&l.isActive);await this.roleAssignmentController.removeRoleAssignment(n),await this.getAssignedRoles(),this.assignedRoles=this.assignedRoles.filter(l=>l.id!==o.id),this.isPanelLoading=!1}this.roleUpdates=this.roleUpdates.filter(n=>n.key!==t),this.assignedRoleTrees=this.assignedRoleTrees.filter(n=>!!n&&n.role!==o.id);const a=await this.roleTabComponent;a==null\|\|a.requestUpdate("assignedRoles",[]),this.displayDefaultRole()}resetForm(){this.displayDefaultRole(),this.roleUpdates=[],this.flagUpdates=[],Z.clear(),U.clear(),this.setShowControls()}updateView(t){this.viewRoute=t,t===P.ROLES&&this.selectRole(this.activeRoleId)}async openAddRoleDialog(){const t=await this.addRoleDialog;t&&t.handleOpenDialog()}removeRoleButtonStatus(){var t,e;const s=U.get().map(a=>a.roleId),o=(e=((t=this.assignedRoles)!==null&&t!==void 0?t:[]).filter(a=>!s.includes(a.id)))!==null&&e!==void 0?e:[];return s.find(a=>a===this.activeRoleId)!=null?!1:o.length<2}renderPermissions(){var t,e;return!(!((t=this.assignedRoles)===null\|\|t===void 0)&&t.length)\|\|this.redundantStatuses.includes((e=this.account)===null\|\|e===void 0?void 0:e.status)?u:c` <user-details-permission .activeRoleId="${this.activeRoleId}"> </user-details-permission> `}renderRemovedOrDeclinedAccount(){var t;return this.account?c` <user-account-removed-declined .status="${this.account.status}" .roles="${this.roles}" .accountNumber="${this.account.accountNumber}" .contactID="${(t=this.contact)===null\|\|t===void 0?void 0:t.id}" .changedBy="${this.account.statusUpdateBy}" .changedAt="${this.account.statusUpdateAt}"></user-account-removed-declined> `:u}renderRoles(){return!this.account\|\|!this.contact\|\|!this.assignedRoles?u:this.redundantStatuses.includes(this.account.status)?u:c` <user-details-tab-roles id="role-data-element" .assignedRoles="${this.assignedRoles}" .activeRoleId="${this.activeRoleId}" .canRemoveRoles="${this.canRemoveRoles}" .canAddRoles="${this.canAddRoles}" .removeRolesDisabled="${this.removeRoleButtonStatus()}" .addRolesDisabled="${this.addRolesDisabled}" @role-select="${t=>this.selectRoleEventHandler(t)}" @open-role-menu="${()=>this.openAddRoleDialog()}" @open-remove-role-menu="${()=>this.dispatchOpenConfirmation()}"> </user-details-tab-roles> `}renderLoading(){return this.isPanelLoading?c`<ix-progress aria-label="User details panel" .indeterminate="${!0}" data-testid="${tt.PROGRESS_BAR}"> </ix-progress>`:u}renderTree(){var t,e,s;if(!(!((t=this.assignedRoles)===null\|\|t===void 0)&&t.length))return u;let o;if(this.activeRoleId)o=this.assignedRoleTrees.filter(n=>n!==void 0).find(n=>n.role===this.activeRoleId);else{const[n]=this.assignedRoleTrees;o=n}const a=n=>{this.roleUpdates=n.detail.message.updates,this.setShowControls()};return o&&o.rootNode&&!this.redundantStatuses.includes((e=this.account)===null\|\|e===void 0?void 0:e.status)?c`<user-details-assignments .assignment="${o}" .contact="${this.contact}" .accountNumber="${(s=this.account)===null\|\|s===void 0?void 0:s.accountNumber}" .readonly="${this.readonly}" .activeRoleId="${this.activeRoleId}" @check-toggle="${a}"></user-details-assignments>`:u}renderFlags(){const t=e=>{this.flagUpdates=structuredClone(e.detail.message.updates),this.setShowControls()};return!this.account\|\|!this.userFlagTrees?u:c`<user-flags .flags="${this.userFlagTrees}" searchEnabled showCheckboxes .disableCheckboxes="${this.readonly}" .contact="${this.contact}" @check-toggle="${t}"></user-flags>`}renderControls(){return c`<user-details-controls .roles="${this.roles}" .account="${this.account}" .contact="${E.get()}" .saveControls="${this.saveControls}" .readonly="${this.readonly}" .emitRoleUpdates="${this.emitRoleUpdates}" ?isPanelLoading="${this.isPanelLoading}" @reset-changes="${()=>this.resetForm()}" @update-changes="${this.saveAssignments}" @reload-account="${t=>this.dispatchReloadAccountEvent(t.detail.accountNumber,t.detail.overrideUnsavedChanges)}"> </user-details-controls>`}renderRemoveRoleConfirmation(){return c`<changes-confirmation id="data-loss-dialog" class="z-50 relative" .headerText="${"Are you sure you want to remove this role?"}" .bodyText="${"The user will no longer be able to perform the permissions of this role for this account."}" .confirmationButtonText="${"Remove Role"}" ?isOpen="${this.removeRoleDialogOpen}" @confirm="${()=>{this.removeRole(this.activeRoleId),this.removeRoleDialogOpen=!1}}" @cancel="${()=>{this.removeRoleDialogOpen=!1}}" data-testid="${tt.DIALOG_REMOVE_ROLE}"> </changes-confirmation>`}renderAddAccountRoleConfirmation(){return this.assignedRoles?c`<add-account-role id="add-role-dialog" .contact="${this.contact}" .account="${this.account}" .roles="${this.roles}" .assignedRoles="${this.assignedRoles}" ?loading="${this.isPanelLoading}" @add-role="${t=>this.addRole(t.detail.roleId)}" data-testid="${tt.DIALOG_ADD_ROLE}"> </add-account-role>`:u}renderRoleView(){return c`<div id="roles-view"> <div>${this.renderRoles()}</div> <div class="grid grid-cols-1 xl:grid-cols-2 h-full p-4"> <div class="grow h-full">${this.renderPermissions()}</div> <div class="tree-view grow h-full lg:overflow-auto pl-2">${this.renderTree()}</div> </div> </div>`}renderFlagsView(){return this.showUserFlags===!1?u:c`<div id="flags-view"> <div class="grid grid-cols-1 xl:grid-cols-1 h-full"> <div class="grow h-full mt-6 px-4">${this.renderFlags()}</div> <div class="grow h-full mt-2 flag-text"> Learn more about user flags <a id="flag-text-link" href="#">here.</a> </div> </div> </div>`}renderNavigation(){var t;return this.isPanelLoading\|\|this.redundantStatuses.includes((t=this.account)===null\|\|t===void 0?void 0:t.status)?u:c`<div class="user-details-navigation"> <user-details-navigation .view="${this.viewRoute}" ?showFlags="${this.showUserFlags}" ?showRoles="${this.showRoles}" .navigate="${e=>this.updateView(e)}"></user-details-navigation> </div>`}renderView(){var t;let e=u;return this.showRoles&&this.viewRoute===P.ROLES&&(e=this.renderRoleView()),this.showUserFlags&&this.viewRoute===P.USERFLAGS&&(e=this.renderFlagsView()),this.redundantStatuses.includes((t=this.account)===null\|\|t===void 0?void 0:t.status)&&(e=this.renderRemovedOrDeclinedAccount()),e}render(){return c` <div class="user-details-panel"> ${this.renderControls()} ${this.renderNavigation()} ${qt(this.isPanelLoading?this.renderLoading():this.renderView())} </div> ${this.renderAddAccountRoleConfirmation()} ${this.renderRemoveRoleConfirmation()} `}};g.styles=[rt,dt,T,Y],i([d({type:Object,attribute:!1})],g.prototype,"account",void 0),i([d({type:Object,attribute:!1})],g.prototype,"contact",void 0),i([d({type:Array,attribute:!1})],g.prototype,"assignedRoles",void 0),i([d({type:Array,attribute:!1})],g.prototype,"roles",void 0),i([d({type:Array,attribute:!1})],g.prototype,"userFlagTrees",void 0),i([d({type:Array,attribute:!1})],g.prototype,"assignedRoleTrees",void 0),i([d({type:Boolean})],g.prototype,"readonly",void 0),i([r()],g.prototype,"isPanelLoading",void 0),i([r()],g.prototype,"roleAssignments",void 0),i([r()],g.prototype,"viewRoute",void 0),i([r()],g.prototype,"saveControls",void 0),i([r()],g.prototype,"flagUpdates",void 0),i([r()],g.prototype,"roleUpdates",void 0),i([r()],g.prototype,"activeRoleId",void 0),i([r()],g.prototype,"permissionData",void 0),i([r()],g.prototype,"removeRoleDialogOpen",void 0),i([q("#role-data-element")],g.prototype,"roleTabComponent",void 0),i([q("user-details-controls")],g.prototype,"controlsComponent",void 0),i([q("#add-role-dialog")],g.prototype,"addRoleDialog",void 0),i([q("user-details-assignments")],g.prototype,"userDetailsAssignments",void 0),i([q("user-flags")],g.prototype,"userFlags",void 0),g=i([D("user-details-panel")],g);class j{}j.FIRST_NAME="user-details-view-first-name",j.LAST_NAME="user-details-view-last-name",j.EMAIL="user-details-view-email",j.PHONE="user-details-view-phone";let C=class extends W{constructor(){super(...arguments),this.allowSave=!0,this.isEditProfileDialogOpen=!1}firstUpdated(){this.allowSave=!1}shouldUpdate(){return!!this.contact}willUpdate(t){t.has("contact")&&this.handleDialogReset()}handleDialogClose(){this.isEditProfileDialogOpen=!1,this.handleDialogReset()}handleDialogOpen(){this.isEditProfileDialogOpen=!0,this.validateDialogFields()}handleDialogReset(){mt(this.firstName,this.contact.firstName),mt(this.lastName,this.contact.lastName),mt(this.email,this.contact.email),Ct(this.phoneNumber,this.contact.phone),Xt(this.evacAssistance,this.contact.evacAssistance),this.allowSave=!0}validateDialogFields(){Q(this.firstName,this.firstName.value,"Invalid first name"),Q(this.lastName,this.lastName.value,"Invalid last name"),Q(this.email,this.email.value,"Invalid email"),St(this.phoneNumber,this.phoneNumber.value)}dispatchUpdateUserEvent(){var t,e,s,o,a;const n={...this.contact};n.firstName=(t=gt(this.firstName))!==null&&t!==void 0?t:this.firstName.value,n.lastName=(e=gt(this.lastName))!==null&&e!==void 0?e:this.lastName.value,n.email=(s=gt(this.email))!==null&&s!==void 0?s:this.email.value,n.phone=(o=Tt(this.phoneNumber))!==null&&o!==void 0?o:this.phoneNumber.value,n.evacAssistance=(a=te(this.evacAssistance))!==null&&a!==void 0?a:this.evacAssistance.checked,E.set({...n});try{this.saveChanges(n),B("Changes saved.",3e3,"center")}catch(l){if(l.statusCode==="400"){ee([this.firstName,this.lastName,this.email],l.errors),this.phoneNumber.error=!0;const h=l.errors.find(A=>A.field===this.phoneNumber.id);h&&(this.phoneNumber.errorText=h.error)}}finally{this.isEditProfileDialogOpen=!1}}renderEditForm(){var t,e,s,o,a,n,l,h;return c`<ix-dialog class="dialog z-50 relative" id="edit-profile-dialog" ?open="${this.isEditProfileDialogOpen}" @close="${()=>this.handleDialogClose()}"> <div class="dlr-text-heading" slot="headline">Edit Profile</div> <form class="dialog-form min-w-0 max-w-full max-[640px]:w-screen" slot="content" id="edit-profile-id" method="dialog"> <div class="user-profile-name-input-group grid grid-cols-1 sm:grid-cols-2"> <div class="user-profile-input"> <ix-textbox required="true" id="first-name" class="textbox" type="text" pattern="${It.name}" maxLength="50" label="First Name" placeholder="i.e. First Name" value="${(e=(t=this.contact)===null\|\|t===void 0?void 0:t.firstName)!==null&&e!==void 0?e:""}" @input="${()=>{this.allowSave=Q(this.firstName,this.firstName.value,"Invalid first name")}}"></ix-textbox> </div> <div class="user-profile-input"> <ix-textbox required="true" id="last-name" class="textbox" type="text" pattern="${It.name}" maxLength="50" label="Last Name" placeholder="i.e. Last Name" value="${(o=(s=this.contact)===null\|\|s===void 0?void 0:s.lastName)!==null&&o!==void 0?o:""}" @input="${()=>{this.allowSave=Q(this.lastName,this.lastName.value,"Invalid last name")}}"></ix-textbox> </div> </div> <div class="user-profile-input"> <ix-phone-input required id="phone-number" class="single-row-textbox" label="Phone Number" value="${(n=_t((a=this.contact)===null\|\|a===void 0?void 0:a.phone))!==null&&n!==void 0?n:""}" @input="${()=>{Ct(this.phoneNumber,_t(Tt(this.phoneNumber))),this.allowSave=St(this.phoneNumber,"Invalid phone number")}}"></ix-phone-input> </div> <div class="user-profile-input"> <ix-textbox required="true" id="email" class="single-row-textbox" type="email" label="Email Address" value="${(h=(l=this.contact)===null\|\|l===void 0?void 0:l.email)!==null&&h!==void 0?h:""}" @input="${()=>{this.allowSave=Q(this.email,this.email.value,"Invalid email")}}"></ix-textbox> </div> </form> <div class="dialog-actions" slot="actions"> <ix-button form="edit-profile-id" appearance="text" text="Cancel" @click="${()=>this.handleDialogClose()}"> Cancel </ix-button> <ix-button id="save-user-button" appearance="text" text="Save Changes" .disabled="${!this.allowSave}" @click="${()=>{this.dispatchUpdateUserEvent()}}"> Save Changes </ix-button> </div> </ix-dialog>`}renderButton(){return w.hasExternalUserUpdate(this.selectedAccountNumber)&&!w.isProfileOfLoggedInUser(this.contact.email)?c`<ix-button id="open-user-button" appearance="text" has-icon @click="${()=>this.handleDialogOpen()}"> <md-icon class="edit-icon" slot="icon">edit</md-icon> Edit Profile </ix-button>`:u}render(){var t,e,s,o;return c` <div class="user-details-card"> <div class="user-details-header"> <h1 class="dlr-text-heading">User Details</h1> </div> <div> <div class="user-details-body grid md:grid-cols-2 gap-x-8 gap-y-4 pb-[1.5rem]"> <div class="first-name-container"> <p class="dlr-text-caption-alt text-on-surface-variant">FIRST NAME</p> <div class="first-name" data-testid="${j.FIRST_NAME}"> ${(t=this.contact)===null\|\|t===void 0?void 0:t.firstName} </div> </div> <div class="last-name-container"> <p class="dlr-text-caption-alt text-on-surface-variant">LAST NAME</p> <div class="last-name" data-testid="${j.LAST_NAME}"> ${(e=this.contact)===null\|\|e===void 0?void 0:e.lastName} </div> </div> <div class="email-container"> <p class="dlr-text-caption-alt text-on-surface-variant">EMAIL ADDRESS</p> <div class="email" data-testid="${j.EMAIL}">${(s=this.contact)===null\|\|s===void 0?void 0:s.email}</div> </div> <div class="phone-number-container"> <p class="dlr-text-caption-alt text-on-surface-variant">PHONE NUMBER</p> <ix-phone-number .number="${(o=this.contact)===null\|\|o===void 0?void 0:o.phone}" data-testid="${j.PHONE}"></ix-phone-number> </div> </div> </div> </div> ${this.renderEditForm()} `}};C.styles=[Qt,T],i([d({type:String})],C.prototype,"selectedAccountNumber",void 0),i([d({type:Object})],C.prototype,"contact",void 0),i([d({type:Object})],C.prototype,"saveChanges",void 0),i([r()],C.prototype,"allowSave",void 0),i([r()],C.prototype,"isEditProfileDialogOpen",void 0),i([$("#first-name")],C.prototype,"firstName",void 0),i([$("#last-name")],C.prototype,"lastName",void 0),i([$("#email")],C.prototype,"email",void 0),i([$("#phone-number")],C.prototype,"phoneNumber",void 0),i([$("#evac-assistance")],C.prototype,"evacAssistance",void 0),C=i([D("user-details-view")],C);const Fe=K`ix-dialog{--md-dialog-container-color:#fff}ix-icon-button{--md-sys-color-on-surface-variant:var(--md-sys-color-primary)}ix-select{--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd;--md-menu-container-color:#fff}ix-select.thick{--md-menu-container-shape:10px}ix-select.slim{--md-outlined-field-bottom-space:2px;--md-outlined-field-top-space:2px}ix-button{--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd}ix-button .disabled{color:var(--md-sys-text-color-disabled)}.btn_primary{--md-filled-button-container-color:var(--md-sys-color-primary)}.btn_primary ix-icon{color:var(--md-sys-color-on-primary)}.btn_secondary{--md-filled-button-container-color:var(--md-sys-color-secondary)}.btn_secondary ix-icon{color:var(--md-sys-color-on-secondary)}.btn_tertiary{--md-filled-button-container-color:var(--md-sys-color-tertiary)}.btn_tertiary ix-icon{color:var(--md-sys-color-on-tertiary)}.btn_danger{--md-filled-button-container-color:var(--md-sys-color-error)}.btn_danger ix-icon{color:var(--md-sys-color-on-error)}.icon-btn_primary ix-icon{color:var(--md-sys-color-primary)}.icon-btn_secondary ix-icon{color:var(--md-sys-color-secondary)}.icon-btn_tertiary ix-icon{color:var(--md-sys-color-tertiary)}.icon-btn_danger ix-icon{color:var(--md-sys-color-error)}ix-icon.icon-lg{--ix-icon-font-size:32px}.dialog-form{min-width:500px;display:flex;flex-direction:column;justify-content:space-between;padding:8px 24px 20px}.dialog-form .textfield{width:100%}.dialog-form.sm{min-width:560px}.dialog-form__textbox{padding-top:1rem}.dialog-actions{display:flex;justify-content:flex-end;padding:8px 15px 8px 20px}@media only screen and (min-width:5px) and (max-width:600px){ix-dialog{--md-dialog-container-shape:6px}}@media only screen and (min-width:601px){ix-dialog{--md-dialog-container-shape:3px}}:host{display:flex;align-items:center;width:100%}.account-rhs-section{display:flex;align-items:center}.check_circle{color:#4caf50}.mail{color:#ff9800}.warning{color:#db0028}.delete_forever{color:#6d758c}.account-name{background:0 0;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left}.account-name-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}`,Le=K`.account-name:focus-visible{outline:2px solid var(--md-sys-color-primary,#1456e0);outline-offset:2px;border-radius:2px}.account-name-tooltip{position:fixed;top:0;left:0;z-index:1300;min-width:200px;max-width:480px;width:max-content;padding:6px 10px;border-radius:4px;background-color:#071454;color:#fff;font-size:.75rem;line-height:1rem;white-space:normal;overflow-wrap:anywhere;word-break:break-word;pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.2)}.account-name-tooltip[hidden]{display:none!important}`;class H{}H.STATUS=t=>`dr-account-status-${t!=null?t:""}`,H.ICON=t=>`dr-account-icon-${t!=null?t:""}`,H.NAME=t=>`dr-account-name-${t!=null?t:""}`,H.EVENT_DISPATCH_EL=t=>`dr-account-event-el-${t!=null?t:""}`;const Be=300;let L=class extends z{constructor(){super(...arguments),this.active=!1,this.isSelected=!1,this.tooltipVisible=!1,this.showTooltip=()=>{this.clearTooltipTimer(),this.tooltipShowTimer=setTimeout(()=>{this.tooltipVisible=!0,this.updateComplete.then(()=>this.positionTooltip())},Be)},this.hideTooltip=()=>{this.clearTooltipTimer(),this.tooltipVisible=!1},this.handleTooltipKeyDown=t=>{t.key==="Escape"&&this.tooltipVisible&&(t.stopPropagation(),this.hideTooltip())}}get statusText(){return Ce[this.status]}get statusIcon(){return Lt[this.status]}get accountDisplayName(){var t,e,s,o;return(o=(e=(t=this.account)===null\|\|t===void 0?void 0:t.displayName)!==null&&e!==void 0?e:(s=this.account)===null\|\|s===void 0?void 0:s.name)!==null&&o!==void 0?o:""}dispatchChangeAccountEvent(){var t;this.dispatchEvent(new CustomEvent("account-click",{detail:{accountNumber:(t=this.account)===null\|\|t===void 0?void 0:t.accountNumber}}))}disconnectedCallback(){super.disconnectedCallback(),this.clearTooltipTimer()}clearTooltipTimer(){this.tooltipShowTimer&&(clearTimeout(this.tooltipShowTimer),this.tooltipShowTimer=void 0)}positionTooltip(){!this.isConnected\|\|!this.accountNameEl\|\|!this.tooltipEl\|\|Re(this.accountNameEl,this.tooltipEl,{strategy:"fixed",placement:"top",middleware:[Ee(8),De(),Ne({padding:8})]}).then(({x:t,y:e})=>{!this.isConnected\|\|!this.tooltipVisible\|\|!this.tooltipEl\|\|(this.tooltipEl.style.left=`${t}px`,this.tooltipEl.style.top=`${e}px`)}).catch(()=>{})}render(){var t,e,s;return c` <button type="button" class="${`account-name ${this.active\|\|this.isSelected?"font-bold":""}`}" aria-label="${this.accountDisplayName}, Status: ${this.statusText}" aria-current="${this.active?"true":u}" data-testid="${H.NAME((t=this.account)===null\|\|t===void 0?void 0:t.accountNumber)}" @click="${()=>this.dispatchChangeAccountEvent()}" @mouseenter="${this.showTooltip}" @mouseleave="${this.hideTooltip}" @focus="${this.showTooltip}" @blur="${this.hideTooltip}" @keydown="${this.handleTooltipKeyDown}"> <span class="${`account-name-text ml-4 dlr-text-small ${this.active\|\|this.isSelected?"font-bold":""}`}" aria-hidden="true">${this.accountDisplayName}</span> <div class="flex items-center mr-4" aria-hidden="true"> <div class="account-rhs-section"> <p class="dlr-text-small" data-testid="${H.STATUS((e=this.account)===null\|\|e===void 0?void 0:e.accountNumber)}"> ${this.statusText} </p> </div> <ix-icon filled class="mt-1 ml-2 text-2xl" data-testid="${H.ICON((s=this.account)===null\|\|s===void 0?void 0:s.accountNumber)}" style="${`color: ${At[this.status]}`}">${this.statusIcon}</ix-icon> </div> </button> <div class="account-name-tooltip" aria-hidden="true" ?hidden="${!this.tooltipVisible}"> ${this.accountDisplayName} </div> `}};L.styles=[Fe,T,Le],i([d({type:Object})],L.prototype,"account",void 0),i([d({type:Boolean,reflect:!0})],L.prototype,"active",void 0),i([d({type:String})],L.prototype,"status",void 0),i([d({type:Boolean})],L.prototype,"isSelected",void 0),i([r()],L.prototype,"tooltipVisible",void 0),i([$(".account-name-tooltip")],L.prototype,"tooltipEl",void 0),i([$(".account-name-text")],L.prototype,"accountNameEl",void 0),L=i([D("dr-account")],L);const Pe=K`ix-dialog{--md-dialog-container-color:#fff}ix-icon-button{--md-sys-color-on-surface-variant:var(--md-sys-color-primary)}ix-select{--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd;--md-menu-container-color:#fff}ix-select.thick{--md-menu-container-shape:10px}ix-select.slim{--md-outlined-field-bottom-space:2px;--md-outlined-field-top-space:2px}ix-button{--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd}ix-button .disabled{color:var(--md-sys-text-color-disabled)}.btn_primary{--md-filled-button-container-color:var(--md-sys-color-primary)}.btn_primary ix-icon{color:var(--md-sys-color-on-primary)}.btn_secondary{--md-filled-button-container-color:var(--md-sys-color-secondary)}.btn_secondary ix-icon{color:var(--md-sys-color-on-secondary)}.btn_tertiary{--md-filled-button-container-color:var(--md-sys-color-tertiary)}.btn_tertiary ix-icon{color:var(--md-sys-color-on-tertiary)}.btn_danger{--md-filled-button-container-color:var(--md-sys-color-error)}.btn_danger ix-icon{color:var(--md-sys-color-on-error)}.icon-btn_primary ix-icon{color:var(--md-sys-color-primary)}.icon-btn_secondary ix-icon{color:var(--md-sys-color-secondary)}.icon-btn_tertiary ix-icon{color:var(--md-sys-color-tertiary)}.icon-btn_danger ix-icon{color:var(--md-sys-color-error)}ix-icon.icon-lg{--ix-icon-font-size:32px}.dialog-form{min-width:500px;display:flex;flex-direction:column;justify-content:space-between;padding:8px 24px 20px}.dialog-form .textfield{width:100%}.dialog-form.sm{min-width:560px}.dialog-form__textbox{padding-top:1rem}.dialog-actions{display:flex;justify-content:flex-end;padding:8px 15px 8px 20px}@media only screen and (min-width:5px) and (max-width:600px){ix-dialog{--md-dialog-container-shape:6px}}@media only screen and (min-width:601px){ix-dialog{--md-dialog-container-shape:3px}}.accounts-card{display:flex;flex-direction:column;width:100%;background:0 0;border-radius:20px}.accounts-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.divider{width:100%;display:flex;align-items:center;min-height:40px}.option{display:block;width:100%}.accounts-list{padding-left:0;list-style-type:none;margin:0}.accounts-list li{display:flex;align-items:center;width:100%;height:24px;padding-top:20px;padding-bottom:20px;margin-bottom:8px;color:#092241;border-radius:0 30px 30px 0;cursor:pointer;gap:1rem}.accounts-list li:last-child{margin-bottom:0}.accounts-list li:focus-within,.accounts-list li:has(dr-account[active]),.accounts-list li:hover{background-color:rgba(20,86,224,.1)}.dialog-actions{display:flex;justify-content:flex-end;padding:8px 15px 8px 20px}@media only screen and (max-width:600px){.accounts-card-header{margin-bottom:1.5rem}.dialog-form{min-width:initial}}`;class p{}p.ACCOUNTS_LIST="acc-card-accounts-list",p.ACCOUNT=t=>`acc-card-account-${t!=null?t:""}`,p.ACCOUNT_OPTION=t=>`acc-card-account-option-${t!=null?t:""}`,p.ACCOUNT_DIVIDER="acc-card-account-divider",p.ROLE_OPTION=t=>`acc-card-role-option-${t.replace(/ /g,"_")}`,p.BTN_ADD_ACCOUNT="acc-card-btn-add-account",p.ACCOUNT_DIALOG="acc-card-add-account-dialog",p.ACCOUNT_DIALOG_HEADER="acc-card-add-account-header",p.ACCOUNT_DIALOG_SELECT="acc-card-add-account-select",p.ACCOUNT_DIALOG_CANCEL="acc-card-add-account-cancel",p.ACCOUNT_DIALOG_CONFIRM="acc-card-add-account-confirm",p.ROLE_DIALOG="acc-card-add-role-dialog",p.ROLE_DIALOG_HEADER="acc-card-add-role-header",p.ROLE_DIALOG_SELECT="acc-card-add-role-select",p.ROLE_DIALOG_CANCEL="acc-card-add-role-cancel",p.ROLE_DIALOG_CONFIRM="acc-card-add-role-confirm",p.CARD_HEADER="acc-card-header",p.CARD_BODY="acc-card-body",p.ACCOUNT_DIALOG_ACCOUNT_TREE="acc-card-add-account-tree";const nt=K`.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}`;let G=class extends z{constructor(){super(...arguments),this._nextButtonEnabled=!1,this._validationMessage="Select at least one account to proceed",this.handleNextButtonKeydown=t=>{if(!this._nextButtonEnabled)return;const e=t.target;(e.getAttribute("data-testid")==="step-two-next-button"\|\|e.closest('[data-testid="step-two-next-button"]'))&&(t.key==="Enter"\|\|t.key===" ")&&(t.preventDefault(),t.stopPropagation(),this.dispatchNextStepEvent())}}connectedCallback(){super.connectedCallback(),this._accountTree=this.accountTree,this.validateStep(),this.updateValidationMessage(),this.dispatchValidateStepEvent()}renderAccounts(){var t,e;if(!this._accountTree)return u;const s=(e=(t=this._accountTree)===null\|\|t===void 0?void 0:t.children)===null\|\|e===void 0?void 0:e.some(o=>{var a;return(a=o.children)===null\|\|a===void 0?void 0:a.length});return c` <div class="overflow-auto pb-[2px]" role="region" aria-labelledby="account-instructions"> <ix-tree checkboxesEnabled .rootNode="${this._accountTree}" .rollup="${!1}" .disableEndNodePointer="${!0}" .selectNodeOnClick="${!0}" ?removeChevron="${!s}" @on-tree-node-checked="${()=>this.toggleAccountChecked()}" data-testid="step-two-account-tree" aria-label="Account hierarchy tree" aria-describedby="account-tree-help" role="tree"></ix-tree> </div> `}validateStep(){!this._accountTree\|\|!this.ixTree\|\|(this._nextButtonEnabled=Ut([this._accountTree]))}async toggleAccountChecked(){!this._accountTree\|\|!this.ixTree\|\|(await this.ixTree.updateComplete,this._accountTree=this.ixTree.rootNode,this.dispatchUpdateAccountsEvent(),this.validateStep(),this.updateValidationMessage(),this.dispatchNextButtonToggleEvent())}updateValidationMessage(){this._accountTree&&Ut([this._accountTree])?this._validationMessage="Account(s) selected. Ready to proceed.":this._validationMessage="Select at least one account to proceed"}dispatchUpdateAccountsEvent(){this.dispatchEvent(new CustomEvent(N.UpdateAccounts,{detail:{rootNode:this._accountTree},bubbles:!0,composed:!0}))}dispatchNextStepEvent(){this.dispatchEvent(new CustomEvent(N.NextStep,{bubbles:!0,composed:!0}))}dispatchNextButtonToggleEvent(){this.dispatchEvent(new CustomEvent(N.NextButtonToggle,{detail:this._nextButtonEnabled,bubbles:!0,composed:!0}))}dispatchValidateStepEvent(){this.dispatchEvent(new CustomEvent(N.ValidateStep,{detail:this._nextButtonEnabled,bubbles:!0,composed:!0}))}render(){return c` <div class="flex flex-col overflow-hidden"> <div id="account-instructions" class="sr-only" role="status"> Select one or more accounts from the list below to add to this contact. </div> <div id="account-tree-help" class="sr-only"> Use arrow keys to navigate through accounts. Press Space or Enter to select or deselect accounts. Parent accounts can be expanded or collapsed to show child accounts. </div> <div role="status" aria-live="polite" aria-atomic="true" class="sr-only" id="validation-status"> ${this._validationMessage} </div> ${this.renderAccounts()} <div class="flex justify-end mt-6"> <ix-button type="submit" ?disabled="${!this._nextButtonEnabled}" has-icon trailing-icon @click="${this.dispatchNextStepEvent}" @keydown="${this.handleNextButtonKeydown}" data-testid="step-two-next-button" aria-label="${this._nextButtonEnabled?"Proceed to next step: Select roles":"Next step disabled. Please select at least one account to continue."}"> Next <md-icon slot="icon">east</md-icon> </ix-button> </div> </div> `}};G.styles=[T,Y,nt,se],i([d({type:Object})],G.prototype,"accountTree",void 0),i([r()],G.prototype,"_accountTree",void 0),i([r()],G.prototype,"_nextButtonEnabled",void 0),i([r()],G.prototype,"_validationMessage",void 0),i([$("ix-tree")],G.prototype,"ixTree",void 0),G=i([D("append-accounts-select-accounts")],G);let I=class extends z{constructor(){super(...arguments),this.checkedAccounts=[],this.roles=[],this.dataForAccounts=[],this.treeData=[],this._dataForAccounts=[],this._treeData=[],this._nextButtonEnabled=!1,this._validationMessage="Select at least one role for each account to proceed",this.multiSelectOpen=!1}connectedCallback(){super.connectedCallback(),this._dataForAccounts=this.dataForAccounts,this._treeData=this.treeData,this.validateStep(),this.dispatchValidateStepEvent()}getRoles(t){return this.roles.filter(e=>e.accountId===t)[0].roles}getRolesData(t){const e=this.roles.filter(o=>o.accountId===t)[0],s=[];return e.roles.forEach(o=>{var a;o.removed=!0;const n={id:"root",label:"",children:[],customerKnownSpaceName:""},l=(a=this._treeData.find(A=>A.accountNumber===t))===null\|\|a===void 0?void 0:a.data;l&&l.length&&ie(l[0],n);const h={accountId:t,role:o,locations:[],genericTreeView:n};s.push(h)}),s}getFlagsData(t){const e=[];return ae.forEach(s=>{const o={accountId:t,flag:s,locations:[],genericFlagsData:[]};e.push(o)}),e}renderMultiSelectRoles(){this._dataForAccounts.length===0&&(this._dataForAccounts=this.checkedAccounts.map(e=>({accountId:e.id,accountName:e.label,rolesData:this.getRolesData(e.id),flagsData:this.getFlagsData(e.id),flagData:[],active:!1})),this.dispatchUpdateDFAEvent());const t={};return this._dataForAccounts.forEach(e=>{t[e.accountId]=e.rolesData.filter(s=>s.role.removed===!0).map(s=>s.role.name)}),this._dataForAccounts.map(e=>{const s=[...new Set(this.getRoles(e.accountId).map(o=>o.name))].map(o=>({label:o,selected:!t[e.accountId].includes(o)}));return c` <div role="group" aria-labelledby="account-label-${e.accountId}"> <div class="account-roles-name" id="account-label-${e.accountId}"> ${e.accountName} </div> <ix-multi-select data-testid="multi-select-roles-${e.accountId}" required id="${`${e.accountId}-multi-select`}" style="max-width:99%" class="multi-select" .menuPositioning="${"popover"}" .items="${s}" .label="${"Roles"}" aria-label="Select roles for ${e.accountName}" aria-describedby="roles-help-${e.accountId}" @toggle-multi-select-item="${o=>this.handleMultiSelect(e.accountId,o.detail.label,o.detail.selected)}" @remove-multi-select-item="${o=>this.handleMultiSelect(e.accountId,o.detail,!1)}" @clear-multi-select="${()=>this.handleMultiSelectClear(e.accountId)}" @select-menu="${o=>this.handleSelectMenu(o)}"></ix-multi-select> <div id="roles-help-${e.accountId}" class="sr-only"> At least one role must be selected for ${e.accountName} to proceed. </div> </div> `})}handleSelectMenu(t){t.detail.value==="open"?this.multiSelectOpen=!0:this.multiSelectOpen=!1}handleMultiSelect(t,e,s){var o,a;const[n]=this._dataForAccounts.filter(v=>v.accountId===t),l=this.getRoles(n.accountId).find(v=>v.name===e);if(!l)return;const h=n.rolesData.findIndex(v=>v.role.id===l.id);if(l.permissions.every(v=>v.isNonLocation)){const v=(o=n.rolesData[h])===null\|\|o===void 0?void 0:o.genericTreeView;if(!((a=v==null?void 0:v.children)===null\|\|a===void 0)&&a.length){const S=v.children[0];S.checked=s,ft(S,v),n.rolesData[h].locations=s?[S]:[]}}const A=n.rolesData.findIndex(v=>v.role.id===(l==null?void 0:l.id));n.rolesData[A].role.removed=!(s&&A>=0),this.validateStep(),this._validationMessage=this._nextButtonEnabled?"All accounts have a role selected. Ready to proceed.":"Select at least one role for each account to proceed",this.dispatchUpdateDFAEvent(),this.dispatchNextButtonToggleEvent()}validateStep(){const t=this._dataForAccounts.every(s=>s.rolesData.filter(o=>o.role.removed===!1).length),e=this._dataForAccounts.length===this.checkedAccounts.length;this._nextButtonEnabled=t&&e}handleMultiSelectClear(t){const e=this._dataForAccounts.filter(s=>s.accountId===t)[0];this._dataForAccounts.find(s=>s.accountId===t).rolesData=this.getRolesData(e.accountId),this._nextButtonEnabled=!1,this._validationMessage="Select at least one role for each account to proceed",this.dispatchUpdateDFAEvent(),this.dispatchNextButtonToggleEvent()}dispatchUpdateDFAEvent(){const t=new CustomEvent(N.UpdateDFA,{detail:{dataForAccounts:this._dataForAccounts},bubbles:!0,composed:!0});this.dispatchEvent(t)}dispatchNextStepEvent(){this.dispatchEvent(new CustomEvent(N.NextStep,{bubbles:!0,composed:!0}))}dispatchNextButtonToggleEvent(){this.dispatchEvent(new CustomEvent(N.NextButtonToggle,{detail:this._nextButtonEnabled,bubbles:!0,composed:!0}))}dispatchValidateStepEvent(){this.dispatchEvent(new CustomEvent(N.ValidateStep,{detail:this._nextButtonEnabled,bubbles:!0,composed:!0}))}render(){const t=this.multiSelectOpen?"overflow-hidden":"overflow-auto";return c` <div class="wizard-step-content flex flex-col overflow-hidden"> <div role="status" aria-live="polite" aria-atomic="true" class="sr-only"> ${this._validationMessage} </div> <div class="p-1 dlr-text-default ${t}">${this.renderMultiSelectRoles()}</div> <div class="flex justify-end" style="padding-top:8px"> <ix-button class="pt-2" type="submit" ?disabled="${!this._nextButtonEnabled}" has-icon trailing-icon @click="${this.dispatchNextStepEvent}" @keydown="${e=>{(e.key==="Enter"\|\|e.key===" ")&&(e.preventDefault(),e.stopPropagation(),this.dispatchNextStepEvent())}}" data-testid="step-three-next-button" aria-label="${this._nextButtonEnabled?"Proceed to next step: Portal access":"Next step disabled. Please select at least one role for each account."}"> Next <md-icon slot="icon">east</md-icon> </ix-button> </div> </div> `}};I.styles=[oe,T,$t,nt],i([d({type:Array})],I.prototype,"checkedAccounts",void 0),i([d({type:Array})],I.prototype,"roles",void 0),i([d({type:Array})],I.prototype,"dataForAccounts",void 0),i([d({type:Array})],I.prototype,"treeData",void 0),i([r()],I.prototype,"_dataForAccounts",void 0),i([r()],I.prototype,"_treeData",void 0),i([r()],I.prototype,"_nextButtonEnabled",void 0),i([r()],I.prototype,"_validationMessage",void 0),i([r()],I.prototype,"multiSelectOpen",void 0),I=i([D("append-accounts-select-roles")],I);let f=class extends z{constructor(){super(...arguments),this.dataForAccounts=[],this.permissions=[],this._dataForAccounts=[],this.showPermissionsDialog=!1,this.removeRoleDialogOpen=!1,this._nextButtonEnabled=!1}connectedCallback(){super.connectedCallback(),this._dataForAccounts=this.dataForAccounts,this._selectedAccountId=this.selectedAccountId,this._selectedRoleId=this.selectedRoleId,this.validateStep(),this.dispatchValidateStepEvent(),this.setInitialRole()}get noOfLocations(){var t;return we((t=this.selectedRoleData)===null\|\|t===void 0?void 0:t.genericTreeView)}get canAddRolesDisabled(){var t;return!(!((t=this.unAvailableRoles)===null\|\|t===void 0)&&t.length)}get availableRoles(){const t=this._dataForAccounts.find(s=>s.accountId===this._selectedAccountId),e=t==null?void 0:t.rolesData.filter(s=>s.role.removed===!1);return e==null?void 0:e.flatMap(s=>s.role)}get unAvailableRoles(){const t=this._dataForAccounts.find(s=>s.accountId===this._selectedAccountId),e=t==null?void 0:t.rolesData.filter(s=>s.role.removed===!0);return e==null?void 0:e.flatMap(s=>s.role)}get roles(){const t=this._dataForAccounts.find(e=>e.accountId===this._selectedAccountId);return t==null?void 0:t.rolesData.flatMap(e=>e.role)}get selectedAccount(){return this._dataForAccounts.find(t=>t.accountId===this._selectedAccountId)}get selectedRole(){return this.selectedAccount.rolesData.find(t=>t.role.id===this._selectedRoleId).role}get selectedRolePermissions(){var t,e;return(e=(t=this._dataForAccounts.find(s=>s.accountId===this._selectedAccountId))===null\|\|t===void 0?void 0:t.rolesData.find(s=>s.role.id===this._selectedRoleId))===null\|\|e===void 0?void 0:e.role.permissions}get selectedRoleData(){return this.selectedAccount.rolesData.find(t=>t.role.id===this._selectedRoleId)}toggleActiveCard(t){this._selectedAccountId=t,this._dataForAccounts.forEach(e=>{e.accountId!==t?e.active=!1:e.active=!0}),this.setInitialRole(),this.roleTabComponent.setActiveRole(this._selectedRoleId),this.requestUpdate()}setInitialRole(){this.availableRoles&&this.availableRoles.length>0&&(this._selectedRoleId=this.availableRoles[0].id)}dispatchOpenAddAccountRole(){this.addRoleDialog.handleOpenDialog()}dispatchTabControl(t){this._selectedRoleId=this.roles[t].id,this.roleTabComponent.setActiveRole(this._selectedRoleId)}addRole(t){var e;const s=this.selectedAccount.rolesData.findIndex(o=>o.role.id===t);if(this.selectedAccount.rolesData[s].role.permissions.every(o=>o.isNonLocation)){const o=this.selectedAccount.rolesData[s].genericTreeView;if(!(!((e=o==null?void 0:o.children)===null\|\|e===void 0)&&e.length))return;const a=o.children[0];a.checked=!0,ft(a,o),this.selectedAccount.rolesData[s].locations.push(a)}else this.selectedAccount.rolesData[s].locations=[];this.selectedAccount.rolesData[s].role.removed=!1,this.requestUpdate(),this.dispatchTabControl(s),this.addRoleDialog.handleCancelChanges()}dispatchRemoveRoleEvent(){const t=this.roles.findIndex(s=>s.id===this._selectedRoleId);this.roles[t].removed=!0;const e=this.selectedAccount.rolesData.findIndex(s=>s.role.id===this._selectedRoleId);this.selectedAccount.rolesData[e].locations=[],this.selectedAccount.rolesData[e].role.removed=!0,this.selectedAccount.rolesData[e].genericTreeView&&ce(this.selectedAccount.rolesData[e].genericTreeView),this.validateStep(),this.setInitialRole(),this.requestUpdate()}renderTree(){const t=this._dataForAccounts.find(a=>a.accountId===this._selectedAccountId),e=t==null?void 0:t.rolesData.find(a=>a.role.id===this._selectedRoleId);if(!e)return u;const s={role:e.role.id,rootNode:e.genericTreeView},o=a=>{this.requestUpdate();const{updates:n}=a.detail.message,l=n.find(h=>h.key===e.role.id);l!=null&&l.items?e.locations=l.items.filter(h=>h.checked):e.locations=[],this.validateStep(),this.dispatchUpdateDFAEvent(),this.dispatchNextButtonToggleEvent()};if(s&&s.rootNode){const a=e==null?void 0:e.role.permissions.every(n=>n.isNonLocation);return c`<user-details-assignments .assignment="${s}" .contact="${this.contact}" .accountNumber="${t==null?void 0:t.accountId}" @check-toggle="${o}" ?disableTree="${a}"></user-details-assignments>`}return u}validateStep(){let t=!0;for(const e of this._dataForAccounts)if(!e.rolesData.filter(s=>s.role.removed===!1).every(s=>s.locations.length)){t=!1;break}this._nextButtonEnabled=t}renderRoles(){var t,e;return c` <user-details-tab-roles id="role-data-element" .assignedRoles="${this.availableRoles}" .activeRoleId="${(t=this._selectedRoleId)!==null&&t!==void 0?t:""}" .canRemoveRoles="${!0}" .removeRolesDisabled="${((e=this.availableRoles)===null\|\|e===void 0?void 0:e.length)<=1}" .canAddRoles="${!0}" .addRolesDisabled="${this.canAddRolesDisabled}" @role-select="${s=>this._selectedRoleId=s.detail.roleId}" @open-role-menu="${()=>this.dispatchOpenAddAccountRole()}" @open-remove-role-menu="${()=>this.removeRoleDialogOpen=!0}"></user-details-tab-roles> `}renderAddAccountRoleConfirmation(){var t;return c`<add-account-role id="add-role-dialog" .contact="${this.contact}" .account="${le((t=this.selectedAccount)===null\|\|t===void 0?void 0:t.accountId)\|\|""}" .assignedRoles="${this.availableRoles}" .roles="${this.roles}" @add-role="${e=>this.addRole(e.detail.roleId)}"> </add-account-role>`}renderRemoveRoleConfirmation(){return c`<changes-confirmation id="remove-role-dialog" ?isOpen="${this.removeRoleDialogOpen}" .headerText="${"Are you sure you want to remove this role?"}" .bodyText="${"The user will no longer be able to perform the permissions of this role for this account."}" .confirmationButtonText="${"Remove Role"}" @confirm="${()=>{this.dispatchRemoveRoleEvent(),this.validateStep(),this.removeRoleDialogOpen=!1}}" @cancel="${()=>this.removeRoleDialogOpen=!1}"> </changes-confirmation>`}renderControls(){return c` <div class="controls"> <div class="flex justify-between py-2 items-center permissions-locations"> ${this.renderViewPermissionsButton()} <div class="flex items-center">${this.renderLocationsCount()}</div> </div> <div class="next-control"> <ix-button id="next-button" type="submit" has-icon trailing-icon ?disabled="${!this._nextButtonEnabled}" @click="${()=>{this.dispatchNextStepEvent()}}" @keydown="${t=>{(t.key==="Enter"\|\|t.key===" ")&&(t.preventDefault(),t.stopPropagation(),this.dispatchNextStepEvent())}}" data-testid="step-four-next-button" aria-label="${this._nextButtonEnabled?"Proceed to next step: User flags":"Next step disabled. Please select locations for all roles."}"> Next <md-icon slot="icon">east</md-icon> </ix-button> </div> </div> `}renderPermissionsDialog(){var t,e;return c` <ix-dialog id="permissions-dialog" ?open="${this.showPermissionsDialog}" @close="${()=>this.showPermissionsDialog=!1}" @opened="${()=>{this.permissionsDialog.focus()}}" aria-modal="true" aria-labelledby="permissions-dialog-title"> <div class="dlr-text-heading" slot="headline" id="permissions-dialog-title"> ${this.selectedRole.name} — Permissions </div> <div class="permissions-content" slot="content"> <user-details-permission inPermissionsDialog .permissionData="${(e=re((t=this.selectedRolePermissions)!==null&&t!==void 0?t:[]))!==null&&e!==void 0?e:[]}"> </user-details-permission> </div> <div class="dialog-actions" slot="actions"> <ix-button appearance="text" @click="${this.togglePermissionsDialog}" slot="secondary" aria-label="Dismiss permissions dialog"><span class="dismiss-btn">Dismiss</span></ix-button> </div> </ix-dialog> `}togglePermissionsDialog(){this.showPermissionsDialog=!this.showPermissionsDialog}renderViewPermissionsButton(){var t,e;return c` <div class="tree-view-permissions"> <ix-button class="temp-button view-permissions" appearance="text" @click="${this.togglePermissionsDialog}" aria-label="View permissions for ${(e=(t=this.selectedRole)===null\|\|t===void 0?void 0:t.name)!==null&&e!==void 0?e:"selected role"}" aria-haspopup="dialog"> View Permissions </ix-button> </div> `}renderLocationsCount(){const t=`font-bold uppercase ${this.noOfLocations?"tree-role-locations-count-active":"tree-role-locations-count"}`,e=this.noOfLocations?`${this.noOfLocations} location${this.noOfLocations===1?"":"s"} selected`:"No locations selected";return c`<div class="tree-role-locations" aria-live="polite" aria-atomic="true"> <span class="${t}" aria-label="${e}"> ${this.noOfLocations?c`${this.noOfLocations} locations`:c`Select Locations`} </span> </div>`}dispatchNextStepEvent(){this.dispatchEvent(new CustomEvent(N.NextStep,{bubbles:!0,composed:!0}))}dispatchNextButtonToggleEvent(){this.dispatchEvent(new CustomEvent(N.NextButtonToggle,{detail:this._nextButtonEnabled,bubbles:!0,composed:!0}))}dispatchValidateStepEvent(){this.dispatchEvent(new CustomEvent(N.ValidateStep,{detail:this._nextButtonEnabled,bubbles:!0,composed:!0}))}dispatchUpdateDFAEvent(){const t=new CustomEvent(N.UpdateDFA,{detail:{dataForAccounts:this._dataForAccounts},bubbles:!0,composed:!0});this.dispatchEvent(t)}renderAccountTabbingCard(){return c` <account-tabbing-card data-testid="step-four-account-cards" isRoles .dataForAccounts="${this._dataForAccounts}" .selectedAccountId="${this._selectedAccountId}" @toggle-active-card="${t=>this.toggleActiveCard(t.detail.accountId)}"> </account-tabbing-card> <p class="assign-portal-access-text">Assign portal access to all roles before continuing</p> `}render(){return c` <div class="wizard-step-content overflow-y-auto h-full max-h-screen md:p-1"> ${this.renderAccountTabbingCard()} <div class="tree-view-container-content">${this.renderRoles()}</div> <div class="controls-container">${this.renderControls()}</div> <div class="tree-view-container-footer">${this.renderTree()}</div> </div> ${this.renderAddAccountRoleConfirmation()} ${this.renderRemoveRoleConfirmation()} ${this.renderPermissionsDialog()} `}};f.styles=[ne,T,Y],i([$("#permissions-dialog ix-button")],f.prototype,"permissionsDialog",void 0),i([d({type:Array})],f.prototype,"dataForAccounts",void 0),i([d({type:Array})],f.prototype,"permissions",void 0),i([d({type:String})],f.prototype,"selectedAccountId",void 0),i([d({type:String})],f.prototype,"selectedRoleId",void 0),i([d({type:Object})],f.prototype,"contact",void 0),i([r()],f.prototype,"_dataForAccounts",void 0),i([r()],f.prototype,"_selectedAccountId",void 0),i([r()],f.prototype,"_selectedRoleId",void 0),i([r()],f.prototype,"showPermissionsDialog",void 0),i([r()],f.prototype,"removeRoleDialogOpen",void 0),i([r()],f.prototype,"_nextButtonEnabled",void 0),i([$("#add-role-dialog")],f.prototype,"addRoleDialog",void 0),i([$("#role-data-element")],f.prototype,"roleTabComponent",void 0),i([$("user-details-assignments")],f.prototype,"assignmentTreeComponent",void 0),f=i([D("append-accounts-select-locations")],f);const Me=K`.results-icon ix-icon{font-size:75px;display:block;height:75px}.success-icon{color:#4caf50}.failed-icon{color:#ff9800}.wizard-step-content{height:calc(100vh - 8.5rem);overflow-y:auto}.header{text-align:center;margin-bottom:24px;font-family:var(--root-secondary-font);font-weight:700;font-size:34px;line-height:40px;letter-spacing:.35px;vertical-align:middle}.header h2{font-size:34px}.section__header{padding:16px 24px;font-family:var(--root-secondary-font);font-weight:700;font-size:20px;line-height:24px;letter-spacing:.15px;border-bottom:1px solid #0922411F;display:flex;align-items:center}.section__header ix-icon{--ix-icon-font-size:1.25rem;height:1.25rem;margin-right:16px;display:block}.section__body{padding:24px 32px;display:flex;flex-direction:column;gap:24px}.result__item{display:flex;align-items:center}.result__item .icon{--ix-icon-font-size:2rem;height:2rem;margin-right:24px;display:block}.result__item span{font-weight:400;font-size:16px;line-height:20px;letter-spacing:.15px}.message{overflow:hidden;border-radius:1rem;margin-bottom:1.5rem;border:1px solid #0922411F;box-shadow:0 1px 1px 0 #0000002E;font-family:Open Sans;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.15px}.success-message .section__header{background-color:#edf7ed}.result__details{display:flex;flex-direction:column}.result__item.with-message{align-items:flex-start}.result__details .error-message{color:#db0028;line-height:24px;font-size:14px}.failed-message .section__header{background-color:#fdeded}.failed-message .failed-icon{color:#db0028}.controls{text-align:center}ix-button{display:inline-block;font-family:var(--root-secondary-font)}`;let et=class extends z{constructor(){super(...arguments),this.addAccountResults={success:[],failed:[]},this.errorMsg="Failed to create the account to user association. Please try again."}connectedCallback(){super.connectedCallback(),this.dispatchEvent(new CustomEvent("refresh-accounts-list",{composed:!0,bubbles:!0})),this.updateComplete.then(()=>{var t;const e=(t=this.shadowRoot)===null\|\|t===void 0?void 0:t.querySelector("[data-focus-target]");e==null\|\|e.focus()})}resultsCard(t){if(this.addAccountResults[t].length===0)return u;const e=t==="success"?"Successfully added accounts":"Accounts that failed to add";return c` <div class="${t}-message message" role="region" aria-label="${e}"> <div class="section__header"> <ix-icon class="${t}-icon" aria-hidden="true">${t==="success"?"check_circle":"error"}</ix-icon> <span class="section__title">${t==="success"?"Accounts Added":"Error Adding Account"}</span> </div> <ul class="section__body" aria-label="${e} list"> ${this.addAccountResults[t].map(s=>c` <li class="result__item ${s.message?"with-message":""}"> <ix-icon class="icon ${t}-icon" aria-label="${t==="success"?"Success":"Error"}" role="img">${t==="success"?"check_circle":"error"}</ix-icon> <div class="result__details"> <span>${s.accountName}</span> ${s.message?c`<div class="error-message" role="alert">${this.errorMsg}</div>`:u} </div> </li> `)} </ul> </div> `}renderHeader(t="success"){return c`<div class="results-icon"> <ix-icon class="icon ${t}-icon" aria-hidden="true">${t==="success"?"check_circle":"warning"}</ix-icon> <h2 tabindex="-1" data-focus-target> ${t==="success"?"Accounts Added":"Some Accounts could not be added"} </h2> </div>`}navigateToUserDetails(){this.dispatchEvent(new CustomEvent("close-wizard",{composed:!0,bubbles:!0}))}render(){var t;const e=((t=this.addAccountResults)===null\|\|t===void 0?void 0:t.failed.length)>0;return c` <div class="wizard-step-content md:p-1"> <div> <div class="header">${this.renderHeader(e?"failed":"success")}</div> ${this.resultsCard("success")} ${this.resultsCard("failed")} <div class="controls"> <ix-button data-testid="${Ot.BACK_TO_USERS}" appearance="filled" class="p-1" @click="${this.navigateToUserDetails}" aria-label="View user details and close this wizard"><span>View user details</span></ix-button> </div> </div> </div> `}};et.styles=[Me,nt],i([d({type:Object})],et.prototype,"addAccountResults",void 0),i([d({type:String})],et.prototype,"errorMsg",void 0),et=i([D("append-accounts-results")],et);let x=class extends z{constructor(){super(...arguments),this.showDrawer=!1,this.showResults=!1,this.submitting=!1,this.selectedAccount={},this.contact={},this.permissions=[],this.roles=[],this.treeData=[],this.loading=!1,this.selectedAccountId="",this.selectedRoleId="",this.step=1,this.dataForAccounts=[],this.isNextButtonEnabled=!1}get stepTitle(){return`Add an Account to ${this.contact.firstName} ${this.contact.lastName}`}connectedCallback(){super.connectedCallback(),this.setupAccountSelector()}setupAccountSelector(){const t=kt().filter(e=>w.hasExternalUserUpdate(e.accountNumber));this.accounts=ue(t),he(this.accounts),this.accountTree=this.addFixedToAlreadyAddedAccounts(this.selectedAccount),this.permissions=bt.getPermissions()}addFixedToAlreadyAddedAccounts(t){if(!t)return t;const e=Array.isArray(t.children)?t.children.map(s=>this.addFixedToAlreadyAddedAccounts(s)):t.children;return{...t,fixed:t.disabled?!0:t.fixed,children:e}}resetStep(){this.handleDialogReset()}setStep(t){this.step=t}onNextButtonToggle(t){this.isNextButtonEnabled=t.detail}onPrevStep(){this.step!==1&&(this.step-=1)}async onNextStep(){var t,e;if(this.isNextButtonEnabled){if(this.loading=!0,this.step===1){if(!this.accountTree){this.loading=!1;return}const s=((t=this.checkedAccounts)===null\|\|t===void 0?void 0:t.map(l=>l.id))\|\|[],o=await pe.getAccountData(s),a=xt.get(),n=J(this.contact.email)&&w.hasAssignInternalRoleCreate(bt.getAccountNumber());this.roles=[],this.treeData=[];for(let l=0;l<s.length;l+=1){const h=vt(s[l],a,n),A=s[l];this.roles.push({accountId:A,roles:structuredClone(h)}),this.treeData.push({contactId:"",accountNumber:A,roleId:"",data:o[l]})}}else if(this.step===2){const s=this.dataForAccounts[0],o=(e=s==null?void 0:s.rolesData)===null\|\|e===void 0?void 0:e[0];if(!s\|\|!o){this.isNextButtonEnabled=!1,this.loading=!1;return}this.selectedAccountId=s.accountId,this.selectedRoleId=o.role.id}else if(this.step===3)for(const s of this.dataForAccounts){const o=this.treeData.find(a=>a.accountNumber===s.accountId);o&&ve(s,o)}this.step!==3&&(this.isNextButtonEnabled=!1),this.loading=!1,this.step+=1}}handleDialogReset(){this.dispatchEvent(new CustomEvent("close-wizard",{bubbles:!0,composed:!0}))}updateAccounts(t){if(this.accountTree=t.detail.rootNode,!this.accountTree\|\|!Array.isArray(this.accountTree.children)){this.checkedAccounts=[],this.dataForAccounts=[];return}this.checkedAccounts=me(this.accountTree.children,ge(this.accounts\|\|[])),this.dataForAccounts=[]}renderWizardStep(){switch(this.step){case 1:{const t=this.accountTree&&Array.isArray(this.accountTree.children)?this.accountTree:void 0;return c` <ui-um-wizard-step slot="wizard-content" isRequired .stepTitle="${this.stepTitle}" .stepSubTitle="${"Accounts*"}" data-testid="append-accounts-select-accounts"> <append-accounts-select-accounts class="flex flex-col overflow-auto grow" .accountTree="${t}" @update-accounts="${e=>this.updateAccounts(e)}" @next-step="${this.onNextStep}" @validate-step="${e=>this.isNextButtonEnabled=e.detail}" @next-button-toggle="${e=>this.onNextButtonToggle(e)}"></append-accounts-select-accounts> </ui-um-wizard-step> `}case 2:return c` <ui-um-wizard-step slot="wizard-content" isRequired .stepTitle="${this.stepTitle}" .stepSubTitle="${"Roles"}" data-testid="append-accounts-select-roles"> <append-accounts-select-roles class="flex flex-col overflow-auto grow" .checkedAccounts="${this.checkedAccounts\|\|[]}" .roles="${this.roles}" .dataForAccounts="${this.dataForAccounts}" .treeData="${this.treeData}" @update-dfa="${t=>{this.dataForAccounts=t.detail.dataForAccounts}}" @next-step="${this.onNextStep}" @validate-step="${t=>this.isNextButtonEnabled=t.detail}" @next-button-toggle="${t=>this.onNextButtonToggle(t)}"></append-accounts-select-roles> </ui-um-wizard-step> `;case 3:return c` <ui-um-wizard-step slot="wizard-content" isRequired .stepTitle="${this.stepTitle}" .stepSubTitle="${"Portal Access"}" data-testid="append-accounts-select-locations"> <append-accounts-select-locations class="step" .dataForAccounts="${this.dataForAccounts}" .selectedAccountId="${this.selectedAccountId}" .selectedRoleId="${this.selectedRoleId}" .permissions="${this.permissions}" .contact="${this.contact}" @update-dfa="${t=>this.dataForAccounts=t.detail.dataForAccounts}" @next-step="${this.onNextStep}" @validate-step="${t=>this.isNextButtonEnabled=t.detail}" @next-button-toggle="${t=>this.onNextButtonToggle(t)}"></append-accounts-select-locations> </ui-um-wizard-step> `;case 4:return c` <ui-um-wizard-step slot="wizard-content" .stepTitle="${this.stepTitle}" .stepSubTitle="${"User Flags"}" data-testid="append-accounts-select-flags"> <create-user-step-five class="step" .dataForAccounts="${this.dataForAccounts}" .selectedAccountId="${this.selectedAccountId}" .evacAssistanceRequired="${this.contact.evacAssistance}" @evac-assistance-required="${t=>this.contact.evacAssistance=t.detail}" @next-step="${this.onNextStep}"> </create-user-step-five> </ui-um-wizard-step> `;case 5:return c` <ui-um-wizard-step isLastStep slot="wizard-content" .stepTitle="${this.stepTitle}" .stepSubTitle="${"Are these details correct?"}" ?submitting="${this.submitting}" @create-contact="${this.dispatchCreateNewContactEvent}" data-testid="append-accounts-review"> <create-user-step-six class="step" .dataForAccounts="${this.dataForAccounts}" .newContact="${this.contact}" hideContactDetails ?submitting="${this.submitting}" @set-step="${t=>this.setStep(t.detail.step)}"></create-user-step-six> </ui-um-wizard-step> `}return u}renderProgress(){return c`<ix-progress slot="wizard-content" indeterminate></ix-progress>`}dispatchCreateNewContactEvent(){this.dispatchEvent(new CustomEvent(N.CreateNewContact,{detail:{newContact:this.contact,dataForAccounts:this.dataForAccounts},bubbles:!0,composed:!0}))}renderDrawerControls(){const t={1:"Select Accounts",2:"Select Roles",3:"Portal Access",4:"User Flags",5:"Review"},e=t[this.step-1],s=t[this.step+1];return c` <div slot="centre-top"> <div role="status" aria-live="polite" aria-atomic="true" class="sr-only"> ${this.showResults?"Results":`Step ${this.step} of 5: ${t[this.step]}`} </div> <div class="flex"> ${this.showResults?u:c` <ix-icon-button class="icon-btn_primary" style="${this.step===1?"visibility: hidden":""}" ?disabled="${this.step===1\|\|this.loading}" @click="${()=>{this.step!==1&&this.onPrevStep()}}" @keydown="${o=>{o.key==="Enter"\|\|o.key===" "?(o.preventDefault(),this.onPrevStep()):o.shiftKey&&o.key==="Tab"&&(o.stopPropagation(),o.preventDefault())}}" icon="chevron_left" data-testid="prev-step-icon" aria-label="Go back to ${e!=null?e:"previous step"}"> </ix-icon-button> <span class="dlr-text-small uppercase font-bold pt-[10px] px-2 step-progress" data-testid="step-progress" aria-hidden="true"> ${this.step} of 5 </span> <ix-icon-button style="${this.step===5?"visibility: hidden":""}" class="icon-btn_primary ${this.step===5\|\|!this.isNextButtonEnabled\|\|this.loading?"disabled":""}" ?disabled="${!this.isNextButtonEnabled\|\|this.loading}" @click="${()=>this.onNextStep()}" @keydown="${o=>{o.key==="Enter"\|\|o.key===" "?(o.preventDefault(),this.onNextStep()):this.step===1&&o.shiftKey&&o.key==="Tab"&&(o.stopPropagation(),o.preventDefault())}}" icon="chevron_right" data-testid="next-step-icon" aria-label="${this.isNextButtonEnabled?`Proceed to ${s!=null?s:"next step"}`:"Next step disabled. Complete the current step to continue."}"> </ix-icon-button> `} </div> </div> `}render(){return c` <ui-um-drawer ?isVisible="${this.showDrawer}" ?summaryScreen="${this.showResults}" ?submitting="${this.submitting}" @close-success="${this.handleDialogReset}" @blur-drawer="${this.handleDialogReset}" @toggle-dialog="${t=>{var e,s;t==null\|\|t.stopPropagation(),this.dispatchEvent(new CustomEvent("close-wizard",{detail:{originElement:(s=(e=t==null?void 0:t.detail)===null\|\|e===void 0?void 0:e.originElement)!==null&&s!==void 0?s:this.drawer},bubbles:!0,composed:!0}))}}" @keydown="${t=>{t.key==="Escape"&&(t.stopPropagation(),this.dispatchEvent(new CustomEvent("close-wizard",{detail:{originElement:this.drawer},bubbles:!0,composed:!0})))}}" data-testid="ui-um-drawer" aria-label="Add account to ${this.contact.firstName} ${this.contact.lastName}" aria-busy="${this.loading}"> ${this.renderDrawerControls()} ${this.showResults?c` <div data-testid="${Ot.SUCCESS_CREATED}" slot="content" class=""> <append-accounts-results .addAccountResults="${this.addAccountResults}"></append-accounts-results> </div> `:c` <ui-um-wizard class="create-user-wizard" slot="content" data-testid="add-accounts-wizard" aria-label="Add accounts wizard, step ${this.step} of 5"> ${this.loading?c` <div role="status" aria-live="polite" aria-label="Loading step content"> ${this.renderProgress()} </div> `:this.renderWizardStep()} </ui-um-wizard> `} </ui-um-drawer> `}};x.styles=[de,T,$t,nt],i([$("ui-um-drawer")],x.prototype,"drawer",void 0),i([d({type:Boolean})],x.prototype,"showDrawer",void 0),i([d({type:Boolean})],x.prototype,"showResults",void 0),i([d({type:Boolean})],x.prototype,"submitting",void 0),i([d({type:Object})],x.prototype,"selectedAccount",void 0),i([d({type:Object})],x.prototype,"contact",void 0),i([d({type:Object})],x.prototype,"addAccountResults",void 0),i([r()],x.prototype,"accounts",void 0),i([r()],x.prototype,"accountTree",void 0),i([r()],x.prototype,"permissions",void 0),i([r()],x.prototype,"roles",void 0),i([r()],x.prototype,"treeData",void 0),i([r()],x.prototype,"loading",void 0),i([r()],x.prototype,"selectedAccountId",void 0),i([r()],x.prototype,"selectedRoleId",void 0),i([r()],x.prototype,"step",void 0),i([r()],x.prototype,"dataForAccounts",void 0),i([r()],x.prototype,"isNextButtonEnabled",void 0),i([r()],x.prototype,"checkedAccounts",void 0),x=i([D("append-accounts")],x);let _=class extends W{constructor(){super(...arguments),this.showDrawer=!1,this.showCancelDialog=!1,this.showResults=!1,this.submitting=!1,this.addAccountResults={success:[],failed:[]},this.accountAssociationController=new Gt(this)}static get styles(){return[be,Y,T]}async addAccountsToContact(t){this.submitting=!0;const e=t.detail.newContact,s=t.detail.dataForAccounts,o={success:[],failed:[]};try{(await Promise.allSettled(s.map(async a=>{const{accountId:n,accountName:l}=a,h=e.id,A=e.accounts.find(({accountNumber:S})=>S===n);if((A==null?void 0:A.status)==="REMOVED")await this.accountAssociationController.restore(n,h,!1);else if(!A&&!await this.accountAssociationController.add(n,h,!1))throw new Error(`Failed to associate account ${n} to contact ${h}`);const v=a.rolesData.filter(S=>!S.role.removed).map(S=>({key:S.role.id,items:S.locations}));return await jt(h,n,v),await Mt(h,n,a.flagData),A\|\|e.accounts.push({accountNumber:n}),{accountName:l,accountId:n}}))).forEach((a,n)=>{if(a.status==="fulfilled"){o.success.push(a.value);return}o.failed.push({accountId:s[n].accountId,accountName:s[n].accountName,message:a.reason instanceof Error?a.reason.message:"An error occurred"})})}finally{this.submitting=!1}this.addAccountResults={success:[...o.success],failed:[...o.failed]},this.showResults=!0}handleCloseWizard(t){var e,s,o,a,n;!((s=(e=this.addAccountResults)===null\|\|e===void 0?void 0:e.success)===null\|\|s===void 0)&&s.length\|\|!((a=(o=this.addAccountResults)===null\|\|o===void 0?void 0:o.failed)===null\|\|a===void 0)&&a.length\|\|(t==null\|\|t.stopPropagation(),this.lastFocusedElement=(n=t==null?void 0:t.detail)===null\|\|n===void 0?void 0:n.originElement,this.showCancelDialog=!0)}renderCancelDialog(){return c` <ix-dialog id="cancel-add-account-dialog" ?open="${this.showCancelDialog}" @cancel="${()=>{this.showCancelDialog=!1,setTimeout(()=>{this.lastFocusedElement&&this.lastFocusedElement.focus()},10)}}" @opened="${()=>{this.cancelDialog.focus()}}" data-testid="dialog-cancel-add-account" aria-modal="true" aria-labelledby="cancel-add-account-dialog-title"> <div class="dlr-text-heading md:w-[560px]" slot="headline"> <p tabindex="-1" id="cancel-add-account-dialog-title" @keydown="${t=>{t.shiftKey&&t.key==="Tab"&&(t.preventDefault(),this.cancelDialog.focus())}}"> Are you sure you want to cancel? </p> </div> <div class="dialog-content" slot="content"> <p>All the details provided will be lost.</p> </div> <div class="dialog-actions" slot="actions"> <ix-button appearance="text" @click="${()=>{this.showCancelDialog=!1,setTimeout(()=>{this.lastFocusedElement&&this.lastFocusedElement.focus()},10)}}" slot="secondary" data-testid="dismiss-close-add-account-button" aria-label="Dismiss — continue adding account"> Dismiss </ix-button> <ix-button appearance="text" @click="${()=>{this.dispatchEvent(new CustomEvent("close-wizard",{bubbles:!0,composed:!0}))}}" @keydown="${t=>{t.key==="Tab"&&(t.preventDefault(),this.cancelDialog.focus())}}" slot="primary" data-testid="cancel-add-account-button" aria-label="Confirm cancel — discard all entered details and close wizard"> Cancel adding account </ix-button> </div> </ix-dialog> `}render(){return c` <append-accounts .contact="${this.contact}" ?showDrawer="${this.showDrawer}" ?submitting="${this.submitting}" ?showResults="${this.showResults}" .addAccountResults="${this.addAccountResults}" .selectedAccount="${this.selectedAccount}" @create-new-contact="${t=>this.addAccountsToContact(t)}" @close-wizard="${this.handleCloseWizard}" data-testid="um-append-accounts" aria-busy="${this.submitting}"></append-accounts> ${this.showCancelDialog?this.renderCancelDialog():u} `}};i([$('#cancel-add-account-dialog [tabindex="-1"]')],_.prototype,"cancelDialog",void 0),i([d({type:Boolean})],_.prototype,"showDrawer",void 0),i([d({type:Boolean})],_.prototype,"showCancelDialog",void 0),i([d({type:Object})],_.prototype,"contact",void 0),i([d({type:Object})],_.prototype,"selectedAccount",void 0),i([r()],_.prototype,"showResults",void 0),i([r()],_.prototype,"submitting",void 0),i([r()],_.prototype,"lastFocusedElement",void 0),i([r()],_.prototype,"addAccountResults",void 0),i([$("append-accounts")],_.prototype,"appendAccounts",void 0),_=i([D("add-accounts-to-contact")],_);let O=class extends W{constructor(){super(...arguments),this.assignableAccounts=[],this.activeAccountNumber="",this.readonly=!1,this.selectedAccountNumber="",this.activeAccountIndex=0,this.showAppendAccountWizard=!1,this.selectedAccount={},this.changeSelectedAccount=async(t,e=!1)=>{this.activeAccountIndex=this.assignedAccounts.findIndex(s=>s.accountNumber===t),!(this.activeAccountNumber===this.assignedAccounts[this.activeAccountIndex].accountNumber&&b.DRAFT!==this.assignedAccounts[this.activeAccountIndex].status)&&this.activeAccountIndex>-1&&this.dispatchEvent(new CustomEvent(st.ChangeAccountAssociation,{detail:{accountNumber:t,overrideUnsavedChanges:e}}))},this.onAccountClick=t=>{this.changeSelectedAccount(t)},this.handleAddAccounts=()=>{this.selectedAccount=xe(this.assignableAccounts),this.disableAssignedAccountsInTree(this.selectedAccount),this.showAppendAccountWizard=!0}}get assignedAccounts(){return[...this.contact.accounts,Z.get()]}get assignedAccountNames(){var t,e,s;return(s=(e=(t=this.contact)===null\|\|t===void 0?void 0:t.accounts)===null\|\|e===void 0?void 0:e.filter(o=>o.status!==b.REMOVED))===null\|\|s===void 0?void 0:s.map(o=>o.name)}get selectedAccountName(){var t;const e=this.assignableAccounts.find(s=>s.accountNumber===this.selectedAccountNumber);return(t=e==null?void 0:e.displayName)!==null&&t!==void 0?t:e==null?void 0:e.name}get roleNames(){const t=bt.getAccounts().find(o=>o.accountNumber===this.selectedAccountNumber)\|\|null,e=J(this.contact.email)&&w.hasAssignInternalRoleCreate(this.selectedAccountNumber),s=vt(t==null?void 0:t.accountNumber,xt.get(),e);return s==null?void 0:s.map(o=>o.name)}get fullName(){var t,e;return`${(t=this.contact)===null\|\|t===void 0?void 0:t.firstName} ${(e=this.contact)===null\|\|e===void 0?void 0:e.lastName}`}firstUpdated(){this.changeSelectedAccount(this.assignedAccounts[this.activeAccountIndex].accountNumber)}willUpdate(){!this.assignedAccounts[this.activeAccountIndex].accountNumber&&this.assignedAccounts.length&&this.changeSelectedAccount(this.assignedAccounts[0].accountNumber)}renderAccounts(){var t;const e=(t=this.assignedAccounts)===null\|\|t===void 0?void 0:t.filter(o=>o.status===b.ACTIVE\|\|o.status===b.INVITED\|\|o.status===b.DRAFT),s=this.assignedAccounts.filter(o=>o.status===b.SUSPENDED\|\|o.status===b.REMOVED\|\|o.status===b.DECLINED).filter(o=>!e.find(a=>a.displayName===o.displayName));return c` <ul class="accounts-list" aria-label="Active accounts" data-testid="${p.ACCOUNTS_LIST}"> ${e==null?void 0:e.map(o=>c` <li> <dr-account data-testid="${p.ACCOUNT(o.accountNumber)}" .account="${o}" .active="${o.accountNumber===this.activeAccountNumber}" .status="${o.status}" @account-click="${a=>this.onAccountClick(a.detail.accountNumber)}"></dr-account> </li> `)} </ul> ${s.length>0?c` <ix-divider class="divider" aria-hidden="true" data-testid="${p.ACCOUNT_DIVIDER}"></ix-divider> <ul class="accounts-list" aria-label="Inactive accounts"> ${s.map(o=>c` <li> <dr-account data-testid="${p.ACCOUNT(o.accountNumber)}" .account="${o}" .active="${o.accountNumber===this.activeAccountNumber}" .status="${o.status}" @account-click="${a=>this.onAccountClick(a.detail.accountNumber)}"></dr-account> </li> `)} </ul> `:u} `}disableAssignedAccountsInTree(t){t&&(Array.isArray(t)?t.forEach(e=>this.disableAssignedAccountsInTree(e)):(t.id&&this.assignedAccounts.some(e=>{var s;return e.accountNumber===t.id&&((s=e.status)===null\|\|s===void 0?void 0:s.toLowerCase())!==b.REMOVED.toLowerCase()})&&(t.disabled=!0,t.children&&t.children.length>0&&(t.expanded=!0)),t.children&&Array.isArray(t.children)&&t.children.forEach(e=>this.disableAssignedAccountsInTree(e))))}renderAccountsCard(){return c` <div class="accounts-card"> <div class="accounts-card-header" data-testid="${p.CARD_HEADER}"> <div class="dlr-text-heading accounts-card-header-text">Accounts</div> ${this.renderButton()} </div> <div class="accounts-card-body" data-testid="${p.CARD_BODY}"> ${this.contact.accounts.length>0?this.renderAccounts():c`You have no accounts`} </div> </div> `}renderButton(){return this.readonly?u:c`<ix-button data-testid="${p.BTN_ADD_ACCOUNT}" appearance="text" text="Add Account" has-icon @click="${this.handleAddAccounts}"> <md-icon slot="icon">add</md-icon> Add Account </ix-button>`}render(){return c` ${this.renderAccountsCard()} ${this.showAppendAccountWizard?c`<add-accounts-to-contact ?showDrawer="${!0}" .selectedAccount="${this.selectedAccount}" .contact="${E.get()}" @close-wizard="${()=>{this.showAppendAccountWizard=!1,document.body.style.overflow="auto",document.documentElement.style.overflow="initial"}}"></add-accounts-to-contact>`:u} `}};O.styles=[Pe,T],i([d()],O.prototype,"contact",void 0),i([d({type:Array,attribute:!1})],O.prototype,"assignableAccounts",void 0),i([d({type:String})],O.prototype,"activeAccountNumber",void 0),i([d({type:Boolean})],O.prototype,"readonly",void 0),i([r()],O.prototype,"selectedAccountNumber",void 0),i([r()],O.prototype,"activeAccountIndex",void 0),i([r()],O.prototype,"showAppendAccountWizard",void 0),i([r()],O.prototype,"selectedAccount",void 0),O=i([D("accounts-card")],O);const Ve=K`ix-dialog{--md-dialog-container-color:#fff}ix-icon-button{--md-sys-color-on-surface-variant:var(--md-sys-color-primary)}ix-select{--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd;--md-menu-container-color:#fff}ix-select.thick{--md-menu-container-shape:10px}ix-select.slim{--md-outlined-field-bottom-space:2px;--md-outlined-field-top-space:2px}ix-button{--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd}ix-button .disabled{color:var(--md-sys-text-color-disabled)}.btn_primary{--md-filled-button-container-color:var(--md-sys-color-primary)}.btn_primary ix-icon{color:var(--md-sys-color-on-primary)}.btn_secondary{--md-filled-button-container-color:var(--md-sys-color-secondary)}.btn_secondary ix-icon{color:var(--md-sys-color-on-secondary)}.btn_tertiary{--md-filled-button-container-color:var(--md-sys-color-tertiary)}.btn_tertiary ix-icon{color:var(--md-sys-color-on-tertiary)}.btn_danger{--md-filled-button-container-color:var(--md-sys-color-error)}.btn_danger ix-icon{color:var(--md-sys-color-on-error)}.icon-btn_primary ix-icon{color:var(--md-sys-color-primary)}.icon-btn_secondary ix-icon{color:var(--md-sys-color-secondary)}.icon-btn_tertiary ix-icon{color:var(--md-sys-color-tertiary)}.icon-btn_danger ix-icon{color:var(--md-sys-color-error)}ix-icon.icon-lg{--ix-icon-font-size:32px}.dialog-form{min-width:500px;display:flex;flex-direction:column;justify-content:space-between;padding:8px 24px 20px}.dialog-form .textfield{width:100%}.dialog-form.sm{min-width:560px}.dialog-form__textbox{padding-top:1rem}.dialog-actions{display:flex;justify-content:flex-end;padding:8px 15px 8px 20px}@media only screen and (min-width:5px) and (max-width:600px){ix-dialog{--md-dialog-container-shape:6px}}@media only screen and (min-width:601px){ix-dialog{--md-dialog-container-shape:3px}}.um-card{padding:.5rem;background:#fff;border-radius:12px 12px 0 0;box-shadow:rgba(0,0,0,.12) 0 12px 20px -12px,#e1e4e8 0 0 0 1px inset}#user-management{color:rgba(9,34,65,.7)}nav{margin-top:2px;margin-bottom:1.5rem}user-details{margin-bottom:16px}.crumbs ol{list-style-type:none;padding-left:0;display:flex}.crumb{display:inline-block}.crumb a::after{display:inline-block;padding:0 3px}.crumbs-separator{display:flex;user-select:none;margin-left:12.5px;margin-right:12.5px}#current-nav{pointer-events:none;cursor:default}@media only screen and (max-width:600px){.um-card.rounded-lg{border-radius:0;box-shadow:none}.user-details{margin:0 .5rem}}@media only screen and (max-width:767px){.user-details-view{margin:0 1rem}}@media only screen and (min-width:601px) and (max-width:1200px){.user-details-view{margin:0 1rem}.user-details-account-panel{display:flex;flex-direction:row}.user-details-account-panel>div{flex:1;width:50px}.user-details-account-panel>div:first-child{margin-top:6px}}`;class ze{constructor(e){(this._host=e).addController(this)}hostConnected(){}hostDisconnected(){}hostUpdate(){}async getContact(e){return await pt.get({id:e})}}class V{}V.CRUMBS="user-management-details-view-crumbs",V.USER_DETAILS="user-management-details-view-user-details",V.ACCOUNTS_CARD="user-management-details-view-accounts-card",V.USER_DETAILS_PANEL="user-management-details-view-user-details-panel",V.USER_MANAGEMENT_PANEL="user-management-details-view-user-management-panel";let k=class extends W{constructor(){super(...arguments),this.contactController=new ze(this),this.roles=[],this.isPageLoading=!1,this.confirmationDialogIsOpen=!1,this.refreshAccountList=async()=>{var t;this.contact=await this.contactController.getContact(this.contactId),this.contact.accounts=Pt(this.contact.accounts),E.set(this.contact);const e=(t=this.contact.accounts[0])===null\|\|t===void 0?void 0:t.accountNumber;e&&await this.handleAccountChange(e,!0)}}get assignableAccounts(){return kt().filter(t=>w.hasExternalUserUpdate(t.accountNumber))}get fullName(){var t,e;return`${(t=this.contact)===null\|\|t===void 0?void 0:t.firstName} ${(e=this.contact)===null\|\|e===void 0?void 0:e.lastName}`}get readonly(){var t,e,s,o,a;let n;return ye().UserManagement.InternalUserRetired?n=w.hasUserUpdate((t=this.account)===null\|\|t===void 0?void 0:t.accountNumber):n=J((e=this.contact)===null\|\|e===void 0?void 0:e.email)?w.hasInternalUserUpdate((s=this.account)===null\|\|s===void 0?void 0:s.accountNumber):w.hasExternalUserUpdate((o=this.account)===null\|\|o===void 0?void 0:o.accountNumber),!n\|\|w.isProfileOfLoggedInUser((a=this.contact)===null\|\|a===void 0?void 0:a.email)}async connectedCallback(){super.connectedCallback(),this.getCurrentContactFromUrl(),await w.refreshAccounts(),this.disposeReaction=Kt(()=>E.get(),()=>{this.contact=E.get()})}disconnectedCallback(){super.disconnectedCallback(),this.disposeReaction()}async firstUpdated(){U.clear(),Z.clear(),this.roles=xt.get(),this.contact=await this.contactController.getContact(this.contactId),this.contact.accounts=Pt(this.contact.accounts),E.set(this.contact)}async saveUser(){await pt.update({id:this.contact.id,contactInput:{...this.contact}}),E.refresh()}async getCurrentContactFromUrl(){this.contactId=new URL(window.location.href).searchParams.get("id")\|\|void 0,this.contactId\|\|fe(yt.UserManagement)}openDirtyPageWarning(t){this.confirmationDialogIsOpen=!0,this.requestedAccount=t}async handleAccountChange(t,e=!1){var s,o,a;if(!((s=this.contact)===null\|\|s===void 0)&&s.accounts){if(!e&&!((o=this.userDetailsPanel)===null\|\|o===void 0)&&o.isDirty){this.openDirtyPageWarning(t);return}this.account=[Z.get(),...this.contact.accounts].find(n=>n.accountNumber===t),this.userDetailsPanel=await this.userDetailsPanelAsync,(a=this.userDetailsPanel)===null\|\|a===void 0\|\|a.loadAccount()}}renderDialogs(){return c`<changes-confirmation id="confirmation-dialog" ?isOpen="${this.confirmationDialogIsOpen}" headerText="You have unsaved changes." bodyText="If you leave this account, you will lose the changes you made." confirmationButtonText="Discard Changes" cancelButtonText="Dismiss" @confirm="${async()=>{this.handleAccountChange(this.requestedAccount,!0);const t=await this.userDetailsPanel;t==null\|\|t.resetForm(),this.confirmationDialogIsOpen=!1}}" @cancel="${()=>{this.confirmationDialogIsOpen=!1}}"> </changes-confirmation> <before-leave-dialog .isDirtyCallback="${()=>{var t;return(t=this.userDetailsPanel)===null\|\|t===void 0?void 0:t.isDirty}}"> </before-leave-dialog>`}renderLoading(){return c`<ix-progress aria-label="User details panel" indeterminate> </ix-progress>`}renderContent(){var t,e,s;return!this.contact\|\|!this.contact.accounts?this.renderLoading():c` <div class="flex flex-col h-full overflow-hidden lg:flex-row gap-6"> <div class="lg:w-1/3 user-details-view"> <nav class="crumbs" data-testid="${V.CRUMBS}"> <ol> <li class="crumb"> <a id="user-management" href="${Ft(yt.UserManagement)}">User Management</a> </li> <li class="crumbs-separator">></li> <li class="crumb"> <a id="current-nav" href="${Ft(yt.UserManagementDetails)}">${c`${this.fullName}`}</a> </li> </ol> </nav> <div class="user-details-account-panel"> <div> <user-details-view data-testid="${V.USER_DETAILS}" .contact="${E.get()}" .saveChanges="${()=>this.saveUser()}" .selectedAccountNumber="${(t=this.account)===null\|\|t===void 0?void 0:t.accountNumber}"></user-details-view> </div> <div> <accounts-card data-testid="${V.ACCOUNTS_CARD}" .contact="${E.get()}" .activeAccountNumber="${(s=(e=this.account)===null\|\|e===void 0?void 0:e.accountNumber)!==null&&s!==void 0?s:""}" .assignableAccounts="${this.assignableAccounts}" .readonly="${this.readonly}" @refresh-accounts-list="${this.refreshAccountList}" @change-account="${o=>this.handleAccountChange(o.detail.accountNumber,o.detail.overrideUnsavedChanges)}"></accounts-card> </div> </div> </div> <div class="rounded-lg um-card grow overflow-auto md:mx-4 lg:mx-0"> <user-details-panel data-testid="${V.USER_MANAGEMENT_PANEL}" id="user-management-panel" .contact="${E.get()}" .account="${this.account}" .roles="${this.roles}" .readonly="${this.readonly}" @reload-account="${o=>this.handleAccountChange(o.detail.accountNumber,o.detail.overrideUnsavedChanges)}"> </user-details-panel> </div> </div> ${this.renderDialogs()} `}render(){return this.isPageLoading?this.renderLoading():this.renderContent()}};k.styles=[Ve,T],i([r()],k.prototype,"account",void 0),i([r()],k.prototype,"contact",void 0),i([r()],k.prototype,"contactId",void 0),i([r()],k.prototype,"roles",void 0),i([r()],k.prototype,"isPageLoading",void 0),i([r()],k.prototype,"confirmationDialogIsOpen",void 0),i([q("#user-management-panel")],k.prototype,"userDetailsPanelAsync",void 0),k=i([D("user-management-details-view")],k);export{k as UserManagementDetailsView};

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "description": "Webcomponent ui-user-management following open-wc recommendations",
   "license": "UNLICENSED",
   "author": "ui-user-management",
-  "version": "11.0.5",
+  "version": "11.0.6",
   "type": "module",
   "exports": {
     "./ui-user-management.js": "./dist/ui-user-management.js",
@@ -21,10 +21,10 @@
   "scripts": {
     "lint": "eslint --ext .ts,.html . && prettier \"**/*.ts\" --check",
     "format": "eslint --ext .ts,.html . --fix && prettier \"**/*.ts\" --write",
-    "test": "tsc && npm run start:pre-serve && wtr --coverage",
+    "test": "rimraf out-tsc && tsc && npm run start:pre-serve && wtr --coverage",
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
     "ts:watch": "concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"npm run tailwindcss:watch\" \"npm run twlit:watch\" \"npm run watch-less\"",
-    "ts:build": "tsc",
+    "ts:build": "rimraf out-tsc && tsc",
     "build:workspace": "npm run build",
     "prepack": "npm run build",
     "build": "npm run compile-less-to-styles && npm run generate-api && npm run tailwindcss:build && npm run twlit:build && rimraf dist && tsc && rollup -c rollup.config.mjs && npx ix-write-versions write-versions && npm run analyze -- --exclude dist lib",