[ACS-7380][ADF] Break Context Menu dependency on Material Module (#9487)

* [ACS-7380] convert context menu to standalone * [ACS-7380] convert context menu to standalone * [ACS-7380] convert context menu to standalone
Alfresco · Apr 3, 2024 · 91e1c47 · 91e1c47
1 parent c73fb1b
commit 91e1c47
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 40 deletions.
diff --git a/lib/core/src/lib/context-menu/context-menu-list.component.html b/lib/core/src/lib/context-menu/context-menu-list.component.html
@@ -0,0 +1,14 @@
+<div mat-menu class="mat-menu-panel" @panelAnimation>
+    <div id="adf-context-menu-content" class="mat-menu-content">
+        <ng-container *ngFor="let link of links">
+            <button *ngIf="link.model?.visible"
+                    [attr.data-automation-id]="'context-' + (link.title || link.model?.title | translate)"
+                    mat-menu-item
+                    [disabled]="link.model?.disabled"
+                    (click)="onMenuItemClick($event, link)">
+                <mat-icon *ngIf="link.model?.icon">{{ link.model.icon }}</mat-icon>
+                <span>{{ link.title || link.model?.title | translate }}</span>
+            </button>
+        </ng-container>
+    </div>
+</div>
diff --git a/lib/core/src/lib/context-menu/context-menu-list.component.ts b/lib/core/src/lib/context-menu/context-menu-list.component.ts
@@ -15,40 +15,28 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation, HostListener, AfterViewInit, Optional, Inject, QueryList, ViewChildren } from '@angular/core';
 import { trigger } from '@angular/animations';
-import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
 import { FocusKeyManager } from '@angular/cdk/a11y';
-import { MatMenuItem } from '@angular/material/menu';
-import { ContextMenuOverlayRef } from './context-menu-overlay';
+import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
+import { NgForOf, NgIf } from '@angular/common';
+import { AfterViewInit, Component, HostListener, Inject, Optional, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuItem, MatMenuModule } from '@angular/material/menu';
+import { TranslateModule } from '@ngx-translate/core';
 import { contextMenuAnimation } from './animations';
+import { ContextMenuOverlayRef } from './context-menu-overlay';
 import { CONTEXT_MENU_DATA } from './context-menu.tokens';
 
 @Component({
     selector: 'adf-context-menu',
-    template: `
-        <div mat-menu class="mat-menu-panel" @panelAnimation>
-            <div id="adf-context-menu-content" class="mat-menu-content">
-                <ng-container *ngFor="let link of links">
-                    <button
-                        *ngIf="link.model?.visible"
-                        [attr.data-automation-id]="'context-' + (link.title || link.model?.title | translate)"
-                        mat-menu-item
-                        [disabled]="link.model?.disabled"
-                        (click)="onMenuItemClick($event, link)"
-                    >
-                        <mat-icon *ngIf="link.model?.icon">{{ link.model.icon }}</mat-icon>
-                        <span>{{ link.title || link.model?.title | translate }}</span>
-                    </button>
-                </ng-container>
-            </div>
-        </div>
-    `,
+    standalone: true,
+    templateUrl: './context-menu-list.component.html',
     host: {
         role: 'menu',
         class: 'adf-context-menu'
     },
     encapsulation: ViewEncapsulation.None,
+    imports: [MatIconModule, MatMenuModule, NgForOf, NgIf, TranslateModule],
     animations: [trigger('panelAnimation', contextMenuAnimation)]
 })
 export class ContextMenuListComponent implements AfterViewInit {

diff --git a/lib/core/src/lib/context-menu/context-menu.directive.ts b/lib/core/src/lib/context-menu/context-menu.directive.ts
@@ -21,7 +21,8 @@ import { Directive, HostListener, Input } from '@angular/core';
 import { ContextMenuOverlayService } from './context-menu-overlay.service';
 
 @Directive({
-    selector: '[adf-context-menu]'
+    selector: '[adf-context-menu]',
+    standalone: true
 })
 export class ContextMenuDirective {
     /** Items for the menu. */

diff --git a/lib/core/src/lib/context-menu/context-menu.module.ts b/lib/core/src/lib/context-menu/context-menu.module.ts
@@ -15,26 +15,12 @@
  * limitations under the License.
  */
 
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MaterialModule } from '../material.module';
-import { TranslateModule } from '@ngx-translate/core';
-
 import { ContextMenuDirective } from './context-menu.directive';
 import { ContextMenuListComponent } from './context-menu-list.component';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        MaterialModule,
-        TranslateModule
-    ],
-    declarations: [
-        ContextMenuDirective,
-        ContextMenuListComponent
-    ],
-    exports: [
-        ContextMenuDirective
-    ]
+    imports: [ContextMenuListComponent, ContextMenuDirective],
+    exports: [ContextMenuListComponent, ContextMenuDirective]
 })
 export class ContextMenuModule {}
diff --git a/lib/core/src/lib/context-menu/public-api.ts b/lib/core/src/lib/context-menu/public-api.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
+export * from './context-menu-list.component';
 export * from './context-menu.directive';
 export * from './context-menu-overlay.service';
-
 export * from './context-menu.module';