<ng-template #userInfo>
<div id="auth-users-roleinfo-popup" class="authorization-user-info asg-custom-background-color">
<div class="authorization-user-info-header asg-custom-label-color">
<div class="authorization-user-info-header-label-container">
<span class="authorization-user-info-header-label" [ngbTooltip]="selectedOptionInfo.name" tooltipClass="general-tooltip" container="body">{{selectedOptionInfo.name}}</span>
<span id="auth-users-editrole-label" class="authorization-user-info-edit-role mx-3 my-1" (click)="editRole(selectedOptionInfo)">Edit Role</span>
</div>
<i id="auth-users-selroleabout-icon" class="fa fa-close info-close authorization-user-role-info-close-icon" (click)="onAboutClick(selectedOptionInfo, null)"></i>
</div>
<div class="authorization-user-info-header-underline"></div>
<div class="m-3">
<div class="authorization-user-info-modal-content" *ngIf="selectedOptionInfo.description != ''">
<p class="authorization-user-info-sub-header asg-custom-label-color" i18n="@@AuthorizationUser_UserInfo_Description">Description</p>
<p class="authorization-user-info-sub-header-desc asg-custom-label-color">{{selectedOptionInfo.description}}</p>
<div class="authorization-user-info-subheader-underline"></div>
</div>
<div class="authorization-user-info-modal-content" *ngIf="applications.length">
<p class="authorization-user-info-sub-header asg-custom-label-color" i18n="@@AuthorizationUser_UserInfo_Scope">Scope</p>
<p class="authorization-user-info-sub-header-desc asg-custom-label-color">{{getSelectedApplication(selectedOptionInfo)}}</p>
<div class="authorization-user-info-subheader-underline"></div>
</div>
<div class="authorization-user-info-modal-content">
<p class="authorization-user-info-sub-header asg-custom-label-color" i18n="@@AuthorizationUser_UserInfo_Permissions">Permissions</p>
<p class="authorization-user-info-sub-header-desc asg-custom-label-color">{{getSelectedPermissions(selectedOptionInfo)}}</p>
<div class="authorization-user-info-subheader-underline"></div>
</div>
<div class="authorization-user-info-modal-content">
<p class="authorization-user-info-sub-header asg-custom-label-color" i18n="@@AuthorizationUser_UserInfo_Assignments">Is Assigned to User/Group</p>
<p class="authorization-user-info-sub-header-desc asg-custom-label-color">{{selectedOptionInfo?.assignments?.join(', ')}}</p>
</div>
</div>
</div>
</ng-template>
The "close" button in the Role info popup is not working. This issue might have occurred after the angular 13 upgrade. Note : Clicking anywhere on the Role-info pop-up body except the "close" icon closes the popup. But clicking on the "close" icon doesn't close the popup.
id="auth-users-selroleabout-icon"
class="fa fa-close info-close authorization-user-role-info-close-icon"
What should I add in the CSS file for working the close icon?
