diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts index cc3c01a629..9bce0c41ce 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts @@ -328,7 +328,6 @@ describe('CategoriesManagementComponent', () => { const categoriesChangeSpy = spyOn(component.categoriesChange, 'emit').and.callThrough(); typeCategory('test'); const options = getExistingCategoriesList(); - // eslint-disable-next-line no-underscore-dangle options[0].click(); expect(component.categories.length).toBe(3); @@ -342,7 +341,6 @@ describe('CategoriesManagementComponent', () => { it('should remove selected category from categories list and add it back to existing categories', fakeAsync(() => { typeCategory('test'); const options = getExistingCategoriesList(); - // eslint-disable-next-line no-underscore-dangle options[0].click(); fixture.detectChanges(); 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 index 39ed4fa627..c69917add1 100644 --- a/lib/core/src/lib/context-menu/context-menu-list.component.ts +++ b/lib/core/src/lib/context-menu/context-menu-list.component.ts @@ -26,6 +26,7 @@ import { NgForOf, NgIf } from '@angular/common'; import { TranslatePipe } from '@ngx-translate/core'; import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes'; import { IconModule } from '../icon/icon.module'; +import { ContextMenuItem } from './interfaces'; @Component({ selector: 'adf-context-menu', @@ -42,10 +43,10 @@ import { IconModule } from '../icon/icon.module'; export class ContextMenuListComponent implements AfterViewInit { private keyManager: FocusKeyManager; @ViewChildren(MatMenuItem) items: QueryList; - links: any[]; + links: ContextMenuItem[]; @HostListener('document:keydown.Escape', ['$event']) - handleKeydownEscape(event: KeyboardEvent) { + handleKeydownEscape(event: Event) { if (event) { this.contextMenuOverlayRef.close(); } @@ -63,12 +64,12 @@ export class ContextMenuListComponent implements AfterViewInit { constructor( @Inject(ContextMenuOverlayRef) private contextMenuOverlayRef: ContextMenuOverlayRef, - @Optional() @Inject(CONTEXT_MENU_DATA) private data: any + @Optional() @Inject(CONTEXT_MENU_DATA) private data: ContextMenuItem[] ) { this.links = this.data; } - onMenuItemClick(event: Event, menuItem: any) { + onMenuItemClick(event: Event, menuItem: ContextMenuItem) { if (menuItem?.model?.disabled) { event.preventDefault(); event.stopImmediatePropagation(); diff --git a/lib/core/src/lib/context-menu/context-menu-overlay.service.ts b/lib/core/src/lib/context-menu/context-menu-overlay.service.ts index f7f9556f06..a845b47d99 100644 --- a/lib/core/src/lib/context-menu/context-menu-overlay.service.ts +++ b/lib/core/src/lib/context-menu/context-menu-overlay.service.ts @@ -17,7 +17,7 @@ import { Injectable, Injector, ElementRef, ComponentRef } from '@angular/core'; import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; -import { PortalInjector, ComponentPortal } from '@angular/cdk/portal'; +import { ComponentPortal } from '@angular/cdk/portal'; import { ContextMenuOverlayRef } from './context-menu-overlay'; import { ContextMenuOverlayConfig } from './interfaces'; import { CONTEXT_MENU_DATA } from './context-menu.tokens'; @@ -33,7 +33,10 @@ const DEFAULT_CONFIG: ContextMenuOverlayConfig = { providedIn: 'root' }) export class ContextMenuOverlayService { - constructor(private injector: Injector, private overlay: Overlay) {} + constructor( + private injector: Injector, + private overlay: Overlay + ) {} open(config: ContextMenuOverlayConfig): ContextMenuOverlayRef { const overlayConfig = { ...DEFAULT_CONFIG, ...config }; @@ -47,14 +50,12 @@ export class ContextMenuOverlayService { overlay.backdropClick().subscribe(() => overlayRef.close()); // prevent native contextmenu on overlay element if config.hasBackdrop is true - if (overlayConfig.hasBackdrop) { - // eslint-disable-next-line no-underscore-dangle - (overlay as any).backdropElement.addEventListener( + if (overlayConfig.hasBackdrop && overlay.backdropElement) { + overlay.backdropElement.addEventListener( 'contextmenu', (event) => { event.preventDefault(); - // eslint-disable-next-line no-underscore-dangle - (overlay as any)._backdropClick.next(null); + overlayRef.close(); }, true ); @@ -77,28 +78,32 @@ export class ContextMenuOverlayService { return containerRef.instance; } - private createInjector(config: ContextMenuOverlayConfig, contextMenuOverlayRef: ContextMenuOverlayRef): PortalInjector { - const injectionTokens = new WeakMap(); - - injectionTokens.set(ContextMenuOverlayRef, contextMenuOverlayRef); - injectionTokens.set(CONTEXT_MENU_DATA, config.data); - - return new PortalInjector(this.injector, injectionTokens); + private createInjector(config: ContextMenuOverlayConfig, contextMenuOverlayRef: ContextMenuOverlayRef): Injector { + return Injector.create({ + parent: this.injector, + providers: [ + { provide: ContextMenuOverlayRef, useValue: contextMenuOverlayRef }, + { provide: CONTEXT_MENU_DATA, useValue: config.data } + ] + }); } private getOverlayConfig(config: ContextMenuOverlayConfig): OverlayConfig { const { clientY, clientX } = config.source; - const fakeElement: any = { - getBoundingClientRect: (): ClientRect => + const fakeElement: Pick = { + getBoundingClientRect: (): DOMRect => ({ bottom: clientY, height: 0, left: clientX, right: clientX, top: clientY, - width: 0 - } as any) + width: 0, + x: clientX, + y: clientY, + toJSON: () => ({}) + }) as DOMRect }; const positionStrategy = this.overlay diff --git a/lib/core/src/lib/context-menu/context-menu.tokens.ts b/lib/core/src/lib/context-menu/context-menu.tokens.ts index 51595c6a12..0661a9cc48 100644 --- a/lib/core/src/lib/context-menu/context-menu.tokens.ts +++ b/lib/core/src/lib/context-menu/context-menu.tokens.ts @@ -16,5 +16,6 @@ */ import { InjectionToken } from '@angular/core'; +import { ContextMenuItem } from './interfaces'; -export const CONTEXT_MENU_DATA = new InjectionToken('CONTEXT_MENU_DATA'); +export const CONTEXT_MENU_DATA = new InjectionToken('CONTEXT_MENU_DATA'); diff --git a/lib/core/src/lib/context-menu/interfaces.ts b/lib/core/src/lib/context-menu/interfaces.ts index d402e49b32..a6fe0bf3c1 100644 --- a/lib/core/src/lib/context-menu/interfaces.ts +++ b/lib/core/src/lib/context-menu/interfaces.ts @@ -20,5 +20,19 @@ export interface ContextMenuOverlayConfig { hasBackdrop?: boolean; backdropClass?: string; source?: MouseEvent; - data?: any; + data?: ContextMenuItem[]; +} + +export interface ContextMenuItem { + title?: string; + model?: { + title?: string; + visible?: boolean; + disabled?: boolean; + icon?: string; + tooltip?: string; + }; + subject: { + next: (value: ContextMenuItem) => void; + }; }