[ACS-7373] ng15 permissions page fixes

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss

@@ -49,6 +49,10 @@
         }
     }
 
+    .adf-datatable-cell .adf-cell-value adf-user-role-column {
+        position: unset;
+    }
+
     .adf {
         &-search-user-button {
             width: 100%;

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 $search-result-height: calc(100% - 75px);
 
 .adf {
@@ -7,7 +9,7 @@ $search-result-height: calc(100% - 75px);
         overflow: auto;
         border: 2px solid var(--adf-theme-foreground-text-color-007);
 
-        mat-pseudo-checkbox {
+        #{$mat-list-item-end} {
             display: none;
         }
 

lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html

@@ -1,4 +1,4 @@
-<mat-card appearance="outlined" class="adf-permission-card" id="adf-permission-manager-card">
+<mat-card class="adf-permission-card" id="adf-permission-manager-card">
     <div *ngIf="(permissionList.data$ | async) === null && permissionList.loading$ | async" class="adf-permission-loader">
         <mat-progress-spinner [color]="'primary'"
                               [mode]="'indeterminate'">
@@ -40,15 +40,15 @@
             </div>
 
             <button
-                mat-button
+                mat-flat-button
                 data-automation-id="permission-info-button"
                 [adf-pop-over]="inheritedPermission"
                 [target]="target"
                 #popOver="adfPopOver"
                 *ngIf="model.node.permissions.isInheritanceEnabled">
                 {{ (popOver.open ? 'PERMISSION_MANAGER.LABELS.HIDE' : 'PERMISSION_MANAGER.LABELS.SHOW') | translate }}
-                <mat-icon *ngIf="popOver.open"> keyboard_arrow_up </mat-icon>
+                <mat-icon *ngIf="popOver.open" iconPositionEnd> keyboard_arrow_up </mat-icon>
-                <mat-icon *ngIf="!popOver.open"> keyboard_arrow_down </mat-icon>
+                <mat-icon *ngIf="!popOver.open" iconPositionEnd> keyboard_arrow_down </mat-icon>
             </button>
         </div>
 

lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss

@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf {
     &-permission-card {
         height: 100%;
@@ -5,6 +7,7 @@
         display: flex;
         flex-direction: column;
         overflow: hidden;
+        padding: 16px;
     }
 
     &-permission-loader {
@@ -66,9 +69,10 @@
         height: calc(100% - 63px);
     }
 
-    &-local-permission-container {
+    &-local-permission-container#{$mat-card-content} {
         overflow: hidden;
         flex: 1 1 auto;
+        padding: 0;
     }
 }
 

lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts

@@ -28,7 +28,8 @@ import { RoleModel } from '../../models/role.model';
                 [value]="value"
                 (selectionChange)="onRoleChanged($event.value)"
                 (keyup.arrowdown)="$event.stopPropagation()"
-                (keyup.arrowup)="$event.stopPropagation()">
+                (keyup.arrowup)="$event.stopPropagation()"
+            >
                 <mat-option *ngFor="let role of roles" [value]="role.role">
                     {{ role.label | adfLocalizedRole }}
                 </mat-option>
@@ -36,28 +37,29 @@ import { RoleModel } from '../../models/role.model';
         </mat-form-field>
 
         <span class="adf-datatable-cell-value adf-readonly-role" [title]="value | adfLocalizedRole" *ngIf="readonly">
-          {{value | adfLocalizedRole}}
+            {{ value | adfLocalizedRole }}
-      </span>
+        </span>
     `,
     host: { class: 'adf-user-role-column adf-datatable-content-cell adf-expand-cell-4' },
     styles: [
-        `.adf-role-selector-field {
+        `
-                            width: 100%;
+            .adf-role-selector-field.mat-mdc-form-field {
-                        }
+                width: 100%;
+                height: 40px;
+                max-width: 200px;
 
-                        .adf-role-selector-field .mat-mdc-form-field {
+                .mat-mdc-form-field-infix {
-                            width: 100%;
+                    padding-top: 8px;
-                            max-width: 200px;
+                }
-                        }
 
-                        .adf-readonly-role {
+                .mat-mdc-form-field-subscript-wrapper {
-                            padding-left: 0 !important;
+                    display: none;
-                        }
+                }
-                        `
+            }
+        `
     ]
 })
 export class UserRoleColumnComponent {
-
     @Input()
     roles: RoleModel[];
 

lib/core/src/lib/styles/_mat-selectors.scss

@@ -63,8 +63,10 @@ $mat-card: '.mat-mdc-card';
 $mat-card-actions: '.mat-mdc-card-actions';
 $mat-card-header-text: '.mat-mdc-card-header-text';
 $mat-card-title: '.mat-mdc-card-title';
+$mat-card-content: '.mat-mdc-card-content';
 $mat-mini-fab: '.mat-mdc-mini-fab';
 $mat-list-item-primary-text: '.mdc-list-item__primary-text';
+$mat-list-item-end: '.mdc-list-item__end';
 $mat-table: '.mat-mdc-table';
 $mat-header-row: '.mat-mdc-header-row';
 $mat-row: '.mat-mdc-row';