mp-common/admin/roles/roles-list/roles-list.component.html

This is XPO MarketPlace common libary

<div class="wrapper">
    <xpo-card>
        <card-header>
            <card-header-title id="roles-length" class="xpo-bold">{{rolesListLength}} roles </card-header-title>
            <card-header-actions>
                <button id="add-role-btn" class="xpo-bold add-role-btn" xpo-btn="link" (click)="addRole()"><xpo-icon>add</xpo-icon>add new role</button>
            </card-header-actions>
        </card-header>
        <card-content class="roles-container">
            <div class="xpo-flex-grid">
                <div class="xpo-col-1 border-right">
                    <div class="role-list-head border-top">&nbsp; </div>
                    <div *ngFor="let applications of allApplications; let i = index">
                        <div class="application-head">
                            <div id="app-name-{{i}}" class="app-sub-head border-top">
                                {{applications.name}}
                            </div>
                        </div>
                        <div class="application-list">
                            <div class="permission-head border-top" *ngFor="let permission of applications.permissions; let p = index">
                                <div id="{{applications.name}}-permission-{{p}}" class="xpo-col-3">{{permission.title}}</div>
                                <div class="xpo-col-1 tooltip-container">
                                    <xpo-tooltip [xpoTooltipPosition]='right' class="permission-tooltip">
                                        <div target>
                                            <xpo-icon id="{{applications.name}}-info-{{p}}-icon" class="xpo-info-icon xpo-col-1">ui-btn-info</xpo-icon>
                                        </div>
                                        <div body>
                                            Permission for {{permission.title}}
                                        </div>
                                    </xpo-tooltip>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="xpo-col-3">
                    <div class="xpo-flex-grid">
                        <div class="xpo-col-1" *ngFor="let role of allRoles; let r = index">
                            <div id=role-name-{{r}} class="role-list-head border-top">
                                {{role.name}} &nbsp;
                                <xpo-icon id="role-close-{{r}}-icon" *ngIf="role.isDeletable" (click)="deleteRole(role)" class="action-color">close</xpo-icon>
                            </div>
                            <div *ngFor="let applications of allApplications">
                                <div class="application-head border-top">
                                    &nbsp;
                                </div>
                                <ul class="application-list">
                                    <li *ngFor="let access of role.access; let a = index">
                                        <div class="access-list border-top" *ngIf="applications.code===access.applicationCode">
                                            <xpo-slidetoggle id="{{role.name}}-{{a}}-toggle" [checked]="access.activate" [disabled]="!role.isEditable"></xpo-slidetoggle>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </card-content>
    </xpo-card>
</div>