ACS-7401: permission manager as standalone

2025-07-31 17:38:48 +00:00 · 2024-07-25 13:58:07 -04:00
parent 8af2eee382
commit 4c3e8eec38
20 changed files with 202 additions and 110 deletions
--- a/lib/content-services/src/lib/content.module.ts
+++ b/lib/content-services/src/lib/content.module.ts
@@ -27,11 +27,10 @@ import { BREADCRUMB_DIRECTIVES } from './breadcrumb/breadcrumb.module';
 import { CONTENT_VERSION_DIRECTIVES } from './version-manager/version-manager.module';
 import { ContentNodeSelectorModule } from './content-node-selector/content-node-selector.module';
 import { ContentNodeShareModule } from './content-node-share/content-node-share.module';
-import { ContentDirectiveModule } from './directives/content-directive.module';
+import { CONTENT_DIRECTIVES } from './directives/content-directive.module';
 import { CONTENT_DIALOG_DIRECTIVES } from './dialogs/dialog.module';
 import { CONTENT_METADATA_DIRECTIVES } from './content-metadata/content-metadata.module';
-import { PermissionManagerModule } from './permission-manager/permission-manager.module';
-import { TreeViewModule } from './tree-view/tree-view.module';
+import { CONTENT_PERMISSION_MANAGER_DIRECTIVES } from './permission-manager/permission-manager.module';
 import { ContentTypeModule } from './content-type/content-type.module';
 import { AspectListModule } from './aspect-list/aspect-list.module';
 import { versionCompatibilityFactory } from './version-compatibility/version-compatibility-factory';
@@ -47,6 +46,7 @@ import { TreeComponent } from './tree';
 import { NewVersionUploaderDialogComponent } from './new-version-uploader';
 import { VersionCompatibilityDirective } from './version-compatibility';
 import { CONTENT_UPLOAD_DIRECTIVES } from './upload';
+import { TreeViewComponent } from './tree-view';

@NgModule({
    imports: [
@@ -66,10 +66,10 @@ import { CONTENT_UPLOAD_DIRECTIVES } from './upload';
        ContentNodeSelectorModule,
        ContentNodeShareModule,
        ...CONTENT_METADATA_DIRECTIVES,
-        ContentDirectiveModule,
-        PermissionManagerModule,
+        ...CONTENT_DIRECTIVES,
+        ...CONTENT_PERMISSION_MANAGER_DIRECTIVES,
        ...CONTENT_VERSION_DIRECTIVES,
-        TreeViewModule,
+        TreeViewComponent,
        ContentTypeModule,
        AspectListModule,
        VersionCompatibilityDirective,
@@ -93,10 +93,10 @@ import { CONTENT_UPLOAD_DIRECTIVES } from './upload';
        ContentNodeShareModule,
        ...CONTENT_METADATA_DIRECTIVES,
        ...CONTENT_DIALOG_DIRECTIVES,
-        ContentDirectiveModule,
-        PermissionManagerModule,
+        ...CONTENT_DIRECTIVES,
+        ...CONTENT_PERMISSION_MANAGER_DIRECTIVES,
        ...CONTENT_VERSION_DIRECTIVES,
-        TreeViewModule,
+        TreeViewComponent,
        AspectListModule,
        ContentTypeModule,
        VersionCompatibilityDirective,
--- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.spec.ts
+++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.spec.ts
@@ -63,7 +63,7 @@ describe('AddPermissionDialog', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
-            imports: [ContentTestingModule],
+            imports: [ContentTestingModule, AddPermissionDialogComponent],
            providers: [
                { provide: MatDialogRef, useValue: dialogRef },
                { provide: MAT_DIALOG_DATA, useValue: data }
--- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.ts
+++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.ts
@@ -16,13 +16,38 @@
 */

 import { Component, Inject, ViewEncapsulation } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { NodeEntry, PermissionElement } from '@alfresco/js-api';
 import { AddPermissionDialogData } from './add-permission-dialog-data.interface';
 import { MemberModel } from '../../models/member.model';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { TranslateModule } from '@ngx-translate/core';
+import { DataColumnComponent, DataColumnListComponent, DataTableComponent, DateColumnHeaderComponent } from '@alfresco/adf-core';
+import { MatIconModule } from '@angular/material/icon';
+import { AddPermissionPanelComponent } from './add-permission-panel.component';
+import { UserIconColumnComponent } from '../user-icon-column/user-icon-column.component';
+import { UserNameColumnComponent } from '../user-name-column/user-name-column.component';
+import { UserRoleColumnComponent } from '../user-role-column/user-role-column.component';

@Component({
    selector: 'adf-add-permission-dialog',
+    standalone: true,
+    imports: [
+        CommonModule,
+        MatDialogModule,
+        MatButtonModule,
+        TranslateModule,
+        DataTableComponent,
+        DataColumnListComponent,
+        DataColumnComponent,
+        DateColumnHeaderComponent,
+        MatIconModule,
+        AddPermissionPanelComponent,
+        UserIconColumnComponent,
+        UserNameColumnComponent,
+        UserRoleColumnComponent
+    ],
    templateUrl: './add-permission-dialog.component.html',
    styleUrls: ['./add-permission-dialog.component.scss'],
    encapsulation: ViewEncapsulation.None
@@ -34,8 +59,7 @@ export class AddPermissionDialogComponent {
    private existingMembers: PermissionElement[] = [];
    currentSelection: NodeEntry[] = [];

-    constructor(@Inject(MAT_DIALOG_DATA) public data: AddPermissionDialogData,
-                private dialogRef: MatDialogRef<AddPermissionDialogComponent>) {
+    constructor(@Inject(MAT_DIALOG_DATA) public data: AddPermissionDialogData, private dialogRef: MatDialogRef<AddPermissionDialogComponent>) {
        this.existingMembers = this.data.node.permissions.locallySet || [];
    }

@@ -44,18 +68,19 @@ export class AddPermissionDialogComponent {
    }

    onAddClicked() {
-        const selection = this.selectedMembers.filter(member => !member.readonly).map(member => member.toPermissionElement());
+        const selection = this.selectedMembers.filter((member) => !member.readonly).map((member) => member.toPermissionElement());
        this.data.confirm.next(selection);
        this.data.confirm.complete();
    }

    onSearchAddClicked() {
-        const newMembers = this.currentSelection.map(item => MemberModel.parseFromSearchResult(item))
-            .filter(({id}) => !this.selectedMembers.find((member) => member.id === id));
+        const newMembers = this.currentSelection
+            .map((item) => MemberModel.parseFromSearchResult(item))
+            .filter(({ id }) => !this.selectedMembers.find((member) => member.id === id));
        this.selectedMembers = this.selectedMembers.concat(newMembers);

        this.selectedMembers.forEach((member) => {
-            const existingMember = this.existingMembers.find(({authorityId}) => authorityId === member.id);
+            const existingMember = this.existingMembers.find(({ authorityId }) => authorityId === member.id);
            if (existingMember) {
                member.role = existingMember.name;
                member.accessStatus = existingMember.accessStatus;
@@ -82,8 +107,7 @@ export class AddPermissionDialogComponent {
    }

    onBulkUpdate(role: string) {
-        this.selectedMembers.filter(member => !member.readonly)
-            .forEach(member => (member.role = role));
+        this.selectedMembers.filter((member) => !member.readonly).forEach((member) => (member.role = role));
    }

    onMemberDelete({ id }: MemberModel) {
@@ -101,6 +125,6 @@ export class AddPermissionDialogComponent {
    }

    isValid(): boolean {
-        return this.selectedMembers.filter(({readonly}) => !readonly).length && this.selectedMembers.every(({role}) => !!role);
+        return this.selectedMembers.filter(({ readonly }) => !readonly).length && this.selectedMembers.every(({ role }) => !!role);
    }
 }
--- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.spec.ts
+++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.spec.ts
@@ -37,7 +37,7 @@ describe('AddPermissionPanelComponent', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
-            imports: [ContentTestingModule]
+            imports: [ContentTestingModule, AddPermissionPanelComponent]
        });
        fixture = TestBed.createComponent(AddPermissionPanelComponent);
        loader = TestbedHarnessEnvironment.loader(fixture);
--- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.ts
+++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.ts
@@ -19,14 +19,33 @@ import { SearchConfigurationService } from '../../../search/services/search-conf
 import { SearchService } from '../../../search/services/search.service';
 import { Node, NodeEntry } from '@alfresco/js-api';
 import { Component, EventEmitter, Output, ViewChild, ViewEncapsulation } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
 import { debounceTime } from 'rxjs/operators';
 import { SearchPermissionConfigurationService } from './search-config-permission.service';
 import { SearchComponent } from '../../../search/components/search.component';
-import { MatSelectionList } from '@angular/material/list';
+import { MatListModule, MatSelectionList } from '@angular/material/list';
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatIconModule } from '@angular/material/icon';
+import { SearchModule } from '../../../search';
+import { UserIconColumnComponent } from '../user-icon-column/user-icon-column.component';

@Component({
    selector: 'adf-add-permission-panel',
+    standalone: true,
+    imports: [
+        CommonModule,
+        MatFormFieldModule,
+        MatInputModule,
+        TranslateModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        SearchModule,
+        MatListModule,
+        UserIconColumnComponent
+    ],
    templateUrl: './add-permission-panel.component.html',
    styleUrls: ['./add-permission-panel.component.scss'],
    encapsulation: ViewEncapsulation.None,
--- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.html
+++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.html
@@ -1,6 +1,4 @@
-<adf-add-permission-panel
-    (select)="onSelect($event)">
-</adf-add-permission-panel>
+<adf-add-permission-panel (select)="onSelect($event)"></adf-add-permission-panel>
 <div id="adf-add-permission-actions">
   <button mat-button
          id="adf-add-permission-action-button"
--- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.spec.ts
+++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.spec.ts
@@ -32,7 +32,7 @@ describe('AddPermissionComponent', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
-            imports: [ContentTestingModule]
+            imports: [ContentTestingModule, AddPermissionComponent]
        });
        nodePermissionService = TestBed.inject(NodePermissionService);
        const response: any = { node: { id: 'fake-node', allowableOperations: ['updatePermissions'] }, roles: [{ label: 'Test', role: 'test' }] };
--- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.ts
+++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.ts
@@ -21,9 +21,15 @@ import { NodePermissionService } from '../../services/node-permission.service';
 import { RoleModel } from '../../models/role.model';
 import { ContentService } from '../../../common/services/content.service';
 import { AllowableOperationsEnum } from '../../../common/models/allowable-operations.enum';
+import { CommonModule } from '@angular/common';
+import { AddPermissionPanelComponent } from './add-permission-panel.component';
+import { MatButtonModule } from '@angular/material/button';
+import { TranslateModule } from '@ngx-translate/core';

@Component({
    selector: 'adf-add-permission',
+    standalone: true,
+    imports: [CommonModule, AddPermissionPanelComponent, MatButtonModule, TranslateModule],
    templateUrl: './add-permission.component.html',
    styleUrls: ['./add-permission.component.scss'],
    encapsulation: ViewEncapsulation.None
@@ -32,7 +38,6 @@ import { AllowableOperationsEnum } from '../../../common/models/allowable-operat
 * @deprecated in 4.4.0, use adf-add-permission-panel instead.
 */
 export class AddPermissionComponent implements OnInit {
-
    /** ID of the target node. */
    @Input()
    nodeId: string;
@@ -49,11 +54,10 @@ export class AddPermissionComponent implements OnInit {
    currentNode: Node;
    currentNodeRoles: RoleModel[];

-    constructor(private nodePermissionService: NodePermissionService,
-                private contentService: ContentService) { }
+    constructor(private nodePermissionService: NodePermissionService, private contentService: ContentService) {}

    ngOnInit(): void {
-        this.nodePermissionService.getNodeWithRoles(this.nodeId).subscribe(({node, roles }) => {
+        this.nodePermissionService.getNodeWithRoles(this.nodeId).subscribe(({ node, roles }) => {
            this.currentNode = node;
            this.currentNodeRoles = roles;
        });
@@ -64,20 +68,22 @@ export class AddPermissionComponent implements OnInit {
    }

    isAddEnabled(): boolean {
-        return this.contentService.hasAllowableOperations(this.currentNode, AllowableOperationsEnum.UPDATEPERMISSIONS) &&
-                this.selectedItems.length !== 0;
+        return (
+            this.contentService.hasAllowableOperations(this.currentNode, AllowableOperationsEnum.UPDATEPERMISSIONS) && this.selectedItems.length !== 0
+        );
    }

    applySelection() {
        if (this.contentService.hasAllowableOperations(this.currentNode, AllowableOperationsEnum.UPDATEPERMISSIONS)) {
            const permissions = this.transformNodeToPermissionElement(this.selectedItems, this.currentNodeRoles[0].role);
-            this.nodePermissionService.updateNodePermissions(this.nodeId, permissions)
-                .subscribe((node) => {
-                        this.success.emit(node);
-                    },
-                    (error) => {
-                        this.error.emit(error);
-                    });
+            this.nodePermissionService.updateNodePermissions(this.nodeId, permissions).subscribe(
+                (node) => {
+                    this.success.emit(node);
+                },
+                (error) => {
+                    this.error.emit(error);
+                }
+            );
        }
    }

--- a/lib/content-services/src/lib/permission-manager/components/inherited-button.directive.ts
+++ b/lib/content-services/src/lib/permission-manager/components/inherited-button.directive.ts
@@ -24,13 +24,13 @@ import { AllowableOperationsEnum } from '../../common/models/allowable-operation

@Directive({
    selector: 'button[adf-inherit-permission], mat-button-toggle[adf-inherit-permission]',
+    standalone: true,
    host: {
        role: 'button',
        '(click)': 'onInheritPermissionClicked()'
    }
 })
 export class InheritPermissionDirective {
-
    /** ID of the node to add/remove inherited permissions. */
    @Input()
    nodeId: string;
@@ -43,21 +43,21 @@ export class InheritPermissionDirective {
    @Output()
    error: EventEmitter<any> = new EventEmitter<any>();

-    constructor(private nodeService: NodesApiService,
-                private contentService: ContentService) {
-    }
+    constructor(private nodeService: NodesApiService, private contentService: ContentService) {}

    onInheritPermissionClicked() {
        this.nodeService.getNode(this.nodeId).subscribe((node: Node) => {
            if (this.contentService.hasAllowableOperations(node, AllowableOperationsEnum.UPDATEPERMISSIONS)) {
-                const nodeBody = { permissions: { isInheritanceEnabled: !node?.permissions?.isInheritanceEnabled ?? false} };
-                this.nodeService.updateNode(this.nodeId, nodeBody, { include: ['permissions'] }).subscribe((nodeUpdated: Node) => {
-                    this.updated.emit(nodeUpdated);
-                }, (error) => this.error.emit(error));
+                const nodeBody = { permissions: { isInheritanceEnabled: !node?.permissions?.isInheritanceEnabled ?? false } };
+                this.nodeService.updateNode(this.nodeId, nodeBody, { include: ['permissions'] }).subscribe(
+                    (nodeUpdated: Node) => {
+                        this.updated.emit(nodeUpdated);
+                    },
+                    (error) => this.error.emit(error)
+                );
            } else {
                this.error.emit('PERMISSION_MANAGER.ERROR.NOT-ALLOWED');
            }
        });
    }
-
 }
--- a/lib/content-services/src/lib/permission-manager/components/node-path-column/node-path-column.component.ts
+++ b/lib/content-services/src/lib/permission-manager/components/node-path-column/node-path-column.component.ts
@@ -18,11 +18,14 @@
 import { Node } from '@alfresco/js-api';
 import { Component, Input, OnInit } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
+import { CommonModule } from '@angular/common';

@Component({
    selector: 'adf-node-path-column',
+    standalone: true,
+    imports: [CommonModule],
    template: `
-        <span class="adf-user-name-column adf-datatable-cell-value"  title="{{ displayText$ | async }}">
+        <span class="adf-user-name-column adf-datatable-cell-value" title="{{ displayText$ | async }}">
            {{ displayText$ | async }}
        </span>
    `,
--- a/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.ts
+++ b/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.ts
@@ -19,15 +19,47 @@ import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation }
 import { Node } from '@alfresco/js-api';
 import { PermissionDisplayModel } from '../../models/permission.model';
 import { RoleModel } from '../../models/role.model';
+import { CommonModule } from '@angular/common';
+import {
+    DataColumnComponent,
+    DataColumnListComponent,
+    DataTableComponent,
+    DateColumnHeaderComponent,
+    EmptyContentComponent,
+    NoContentTemplateDirective
+} from '@alfresco/adf-core';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { UserIconColumnComponent } from '../user-icon-column/user-icon-column.component';
+import { UserNameColumnComponent } from '../user-name-column/user-name-column.component';
+import { NodePathColumnComponent } from '../node-path-column/node-path-column.component';
+import { UserRoleColumnComponent } from '../user-role-column/user-role-column.component';

@Component({
-  selector: 'adf-permission-container',
-  templateUrl: './permission-container.component.html',
-  styleUrls: ['./permission-container.component.scss'],
-  encapsulation: ViewEncapsulation.None
+    selector: 'adf-permission-container',
+    standalone: true,
+    imports: [
+        CommonModule,
+        DataTableComponent,
+        DataColumnListComponent,
+        DataColumnComponent,
+        TranslateModule,
+        DateColumnHeaderComponent,
+        MatButtonModule,
+        MatIconModule,
+        NoContentTemplateDirective,
+        EmptyContentComponent,
+        UserIconColumnComponent,
+        UserNameColumnComponent,
+        NodePathColumnComponent,
+        UserRoleColumnComponent
+    ],
+    templateUrl: './permission-container.component.html',
+    styleUrls: ['./permission-container.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class PermissionContainerComponent implements OnChanges {
-
    @Input()
    node: Node;

@@ -48,7 +80,7 @@ export class PermissionContainerComponent implements OnChanges {

    /** Emitted when the permission is updated. */
    @Output()
-    update = new EventEmitter<{role: string; permission: PermissionDisplayModel}>();
+    update = new EventEmitter<{ role: string; permission: PermissionDisplayModel }>();

    @Output()
    updateAll = new EventEmitter<string>();
--- a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html
+++ b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html
@@ -1,8 +1,6 @@
 <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'">
-        </mat-progress-spinner>
+        <mat-progress-spinner [color]="'primary'" [mode]="'indeterminate'"></mat-progress-spinner>
    </div>

    <ng-container *ngIf="permissionList.error$ | async">
--- a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.ts
+++ b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.ts
@@ -20,9 +20,30 @@ import { PermissionElement } from '@alfresco/js-api';
 import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { PermissionDisplayModel } from '../../models/permission.model';
 import { PermissionListService } from './permission-list.service';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatButtonModule } from '@angular/material/button';
+import { PermissionContainerComponent } from '../permission-container/permission-container.component';
+import { PopOverDirective } from '../pop-over.directive';

@Component({
    selector: 'adf-permission-list',
+    standalone: true,
+    imports: [
+        CommonModule,
+        MatCardModule,
+        MatProgressSpinnerModule,
+        MatIconModule,
+        MatSlideToggleModule,
+        TranslateModule,
+        MatButtonModule,
+        PermissionContainerComponent,
+        PopOverDirective
+    ],
    templateUrl: './permission-list.component.html',
    styleUrls: ['./permission-list.component.scss'],
    encapsulation: ViewEncapsulation.None
@@ -64,7 +85,7 @@ export class PermissionListComponent implements OnInit {
        this.selectedPermissions = [];
    }

-    updatePermission({role, permission}) {
+    updatePermission({ role, permission }) {
        this.permissionList.updateRole(role, permission);
    }

--- a/lib/content-services/src/lib/permission-manager/components/pop-over.directive.spec.ts
+++ b/lib/content-services/src/lib/permission-manager/components/pop-over.directive.spec.ts
@@ -22,6 +22,8 @@ import { By } from '@angular/platform-browser';
 import { OverlayModule } from '@angular/cdk/overlay';

@Component({
+    standalone: true,
+    imports: [PopOverDirective],
    template: `
        <div
            [adf-pop-over]="popOver"
@@ -43,8 +45,7 @@ describe('PopOverDirective', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
-            imports: [OverlayModule],
-            declarations: [PopOverDirective, PopOverTestComponent]
+            imports: [OverlayModule, PopOverTestComponent]
        });
        fixture = TestBed.createComponent(PopOverTestComponent);
    });
--- a/lib/content-services/src/lib/permission-manager/components/pop-over.directive.ts
+++ b/lib/content-services/src/lib/permission-manager/components/pop-over.directive.ts
@@ -15,17 +15,7 @@
 * limitations under the License.
 */

-import {
-    AfterViewInit,
-    Directive,
-    ElementRef,
-    HostListener,
-    Input,
-    OnDestroy,
-    OnInit,
-    TemplateRef,
-    ViewContainerRef
-} from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
 import { ConnectionPositionPair, Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { takeUntil } from 'rxjs/operators';
@@ -34,8 +24,8 @@ import { ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cd

@Directive({
    selector: '[adf-pop-over]',
+    standalone: true,
    exportAs: 'adfPopOver'
-
 })
 export class PopOverDirective implements OnInit, OnDestroy, AfterViewInit {
    get open(): boolean {
@@ -58,7 +48,7 @@ export class PopOverDirective implements OnInit, OnDestroy, AfterViewInit {
        private overlay: Overlay,
        private vcr: ViewContainerRef,
        private focusTrapFactory: ConfigurableFocusTrapFactory
-    ) { }
+    ) {}

    ngOnInit(): void {
        this.createOverlay();
--- a/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.ts
+++ b/lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.ts
@@ -15,19 +15,23 @@
 * limitations under the License.
 */

-import { User } from '@alfresco/adf-core';
+import { InitialUsernamePipe, User } from '@alfresco/adf-core';
 import { Group, NodeEntry } from '@alfresco/js-api';
 import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { NodePermissionService } from '../../services/node-permission.service';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';

@Component({
    selector: 'adf-user-icon-column',
+    standalone: true,
+    imports: [CommonModule, MatIconModule, InitialUsernamePipe],
    template: `
-        <div class="adf-cell-value" [attr.id]="group ? 'group-icon' : 'person-icon'"  *ngIf="!isSelected">
+        <div class="adf-cell-value" [attr.id]="group ? 'group-icon' : 'person-icon'" *ngIf="!isSelected">
            <ng-container *ngIf="displayText$ | async as user">
                <mat-icon *ngIf="group" class="adf-group-icon">people_alt_outline</mat-icon>
-                <div *ngIf="!group" [outerHTML]="user | usernameInitials: 'adf-people-initial'"></div>
+                <div *ngIf="!group" [outerHTML]="user | usernameInitials : 'adf-people-initial'"></div>
            </ng-container>
        </div>
        <div class="adf-cell-value" *ngIf="isSelected">
--- a/lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.ts
+++ b/lib/content-services/src/lib/permission-manager/components/user-name-column/user-name-column.component.ts
@@ -20,9 +20,12 @@ import { BehaviorSubject } from 'rxjs';
 import { Group, NodeEntry } from '@alfresco/js-api';
 import { NodePermissionService } from '../../services/node-permission.service';
 import { EcmUserModel } from '../../../common/models/ecm-user.model';
+import { CommonModule } from '@angular/common';

@Component({
    selector: 'adf-user-name-column',
+    standalone: true,
+    imports: [CommonModule],
    template: `
        <div class="adf-ellipsis-cell" [attr.data-automation-id]="displayText$ | async">
            <span class="adf-user-name-column" title="{{ displayText$ | async }}"> {{ displayText$ | async }}</span>
--- a/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts
+++ b/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts
@@ -17,9 +17,16 @@

 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { RoleModel } from '../../models/role.model';
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { TranslateModule } from '@ngx-translate/core';
+import { LocalizedRolePipe } from '@alfresco/adf-core';

@Component({
    selector: 'adf-user-role-column',
+    standalone: true,
+    imports: [CommonModule, MatFormFieldModule, MatSelectModule, TranslateModule, LocalizedRolePipe],
    template: `
        <mat-form-field class="adf-role-selector-field" *ngIf="!readonly">
            <mat-select
--- a/lib/content-services/src/lib/permission-manager/permission-manager.module.ts
+++ b/lib/content-services/src/lib/permission-manager/permission-manager.module.ts
@@ -15,17 +15,12 @@
 * limitations under the License.
 */

-import { CoreModule, InitialUsernamePipe, PipeModule } from '@alfresco/adf-core';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MaterialModule } from '../material.module';
 import { PermissionListComponent } from './components/permission-list/permission-list.component';
 import { AddPermissionComponent } from './components/add-permission/add-permission.component';
 import { AddPermissionDialogComponent } from './components/add-permission/add-permission-dialog.component';
 import { InheritPermissionDirective } from './components/inherited-button.directive';
 import { AddPermissionPanelComponent } from './components/add-permission/add-permission-panel.component';
-import { SearchModule } from '../search/search.module';
 import { UserNameColumnComponent } from './components/user-name-column/user-name-column.component';
 import { UserIconColumnComponent } from './components/user-icon-column/user-icon-column.component';
 import { UserRoleColumnComponent } from './components/user-role-column/user-role-column.component';
@@ -33,32 +28,23 @@ import { NodePathColumnComponent } from './components/node-path-column/node-path
 import { PopOverDirective } from './components/pop-over.directive';
 import { PermissionContainerComponent } from './components/permission-container/permission-container.component';

+export const CONTENT_PERMISSION_MANAGER_DIRECTIVES = [
+    AddPermissionPanelComponent,
+    AddPermissionComponent,
+    AddPermissionDialogComponent,
+    NodePathColumnComponent,
+    PermissionContainerComponent,
+    PermissionListComponent,
+    UserNameColumnComponent,
+    UserIconColumnComponent,
+    UserRoleColumnComponent,
+    InheritPermissionDirective,
+    PopOverDirective
+] as const;
+
+/** @deprecated use `...CONTENT_PERMISSION_MANAGER_DIRECTIVES` or import the standalone components directly */
@NgModule({
-    imports: [CoreModule, CommonModule, FormsModule, ReactiveFormsModule, MaterialModule, SearchModule, PipeModule, InitialUsernamePipe],
-    declarations: [
-        PermissionListComponent,
-        AddPermissionPanelComponent,
-        InheritPermissionDirective,
-        AddPermissionComponent,
-        AddPermissionDialogComponent,
-        UserNameColumnComponent,
-        UserIconColumnComponent,
-        UserRoleColumnComponent,
-        PopOverDirective,
-        NodePathColumnComponent,
-        PermissionContainerComponent
-    ],
-    exports: [
-        PermissionListComponent,
-        AddPermissionPanelComponent,
-        InheritPermissionDirective,
-        AddPermissionComponent,
-        AddPermissionDialogComponent,
-        UserNameColumnComponent,
-        UserIconColumnComponent,
-        UserRoleColumnComponent,
-        PopOverDirective,
-        NodePathColumnComponent
-    ]
+    imports: [...CONTENT_PERMISSION_MANAGER_DIRECTIVES],
+    exports: [...CONTENT_PERMISSION_MANAGER_DIRECTIVES]
 })
 export class PermissionManagerModule {}
--- a/lib/content-services/src/lib/tree-view/tree-view.module.ts
+++ b/lib/content-services/src/lib/tree-view/tree-view.module.ts
@@ -18,7 +18,7 @@
 import { NgModule } from '@angular/core';
 import { TreeViewComponent } from './components/tree-view.component';

-/** @deprecated this module is deprecated and will be removed in future versions */
+/** @deprecated use `TreeViewComponent` instead */
@NgModule({
    imports: [TreeViewComponent],
    exports: [TreeViewComponent]